• Patterns
  • General

Standard tabbed UI

One word tabs for testing
Huzzah
  
<div class="tab-pane tab-pane--dual">
  <ul class="list--neutral nav--block--spaced">
    <li>
      <a href="#section1" class="tab-pane__tab">Published</a>
    </li>
    <li>
      <a href="#section2" class="tab-pane__tab">Upcoming</a>
    </li>
  </ul>
  <div class="tab-pane__content" id="section1">
    One word tabs for testing
  </div>

  <div class="tab-pane__content" id="section2">
    Huzzah
  </div>
</div>

Developer Notes

This can have have pretty much anything in it, as long as there are sections with ul > li > as matching up with their ID.