Sign in to your account
Create your free account
-
- Shopping Cart
-
Nexus
$9.95
-
Nexus
$24.95
-
$34.90
-
USD
- GBP
- USD
- EUR
- JPY
- RUB
Files
Module Overview
- Name:
tabs - Components:
nav[center, left, right, full],content[block[glue, deep]],item - Modifiers: null
Examples
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit risus eget dignissim varius. Vivamus tellus sem, egestas at hendrerit ultrices, pulvinar nec ipsum.
Aenean finibus blandit ex ut pretium. Etiam efficitur sapien nec mauris efficitur ultrices. In eget volutpat turpis. Morbi velit ex, malesuada at tellus vel, lacinia feugiat dolor. Nullam ultrices pharetra laoreet. Nunc ut lectus arcu. Nunc sed faucibus sapien, quis facilisis tellus.
Ut egestas, sapien et porta bibendum, erat tortor rutrum libero, non hendrerit odio mi eu ex. Nulla justo sapien, ultricies nec consectetur id, hendrerit cursus lectus.
<div class="tabs">
<ul class="tabs_nav">
<li class="button active">Latest</li>
<li class="button">Popular</li>
<li class="button">Comments</li>
</ul>
<div class="tabs_content-block">
<section class="tabs_item active">
...
</section>
<section class="tabs_item">
...
</section>
<section class="tabs_item">
...
</section>
</div>
</div>
Tabs With Glued Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit risus eget dignissim varius. Vivamus tellus sem, egestas at hendrerit ultrices, pulvinar nec ipsum.
Aenean finibus blandit ex ut pretium. Etiam efficitur sapien nec mauris efficitur ultrices. In eget volutpat turpis. Morbi velit ex, malesuada at tellus vel, lacinia feugiat dolor. Nullam ultrices pharetra laoreet. Nunc ut lectus arcu. Nunc sed faucibus sapien, quis facilisis tellus.
Ut egestas, sapien et porta bibendum, erat tortor rutrum libero, non hendrerit odio mi eu ex. Nulla justo sapien, ultricies nec consectetur id, hendrerit cursus lectus.
<div class="tabs">
<ul class="tabs_nav">
...
</ul>
<div class="tabs_content-block-glue">
...
</div>
</div>
Tabs With Deep Content Padding
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit risus eget dignissim varius. Vivamus tellus sem, egestas at hendrerit ultrices, pulvinar nec ipsum.
Aenean finibus blandit ex ut pretium. Etiam efficitur sapien nec mauris efficitur ultrices. In eget volutpat turpis. Morbi velit ex, malesuada at tellus vel, lacinia feugiat dolor. Nullam ultrices pharetra laoreet. Nunc ut lectus arcu. Nunc sed faucibus sapien, quis facilisis tellus.
Ut egestas, sapien et porta bibendum, erat tortor rutrum libero, non hendrerit odio mi eu ex. Nulla justo sapien, ultricies nec consectetur id, hendrerit cursus lectus.
<div class="tabs">
<ul class="tabs_nav">
...
</ul>
<div class="tabs_content-block-deep">
...
</div>
</div>
Tabs With Aligned Navigation
Left (default)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit risus eget dignissim varius. Vivamus tellus sem, egestas at hendrerit ultrices, pulvinar nec ipsum.
Aenean finibus blandit ex ut pretium. Etiam efficitur sapien nec mauris efficitur ultrices. In eget volutpat turpis. Morbi velit ex, malesuada at tellus vel, lacinia feugiat dolor. Nullam ultrices pharetra laoreet. Nunc ut lectus arcu. Nunc sed faucibus sapien, quis facilisis tellus.
Ut egestas, sapien et porta bibendum, erat tortor rutrum libero, non hendrerit odio mi eu ex. Nulla justo sapien, ultricies nec consectetur id, hendrerit cursus lectus.
<ul class="tabs_nav-left">
...
</ul>
Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit risus eget dignissim varius. Vivamus tellus sem, egestas at hendrerit ultrices, pulvinar nec ipsum.
Aenean finibus blandit ex ut pretium. Etiam efficitur sapien nec mauris efficitur ultrices. In eget volutpat turpis. Morbi velit ex, malesuada at tellus vel, lacinia feugiat dolor. Nullam ultrices pharetra laoreet. Nunc ut lectus arcu. Nunc sed faucibus sapien, quis facilisis tellus.
Ut egestas, sapien et porta bibendum, erat tortor rutrum libero, non hendrerit odio mi eu ex. Nulla justo sapien, ultricies nec consectetur id, hendrerit cursus lectus.
<ul class="tabs_nav-center">
...
</ul>
Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit risus eget dignissim varius. Vivamus tellus sem, egestas at hendrerit ultrices, pulvinar nec ipsum.
Aenean finibus blandit ex ut pretium. Etiam efficitur sapien nec mauris efficitur ultrices. In eget volutpat turpis. Morbi velit ex, malesuada at tellus vel, lacinia feugiat dolor. Nullam ultrices pharetra laoreet. Nunc ut lectus arcu. Nunc sed faucibus sapien, quis facilisis tellus.
Ut egestas, sapien et porta bibendum, erat tortor rutrum libero, non hendrerit odio mi eu ex. Nulla justo sapien, ultricies nec consectetur id, hendrerit cursus lectus.
<ul class="tabs_nav-right">
...
</ul>
Tabs With Full-Width Navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit risus eget dignissim varius. Vivamus tellus sem, egestas at hendrerit ultrices, pulvinar nec ipsum.
Aenean finibus blandit ex ut pretium. Etiam efficitur sapien nec mauris efficitur ultrices. In eget volutpat turpis. Morbi velit ex, malesuada at tellus vel, lacinia feugiat dolor. Nullam ultrices pharetra laoreet. Nunc ut lectus arcu. Nunc sed faucibus sapien, quis facilisis tellus.
Ut egestas, sapien et porta bibendum, erat tortor rutrum libero, non hendrerit odio mi eu ex. Nulla justo sapien, ultricies nec consectetur id, hendrerit cursus lectus.
<ul class="tabs_nav-full">
...
</ul>
Tabs With Pill Navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit risus eget dignissim varius. Vivamus tellus sem, egestas at hendrerit ultrices, pulvinar nec ipsum.
Aenean finibus blandit ex ut pretium. Etiam efficitur sapien nec mauris efficitur ultrices. In eget volutpat turpis. Morbi velit ex, malesuada at tellus vel, lacinia feugiat dolor. Nullam ultrices pharetra laoreet. Nunc ut lectus arcu. Nunc sed faucibus sapien, quis facilisis tellus.
Ut egestas, sapien et porta bibendum, erat tortor rutrum libero, non hendrerit odio mi eu ex. Nulla justo sapien, ultricies nec consectetur id, hendrerit cursus lectus.
<div class="tabs">
<ul class="tabs_nav-center">
<li class="button active">New Arrivals</li>
<li class="button">Best Sellers</li>
<li class="button">On Offer</li>
</ul>
<div class="tabs_content object">
...
</div>
</div>
Round Pills
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit risus eget dignissim varius. Vivamus tellus sem, egestas at hendrerit ultrices, pulvinar nec ipsum.
Aenean finibus blandit ex ut pretium. Etiam efficitur sapien nec mauris efficitur ultrices. In eget volutpat turpis. Morbi velit ex, malesuada at tellus vel, lacinia feugiat dolor. Nullam ultrices pharetra laoreet. Nunc ut lectus arcu. Nunc sed faucibus sapien, quis facilisis tellus.
Ut egestas, sapien et porta bibendum, erat tortor rutrum libero, non hendrerit odio mi eu ex. Nulla justo sapien, ultricies nec consectetur id, hendrerit cursus lectus.
<div class="tabs">
<ul class="tabs_nav-center">
<li class="button-round-pill active">New Arrivals</li>
<li class="button-round-pill">Best Sellers</li>
<li class="button-round-pill">On Offer</li>
</ul>
...
</div>
Customizing
The tabs can be customized using the following options:
| Property Name | Default Value | Description |
|---|---|---|
navItem-color |
base('text-color') |
The text color of the tabs navigation items. |
navItem-background |
transparent |
The background of the tabs navigation items. |
navItem-borderColor |
rgba(black, 0.15) |
The border color of the tabs navigation items. |
navItem-active-color |
color('greyscale', 'grey-3') |
The text color of the active tabs navigation item. |
navItem-hover-color |
color('greyscale', 'grey-4') |
The text color of the hovered tabs navigation item. |
navItem-active-background |
color('brand', 'primary') |
The background color of the active tabs navigation item. |
navItem-active-borderColor |
color('greyscale', 'white') |
The border color of the active tabs navigation item. |
navItem-hover-background |
darken(color('greyscale', 'grey-1'), 5%) |
The background of a hovered navigation item. |
contentBlock-color |
base('text-color') |
The text color of the content block. |
contentBlock-background |
color('greyscale', 'white') |
The background color of the content block. |
contentBlock-borderColor |
color('greyscale', 'grey-2') |
The border color of the content block. |
contentBlock-padding |
1.5em |
The padding of the content block. |
contentBlock-glueHeight |
6px |
The height of the content block glue. |
contentBlock-glueColor |
color('brand', 'primary') |
The color of the content block glue. |
contentBlock-deepPadding |
2.5em |
The padding of the content block when using the deep modifier. |
To change one of the above values, pass your new value(s) to the tabs() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).
@include tabs((
'contentBlock-background' : #9B58B5,
'contentBlock-borderColor' : #9B58B5,
'contentBlock-color' : white
));
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit risus eget dignissim varius. Vivamus tellus sem, egestas at hendrerit ultrices, pulvinar nec ipsum.
Aenean finibus blandit ex ut pretium. Etiam efficitur sapien nec mauris efficitur ultrices. In eget volutpat turpis. Morbi velit ex, malesuada at tellus vel, lacinia feugiat dolor. Nullam ultrices pharetra laoreet. Nunc ut lectus arcu. Nunc sed faucibus sapien, quis facilisis tellus.
Ut egestas, sapien et porta bibendum, erat tortor rutrum libero, non hendrerit odio mi eu ex. Nulla justo sapien, ultricies nec consectetur id, hendrerit cursus lectus.