Tabs

Tabs are a form of secondary in-page navigation, helping to group different types of content in a limited space.

Use tabs to split long content into manageable chunks to avoid overwhelming the user.
 

Default

By default the first tab is selected.

<div class="nsw-container">
  <div class="nsw-tabs js-tabs is-ready">
    <ul class="nsw-tabs__list" role="tablist">
      <li class="nsw-tabs__list-item is-selected" role="presentation">
        <a href="#section1" class="nsw-tabs__link" role="tab" id="tab-bpx4lfbwzmn" aria-selected="true">New and existing homes</a>
      </li>
      <li class="nsw-tabs__list-item" role="presentation">
        <a href="#section2" class="nsw-tabs__link" role="tab" id="tab-j8772yh36zs" aria-selected="false" tabindex="-1">Vacant land</a>
      </li>
      <li class="nsw-tabs__list-item" role="presentation">
        <a href="#section3" class="nsw-tabs__link" role="tab" id="tab-0cbcrs523a9" aria-selected="false" tabindex="-1">Knockdown rebuild</a>
      </li>
    </ul>
    <section id="section1" class="nsw-tabs__content" role="tabpanel" aria-labelledby="tab-bpx4lfbwzmn" tabindex="0">
      <div class="nsw-wysiwyg-content"><h2>New and existing homes</h2><p>As a first home buyer, you may be eligible for a <a href="https://www.revenue.nsw.gov.au/taxes-duties-levies-royalties/transfer-duty">transfer duty</a> concession or exemption.</p><ul><li>If your home is valued at less than $650,000, you can apply for a full exemption so that you don’t have to pay transfer duty.</li><li>If the value of your home is between $650,000 and $800,000, you can apply for a concessional rate of transfer duty. The amount you’ll have to pay will be based on the value of your home.</li></ul></div>
    </section>
    <section id="section2" class="nsw-tabs__content" role="tabpanel" aria-labelledby="tab-j8772yh36zs" tabindex="0" hidden="">
      <div class="nsw-wysiwyg-content"><h2>Vacant land</h2> <p>The FHBAS applies to vacant land on which you plan to build your home.</p><ul> <li>You won’t pay any <a href="https://www.revenue.nsw.gov.au/taxes-duties-levies-royalties/transfer-duty">transfer duty</a> if your land is valued at less than $350,000.</li><li>For land valued between $350,000 and $450,000, you’ll receive a concessional rate.</li></ul></div>
    </section>
    <section id="section3" class="nsw-tabs__content" role="tabpanel" aria-labelledby="tab-0cbcrs523a9" tabindex="0" hidden="">
      <div class="nsw-wysiwyg-content"><h2>Knockdown rebuild</h2> <p>If you’re like many Sydney homeowners, you wish you had a more spacious and luxurious home. The problem is, you don’t want to give up your prized location!<br>KnockDown Rebuild by Metricon gives you the best of both worlds.</p><p>You can have a gorgeous, modern home with plenty of space for your family – without giving up the location you love. All you have to do is demolish your existing dwelling and replace it with your dream Metricon home.</p></div>
    </section>
  </div>
</div>
<script src="../../js/main.js"></script>
<script>window.NSW.initSite()</script>

 

Copy

The tab metaphor is based on filing cabinet tabs which are familiar to many users.

Tabs make it easy to explore and switch between different blocks of content.

Tabs save space on otherwise long content.

Tabs allow users to focus on specific content whilst remaining clear on the overall context of the screen.

Tabs declutter the UI through progressive disclosure

Use to conserve space on busy pages.

Use to split related but discrete content within a single screen.

Use between 2-5 tabs.

Use short (preferably single word), easily scannable, unique titles.

Order the tabs by importance/relevance to the user, from left to right.

Don't use for very small (1 paragraph or equivalent) content.

Don't use for very long content where the physical tabs become lost.

Don't use for content where users are likely to want to compare information across multiple tabs (consider an accordion).

Don't use tabs within tabs.

Don't display disabled tabs.

Avoid long tab switching time.

The highlight bar is customisable with your brand colour, where a brand exemption has been approved. 

You will need to change the nsw-primary-highlight colour in the _settings.scss file.


$nsw-primary-highlight: #d7153a !default;

New and existing homes

As a first home buyer, you may be eligible for a transfer duty concession or exemption.

  • If your home is valued at less than $650,000, you can apply for a full exemption so that you don’t have to pay transfer duty.
  • If the value of your home is between $650,000 and $800,000, you can apply for a concessional rate of transfer duty. The amount you’ll have to pay will be based on the value of your home.