Pattern Library

<div class="container">
  <tab-group>
    <nav aria-labelledby="heading-nav-tabs">
      <h3 id="heading-nav-tabs" class="heading" data-scheme="section">Fibre types</h3>
      <ul>
        <li>
          <a href="#section-content-business">
            Business
          </a>
        </li>
        <li>
          <a href="#section-content-home">
            Home
          </a>
        </li>
      </ul>
    </nav>
    <section id="section-content-business" aria-labelledby="heading-content-business">
      <header>
        <h4 id="heading-content-business" class="heading" data-scheme="block">Business</h4>
      </header>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        Illo optio mollitia assumenda odio iure voluptatum sed, magnam,
        impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque?
        Quos!
      </p>
    </section>
    <section id="section-content-home" aria-labelledby="heading-content-home">
      <header>
        <h4 id="heading-content-home" class="heading" data-scheme="block">Home</h4>
      </header>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        Illo optio mollitia assumenda odio iure voluptatum sed, magnam,
        impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque?
        Quos!
      </p>
    </section>
  </tab-group>
</div>

• Each anchor's href must point to each section's id value.
• If the user-agent is entering this page with one of the sections in this tab-group identified in the URL, then the Component will show that tab first.
• Otherwise, the Component will show the first tab by default, if no inital tab is set (see below), or no matching fragment is present in the URL (see above).
• If you want to set an initial tab other than the first one, please set a data-initial attribute value to the zero-based index. i.e. The second tab has an index of 1, so: data-initial="1".

Pattern scope:

Molecule – A combination of disparate Atoms

Relevant assets:

Stylesheets:

• Shared stylesheets [See index.css]
• /css/icons.css
• /css/patterns/tab-group.css

• Mode: Advantage 

  A specialised tab group that sells the Vanilla advnantage

  Example

  Open type in a new window

  Code sample

  <vanilla-advantage>
    <article class="container" data-theme="stripped" aria-labelledby="heading-vanilla-advantage">
      <header>
        <h2 class="heading" data-scheme="paragraph" data-variant="uppercase" id="heading-vanilla-advantage">
          <span>The vanilla</span>
          <span>advantage</span>
        </h2>
      </header>
      <tab-group data-initial="-1" data-mode="advantage">
        <nav aria-labelledby="advantage-nav-heading">
          <h3 id="advantage-nav-heading" class="screenreader-only">What is the vanilla advantage</h3>
          <ul>
            <li>
              <a href="#advantage-section-speed">
                Up to 10,000<abbr title="megabits per second">Mbps</abbr>
              </a>
            </li>
            <li>
              <a href="#advantage-section-business">
                Business bundle
              </a>
            </li>
            <li>
              <a href="#advantage-section-monthly">
                Month-to-month
              </a>
            </li>
            <li>
              <a href="#advantage-section-reliability">
                99.9% uptime
              </a>
            </li>
          </ul>
        </nav>
        <section id="advantage-section-speed">
          <header class="screenreader-only">
            <h3>Speed</h3>
          </header>
          <div class="hero_banner" data-ratio="2" data-scheme="centered">
            <div class="media">
              <p class="heading" data-scheme="section" data-variant="thin">Aamzing speed!</p>
            </div>  
            <div class="content">
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo optio mollitia assumenda odio iure voluptatum sed, magnam, impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque? Quos!</p>
            </div>
          </div>
        </section>
        <section id="advantage-section-business">
          <header class="screenreader-only">
            <h3>Business bundle</h3>
          </header>
          <div class="hero_banner" data-ratio="2" data-scheme="centered">
            <div class="media">
              <p class="heading" data-scheme="section" data-variant="thin">Business bundles available!</p>
            </div>  
            <div class="content">
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo optio mollitia assumenda odio iure voluptatum sed, magnam, impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque? Quos!</p>
            </div>
          </div>
        </section>
        <section id="advantage-section-monthly">
          <header class="screenreader-only">
            <h3>Month to month</h3>
          </header>
          <div class="hero_banner" data-ratio="2" data-scheme="centered">
            <div class="media">
              <p class="heading" data-scheme="section" data-variant="thin">No contracts!</p>
            </div>  
            <div class="content">
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo optio mollitia assumenda odio iure voluptatum sed, magnam, impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque? Quos!</p>
            </div>
          </div>
        </section>
        <section id="advantage-section-reliability">
          <header class="screenreader-only">
            <h3>Reliability</h3>
          </header>
          <div class="hero_banner" data-ratio="2" data-scheme="centered">
            <div class="media">
              <p class="heading" data-scheme="section" data-variant="thin">Rock-solid reliability!</p>
            </div>  
            <div class="content">
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo optio mollitia assumenda odio iure voluptatum sed, magnam, impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque? Quos!</p>
            </div>
          </div>
        </section>
      </tab-group>
    </article>
  </vanilla-advantage>