OCDE - Pattern Library v1.13.0

Tabs: Default (Example) 

<nav class="tabs" aria-labelledby="heading-programtypes">
    <h3 class="u-visuallyhidden" id="heading-programtypes">Program Types</h3>
    <button class="tab tab-is-active" type="button" aria-labelledby="heading-programtypes">COLLEGES</button>
    <button class="tab" type="button" aria-labelledby="heading-programtypes">HIGH SCHOOL DISTRICTS</button>
</nav>
 
<nav class="{{render '@tabs'}}" aria-labelledby="heading-programtypes">
  <h3 class="{{render '@u-visuallyhidden'}}" id="heading-programtypes">Program Types</h3>
  <button class="{{render '@tab--isactive'}}" type="button" aria-labelledby="heading-programtypes">COLLEGES</button>
  <button class="{{render '@tab'}}" type="button" aria-labelledby="heading-programtypes">HIGH SCHOOL DISTRICTS</button>
</nav>
 
/* No context defined. */
  • Content: 
    .tabs {
  background-color: $color-light2;
  border-radius: 500px; // Large value creates pill shape
  display: inline-flex;
  padding: $gridspacing / 2;

  > *:not(:last-child) {
    margin-right: $gridspacing / 2;
  }
}
  • URL: /components/raw/tabs/_tabs.scss
  • Filesystem Path: src/scss/02-modules/tabs/_tabs.scss
  • Size: 222 Bytes

No notes defined.