Indigo Design System v1.2.0

Tabs

Tabs allow users to toggle between information on a page.

Overview

Using tabs allows users to toggle between similar information on one page, rather than having to visit multiple pages.

These tabs are designed to ensure consistency across all USAC products.

Design and Implementation

When using tabs, align them horizontally. All tabs should be left aligned. This will allow users to easily switch between different views.

The title of the tab that the user is currently on should be called out with a $indi-color-accent-32 underline.

The titles of the hidden tabs should be visible and clickable (designed to look like links).

  • Appeals

    Any party (including, but not limited to entities filing an FCC Form 499, federal universal service program applicants, and service providers) that wishes to appeal a USAC decision must first file an appeal with USAC to seek review of the USAC decision before filing an appeal with the FCC.

  • BCAP

    USAC is committed to collecting universal service contributions and disbursing payments to program beneficiaries that are accurate, properly documented, and in compliance with rules established by the Federal Communications Commission (FCC)

  • PQA Program

    The Payment Quality Assurance (PQA) Program allows USAC to provide the Federal Communications Commission (FCC) with information about improper payments to program beneficiaries, as required by the Improper Payments Information Act of 2002 (IPIA) PDF (opens in new window) and the Improper Payments Elimination and Recovery Act of 2010 (IPERA) PDF (opens in new window).

<div class="indi-tab">
    <div class="indi-tab__wrapper">
        <ul class="indi-tab__table">
            <li class="indi-tab__cell">
                <button class="indi-tab__label indi-tab__label--active" id="appeals" aria-controls="Appeals-content">Appeals </button>
            </li>
            <li class="indi-tab__cell">
                <button class="indi-tab__label" id="bcap" aria-controls="BCAP-content">BCAP </button>
            </li>
            <li class="indi-tab__cell">
                <button class="indi-tab__label" id="pqa-program" aria-controls="PQA Program-content">PQA Program </button>
            </li>
        </ul>
    </div>
    <ul class="indi-tab__content-list">
        <li id="appeals-content" class="indi-tab__content-item indi-tab__content-item--active">
            <div class="indi-long-form-text">
                <h2>Appeals</h2>
                <p>Any party (including, but not limited to entities filing an FCC Form 499, federal universal service program applicants, and service providers) that wishes to appeal a USAC decision must first file an appeal with USAC to seek review of the USAC decision before filing an appeal with the FCC.</p>
            </div>
        </li>
        <li id="bcap-content" class="indi-tab__content-item">
            <div class="indi-long-form-text">
                <h2>BCAP</h2>
                <p>USAC is committed to collecting universal service contributions and disbursing payments to program beneficiaries that are accurate, properly documented, and in compliance with rules established by the Federal Communications Commission (FCC)</p>
            </div>
        </li>
        <li id="pqa-program-content" class="indi-tab__content-item">
            <div class="indi-long-form-text">
                <h2>PQA Program</h2>
                <p>The Payment Quality Assurance (PQA) Program allows USAC to provide the Federal Communications Commission (FCC) with information about improper payments to program beneficiaries, as required by the Improper Payments Information Act of 2002 (IPIA) PDF (opens in new window) and the Improper Payments Elimination and Recovery Act of 2010 (IPERA) PDF (opens in new window). </p>
            </div>
        </li>
    </ul>
</div>

Use Guidelines

Use When

  • Alternating between views within the same context.
  • Logically separating content to allow users to choose the type of information they need. For example, you can split content by user type so individual filers don’t see content for service providers and vice versa.

Don't Use When

  • Users need to compare information or see the information that is behind different tabs at the same time.
  • You need more than five tabs, two to four is the ideal number of tabs.
  • Navigating between pages or between drastically different types of content.

Editorial

  • Strive for short, succinct tab titles that clearly describe the content in that section.
  • Avoid lengthy tab titles that wrap.
  • Body content inside each tab should be similar in structure to avoid disrupting the user’s experience when flipping between tabs.

Accessibility

  • Provide an aria-controls="" attribute on the tab button that corresponds with the id="" of that tab's content section.