Amara styleguide

Tabs

Used to display multiple pieces of content in a single logical space. Tabs be setup as normal links that cause a new page load or as javascript links that show/hide content already loaded in the page. Use the `vertical` class to lay the tabs out vertically. Use the `mini` class to display a mini-tab switcher -- this is often used switch between list and grid view.

The CSS that creates the tabbed look, and the javascript that handles hiding/showing the tabbed content are distinct. You can have tab-like behavior of showing/hiding content without displaying actual tabs to toggle them.

Use the data-persist attribute to save tab choices in a cookie. When users reload the page they will see their last selected tab. Set the value of the attribute to be the name of the cookie to store.

Horizontal tabs

Example

  
  <nav class="tabs">
    <a class="active" href="#tab1">Tab One</a>
    <a href="#tab2">Tab Two</a>
    <a href="#tab3">Tab Three</a>
  </nav>
  <div id="tab1" class="tab active">
    Tab One Content...
  </div>
  <div id="tab2" class="tab">
    Tab Two Content...
  </div>
  <div id="tab3" class="tab">
    Tab Three Content...
  </div>
Tab One Content...
Tab Two Content...
Tab Three Content...

Vertical tabs

Example

  
  <div class="verticalTabContainer">
    <nav class="tabs vertical" data-persist="styleguide-persistent-tabs">
      <a class="active" href="#verticaltab1">Tab One</a>
      <a href="#verticaltab2">Tab Two</a>
      <a href="#verticaltab3">Tab Three</a>
    </nav>
    <div class="verticalTabContainer-content">
      <div id="verticaltab1" class="tab active">
        Tab One Content...
      </div>
      <div id="verticaltab2" class="tab">
        Tab Two Content...
      </div>
      <div id="verticaltab3" class="tab">
        Tab Three Content...
      </div>
    </div>
  </div>
Tab One Content...
Tab Two Content...
Tab Three Content...

Overflowing tabs (resize the browser width to see)

Example

  
  <nav class="tabs">
    {% for i in "0123456789abc" %}
    <a{% if forloop.first %} class="active"{% endif %} href="#overflow-tab{{ i }}">Tab #{{ i }}</a>
    {% endfor %}
  </nav>
  {% for i in "0123456789abc" %}
  <div id="overflow-tab{{ i }}" class="tab{% if forloop.first %} active{% endif %}">
    Tab {{ i }} Content...
  </div>
  {% endfor %}
Tab 0 Content...
Tab 1 Content...
Tab 2 Content...
Tab 3 Content...
Tab 4 Content...
Tab 5 Content...
Tab 6 Content...
Tab 7 Content...
Tab 8 Content...
Tab 9 Content...
Tab a Content...
Tab b Content...
Tab c Content...

Buttons as tab switchers

Example

  
  <a class="button plum tabSwitcher" href="#buttontab1">Tab One</a>
  <a class="button cta tabSwitcher" href="#buttontab2">Tab Two</a>
  <a class="button cta-reverse tabSwitcher" href="#buttontab3">Tab Three</a>
  <div class="content">
    <div id="buttontab1" class="tab active">
      Tab One Content...
    </div>
    <div id="buttontab2" class="tab">
      Tab Two Content...
    </div>
    <div id="buttontab3" class="tab">
      Tab Three Content...
    </div>
  </div>
Tab One Tab Two Tab Three
Tab One Content...
Tab Two Content...
Tab Three Content...

Mini tab switcher

Example

  
  <nav class="tabs mini">
    <a class="active" data-target="#minitab1"><span class="fas fa-list"></span></a>
    <a data-target="#minitab2"><span class="fas fa-th-large"></span></a>
  </nav>
  <div id="minitab1" class="tab active">
    Tab One Content...
  </div>
  <div id="minitab2" class="tab">
    Tab Two Content...
  </div>
Tab One Content...
Tab Two Content...

Old style tabs

Below are old-style tabs that leverage the bootstrap JS to switch tabs. Please use the classes above for new code.

Horizontal tabs

Example

  
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab_11" data-toggle="tab">Tab One</a></li>
    <li><a href="#tab_12" data-toggle="tab">Tab Two</a></li>
    <li><a href="#tab_13" data-toggle="tab">Tab Three</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab_11" class="tab-pane active">
      Tab One Content...
    </div>
    <div id="tab_12" class="tab-pane">
      Tab Two Content...
    </div>
    <div id="tab_13" class="tab-pane">
      Tab Three Content...
    </div>
  </div>
Tab One Content...
Tab Two Content...
Tab Three Content...

Vertical tabs

Example

  
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <ul class="nav nav-tabs vertical persistentTabs" data-persistent-tab-cookie="styleguide-tabs">
        <li class="active"><a class="persistentTab" href="#tab_21" data-toggle="tab">Tab One</a></li>
        <li><a class="persistentTab" href="#tab_22" data-toggle="tab">Tab Two</a></li>
        <li><a class="persistentTab" href="#tab_23" data-toggle="tab">Tab Three</a></li>
      </ul>
    </div>
    <div class="col-xs-12 col-sm-8 tab-content">
      <div id="tab_21" class="tab-pane active">
        Tab One Content...
      </div>
      <div id="tab_22" class="tab-pane">
        Tab Two Content...
      </div>
      <div id="tab_23" class="tab-pane">
        Tab Three Content...
      </div>
    </div>
  </div>
Tab One Content...
Tab Two Content...
Tab Three Content...

Buttons as tab switchers

Example

  
  <a class="button plum" href="#tab_31" data-toggle="tab">Tab One</a>
  <a class="button cta" href="#tab_32" data-toggle="tab">Tab One</a>
  <a class="button reversed" href="#tab_33" data-toggle="tab">Tab One</a>
  <div class="tab-content">
    <div id="tab_31" class="tab-pane active">
      Tab One Content...
    </div>
    <div id="tab_32" class="tab-pane">
      Tab Two Content...
    </div>
    <div id="tab_33" class="tab-pane">
      Tab Three Content...
    </div>
  </div>
Tab One Tab One Tab One
Tab One Content...
Tab Two Content...
Tab Three Content...