Tabs

CSS Static tabs

Use this tabs for static tabs with links to new pages.

	                <nav class="tabs">
	<ul>
		<li class="active">
			<a title="tab 1" href="#tab1">Tab 1</a>
		</li>
		<li>
			<a title="tab 2" href="#tab2">Tab 2</a>
		</li>
		<li>
			<a title="tab 3" href="#tab3">Tab 3</a>
		</li>
	</ul>
</nav>
                

CSS JS Dynamic tabs

Use this tabs to show hidden content in the DOM.

Tab 1 content
Tab 2 content
Tab 3 content
	                <div data-fc-modules="tabs">
	<section id="tab-1" data-fc-name="Tab 1">
		<div class="box-text">Tab 1 content</div>
	</section>
	<section id="tab-2" data-fc-name="Tab 2">
		<div class="box-text">Tab 2 content</div>
	</section>
	<section id="tab-3" data-fc-name="Tab 3">
		<div class="box-text">Tab 3 content</div>
	</section>
</div>
                

CSS Active Tab color

By default the active tab is using color to match the .box-background but you can adjust it to match most common boxes

Color box tab

Box content

	                <nav class="tabs tabs-box">
	<ul>
		<li class="active">
			<a title="tab 1" href="#tab1">Tab 1</a>
		</li>
		<li>
			<a title="tab 2" href="#tab2">Tab 2</a>
		</li>
		<li>
			<a title="tab 3" href="#tab3">Tab 3</a>
		</li>
	</ul>
</nav>
<div class="box">
	<p>Box content</p>
</div>
                

Color foreground tab

Box content

	                <nav class="tabs tabs-foreground">
	<ul>
		<li class="active">
			<a title="tab 1" href="#tab1">Tab 1</a>
		</li>
		<li>
			<a title="tab 2" href="#tab2">Tab 2</a>
		</li>
		<li>
			<a title="tab 3" href="#tab3">Tab 3</a>
		</li>
	</ul>
</nav>
<div class="box-foreground">
	<p>Box content</p>
</div>
                

Color primary tab

Box content

	                <nav class="tabs tabs-primary">
	<ul>
		<li class="active">
			<a title="tab 1" href="#tab1">Tab 1</a>
		</li>
		<li>
			<a title="tab 2" href="#tab2">Tab 2</a>
		</li>
		<li>
			<a title="tab 3" href="#tab3">Tab 3</a>
		</li>
	</ul>
</nav>
<div class="box-primary">
	<p>Box content</p>
</div>
                

Color secondary tab

Box content

	                <nav class="tabs tabs-secondary">
	<ul>
		<li class="active">
			<a title="tab 1" href="#tab1">Tab 1</a>
		</li>
		<li>
			<a title="tab 2" href="#tab2">Tab 2</a>
		</li>
		<li>
			<a title="tab 3" href="#tab3">Tab 3</a>
		</li>
	</ul>
</nav>
<div class="box-secondary">
	<p>Box content</p>
</div>
                

Customize the appearance

You can customize the appearance of this object by setting up in your config folder the following map. By default de values are the indicated here.

 $object-tabs-vars-custom: (

// Tabs container
background-color: transparent,
background-color-dark: rgba($color-foreground, .05),
background-style: gradient, // gradient or solid
background-gradient-percent: 80%,
border-radius: $default-border-radius,
font-family: $font-face-default,
font-weight: normal,
font-size: $font-size-default,

// Tab default
background-color-tab: rgba($color-foreground, .05),
color-tab: $color-foreground,
border-color-tab: transparent,
border-width-tab: 1px 1px 0 1px,
border-radius-tab: $default-border-radius $default-border-radius 0 0,

// Tab hover
background-color-hover-tab: rgba($color-link, .1),
color-hover-tab: $color-foreground,
border-color-hover-tab: transparent,

// Tab active
background-color-active-tab: $color-background,
color-active-tab: $color-foreground,
border-color-active-tab: $color-primary rgba($color-foreground, .1) transparent rgba($color-foreground, .1),
border-width-active-tab: 2px 1px 0 1px,
border-width-mobile-active-tab: 2px 0 0 0,
font-weight-active: bold,

) !global !default;