</> cf-tabs docs

view the repository

Tabs

Default tabs pattern

First tab content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quas obcaecati beatae sit aliquid saepe molestias ad molestiae illum eos vero mollitia temporibus aperiam culpa asperiores officiis minus eius animi?

Second tab content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quas obcaecati beatae sit aliquid saepe molestias ad molestiae illum eos vero mollitia temporibus aperiam culpa asperiores officiis minus eius animi?

Third tab content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quas obcaecati beatae sit aliquid saepe molestias ad molestiae illum eos vero mollitia temporibus aperiam culpa asperiores officiis minus eius animi?

<div class="tabs">
    <ul class="tabs_list">
        <li class="tabs_list-item">
            <button class="tabs_tab" data-panel="panel-1">First Tab</button>
        </li>
        <li class="tabs_list-item">
            <button class="tabs_tab" data-panel="panel-2">Second Tab</button>
        </li>
        <li class="tabs_list-item">
            <button class="tabs_tab" data-panel="panel-3">Third Tab</button>
        </li>
    </ul>
    <div class="tabs_panel" id="panel-1">
        <h1>First tab content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
           Itaque quas obcaecati beatae sit aliquid saepe molestias ad
           molestiae illum eos vero mollitia temporibus aperiam culpa
           asperiores officiis minus eius animi?</p>
    </div>
    <div class="tabs_panel" id="panel-2">
        <h1>Second tab content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
           Itaque quas obcaecati beatae sit aliquid saepe molestias ad
           molestiae illum eos vero mollitia temporibus aperiam culpa
           asperiores officiis minus eius animi?</p>
    </div>
    <div class="tabs_panel" id="panel-3">
        <h1>Third tab content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
           Itaque quas obcaecati beatae sit aliquid saepe molestias ad
           molestiae illum eos vero mollitia temporibus aperiam culpa
           asperiores officiis minus eius animi?</p>
    </div>
</div>
  • Each .tabs_tab must contain a [data-panel] attribute that matches the ID of the panel it controls.
  • ID's are required for each .tabs_panel for the reason stated above and are also used to dynamically set aria attributes like [aria-labeledby] for accessibility.
.tabs {
  margin: 0 0 1em;
}
.tabs_list {
  margin: 0;
  padding: 0;
  border-bottom: 4px solid #2cb34a;
  list-style-type: none;
}
.tabs_list:after {
  content: "";
  display: table;
  clear: both;
}
.lt-ie8 .tabs_list {
  zoom: 1;
}
.tabs_list-item {
  float: left;
  margin: 0;
  padding: 0;
}
.tabs_tab {
  display: block;
  margin-right: .5em;
  padding: 0.5em 1.875em;
  border: none;
  background-color: #e3e4e5;
  color: #101820;
  font-family: "AvenirNextLTW01-Regular", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}
.tabs_tab em,
.tabs_tab i {
  font-family: "AvenirNextLTW01-Italic", Arial, sans-serif;
  font-style: italic;
  font-weight: normal;
}
.lt-ie9 .tabs_tab em,
.lt-ie9 .tabs_tab i {
  font-style: normal !important;
}
.tabs_tab strong,
.tabs_tab b {
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}
.lt-ie9 .tabs_tab strong,
.lt-ie9 .tabs_tab b {
  font-weight: normal !important;
}
.tabs_tab:hover,
.tabs_tab:focus {
  border: none;
  background-color: #addc91;
}
.tabs_tab:focus {
  outline: 1px dotted #2cb34a;
  outline-offset: 1px;
}
.tabs_tab.is-active {
  background-color: #2cb34a;
  color: #ffffff;
}
.tabs_panel {
  padding-top: 0.9375em;
}
.tabs_panel:focus {
  outline: 1px dotted #2cb34a;
  outline-offset: 1px;
}