| Variable | property | value | desc. |
|---|---|---|---|
| $tab-base-color | color | $slate-gray |
tab base color |
| $tab-selected-color | color | $venice-blue |
tab selected color |
| $tab-hover-color | color | $venice-blue |
tab hover color |
| $tab-underline-size | size | rem(3px) |
tab underline size |
| $insert-tab-border-color | color | $silver-sand |
insert-tab border-color |
| $small-tab-underline-size | size | rem(2px) |
small tab underline size |
| $tab-pdv | padding | r(2) |
tab-link vertical padding |
| $tab-space-between | margin | r(4) |
space between tabs |
| $insert-tab-pdv | padding | r(4) |
insert-tab vertical padding |
| $insert-tab-pdh | padding | r(2) |
insert-tab horizontal padding |
| $tab-fz | font-size | $base-fz--rem |
tab font-size |
| $tab-lh | line-height | $base-lh |
tab line-height |
| $small-tab-fz | font-size | $base-fz--rem |
small-tab font-size |
| $small-tab-lh | line-height | $base-lh |
small-tab line-height |
| $selected-tab-selector | selector | "[aria-selected="true"]" |
selected tab selector |
<div class="Tabs">
<a class="Tab" aria-selected="true" tabindex="0" href="#foo">
Foo selected
</a>
<a class="Tab" aria-selected="false" tabindex="-1" href="#bar">
Bar thing thing
</a>
<a class="Tab" aria-selected="false" tabindex="-1" href="#baz">
Baz thing thing
</a>
</div><div class="Tabs Tabs--s">
<a class="Tab" aria-selected="true" tabindex="0" href="#foo">
Foo selected
</a>
<a class="Tab" aria-selected="false" tabindex="-1" href="#bar">
Bar thing thing
</a>
<a class="Tab" aria-selected="false" tabindex="-1" href="#baz">
Baz thing thing
</a>
</div>Alternative to use when you have two levels of tabs
<div class="Tabs Tabs--insert">
<a class="Tab" aria-selected="false" tabindex="0" href="#foo">
Foo selected
</a>
<a class="Tab" aria-selected="true" tabindex="-1" href="#bar">
Bar thing thing
</a>
<a class="Tab" aria-selected="false" tabindex="-1" href="#baz">
Baz thing thing
</a>
<div class="Tab Tab--fr"></div>
</div>