Tabs
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
-
Option 1
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
-
Option 2
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
-
Option 3
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
<ul class="tabs">
<li id="tab" >
<a href="#tab" role="tab">Option 1</a>
<div class="content" role="tabpanel" aria-labelledby="tab">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quos ullam quia tempora provident quaerat excepturi perferendis eos facere. Reiciendis ipsam maxime, tempora modi inventore nobis cum illum beatae quasi.
</div>
</li>
<li id="tab1" >
<a href="#tab1" role="tab">Option 2</a>
<div class="content" role="tabpanel" aria-labelledby="tab1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quos ullam quia tempora provident quaerat excepturi perferendis eos facere. Reiciendis ipsam maxime, tempora modi inventore nobis cum illum beatae quasi.
</div>
</li>
<li id="tab2" >
<a href="#tab2" role="tab">Option 3</a>
<div class="content" role="tabpanel" aria-labelledby="tab2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quos ullam quia tempora provident quaerat excepturi perferendis eos facere. Reiciendis ipsam maxime, tempora modi inventore nobis cum illum beatae quasi.
</div>
</li>
</ul>
Square Tabs
Add class="square" to make square tabs.
-
Option 1
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
-
Option 2
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
-
Option 3
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
Add class="primary" to make tabs with primary color.
-
Option 1
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
-
Option 2
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
-
Option 3
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
Customize
Use those selectors to customize tabs.
-
Option 1
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
-
Option 2
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
-
Option 3
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est beatae aliquid iure facere, dolorem iste delectus vitae autem ullam voluptates alias voluptatem eius suscipit, optio veniam adipisci nisi numquam, doloremque.
.tabs {
background-color: #606060;
--color: #909090;
}
.tabs.square li {
border: none;
}
.tabs li a {
color: #bbb;
}
.tabs li:hover,
.tabs li:target {
background-color: var(--color);
}
.tabs li:hover a,
.tabs li:target a {
color: #fff;
}
Issues
Bug or features request ? Open an Issue