Tabs

Show/hide content or hidden sections

CSS Static tabs

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

<nav class="tabs">
	<ul>
		<li class="tabs-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 _background">Tab 1 content</div>
	</section>
	<section id="tab-2" data-fc-name="Tab 2">
		<div class="box _background">Tab 2 content</div>
	</section>
	<section id="tab-3" data-fc-name="Tab 3">
		<div class="box _background">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 _box">
	<ul>
		<li class="tabs-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 _foreground">
	<ul>
		<li class="tabs-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 _primary">
	<ul>
		<li class="tabs-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 _secondary">
	<ul>
		<li class="tabs-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 the vars-custom map for this object. By default de values are the vars-default values.

$object-tabs-vars-default: (

	/* 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;

$object-tabs-vars-custom: () !global !default;

$object-tabs-vars: map-merge($object-tabs-vars-default, $object-tabs-vars-custom) !global;