14 tabs Tabs

Open in new window

Tab component used on the topic listing pages. See this CSS-tricks article for a detailed explanation of how it was built.

Examples
Default styling
Markup: ../../../../../styleguide/styleguide-examples/tabs.njk 
<nav class="tabs">
  <ul class="tabs--list subtopics">
    <li class="tabs--item">
      <a class="tabs--link is-active" href="#">
        <span class="mobile-only">All</span>
        <span class="hide-on-mobile">All articles and threads</span>
      </a>
    </li>
    <li class="tabs--item">
      <a class="tabs--link" href="#">
        <span>Bookmarks and Tabs</span>
      </a>
    </li>
    <li class="tabs--item">
      <a class="tabs--link" href="#">
      <span>Tips and Tricks</span>
      </a>
    </li>
  </ul>
</nav>

<div style="height:200px"><!-- necessary for z-index issues in styleguide iframes -->
Source: ../kitsune/sumo/static/sumo/scss/components/_tabs.scss, line 1