background

Tabbed Content

These modular elements can be readily used and customized across pages and in different blocks.


Explore all of Stack's modular elements
at the Element Index Page ?

Text Tabs

The default tab style for Stack. Set the [data-content-align] to 'left' if you want the tabs to centered, but the tab content to be left aligned.

To set the default active tab, put the class .active on the relevant tabs parent <li> element.

<div class="tabs-container" data-content-align="left">
	<ul class="tabs">
		<li class="active">
			<div class="tab__title">
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title">
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title">
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
	</ul>
</div><!--end of tabs container-->
					
  • Code Quality

    Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.

    Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you've got yourself one powerful value package.

  • Visual Design

    Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.

    Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away ? Customizing your site in the included Variant Page Builder makes experimenting with styles and content arrangements dead simple.

  • Stack Experience

    Medium Rare is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it's no wonder over 20,000 customers enjoy using Medium Rare templates.

Icon & Text Tabs

The icon tab style for Stack achieved by placing an <i> element as the first child inside the .tab__title.

To set the default active tab, put the class .active on the relevant tabs parent <li> element.

<div class="tabs-container" data-content-align="left">
	<ul class="tabs">
		<li class="active">
			<div class="tab__title text-center">
				<i class="icon icon--sm block icon-CLASS"></i>
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title text-center">
				<i class="icon icon--sm block icon-CLASS"></i>
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title text-center">
				<i class="icon icon--sm block icon-CLASS"></i>
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
	</ul>
</div><!--end of tabs container-->
					
  • ?Code Quality

    Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.

    Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you've got yourself one powerful value package.

  • ?Visual Design

    Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.

    Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away ? Customizing your site in the included Variant Page Builder makes experimenting with styles and content arrangements dead simple.

  • ?Stack Experience

    Medium Rare is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it's no wonder over 20,000 customers enjoy using Medium Rare templates.

Icon Tabs

The icon tab style for Stack achieved by placing an <i> element as the first and only child inside the .tab__title.

To set the default active tab, put the class .active on the relevant tabs parent <li> element.

<div class="tabs-container" data-content-align="left">
	<ul class="tabs">
		<li class="active">
			<div class="tab__title text-center">
				<i class="icon icon--sm block icon-CLASS"></i>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title text-center">
				<i class="icon icon--sm block icon-CLASS"></i>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title text-center">
				<i class="icon icon--sm block icon-CLASS"></i>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
	</ul>
</div><!--end of tabs container-->
					
  • ?
    Code Quality

    Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.

    Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you've got yourself one powerful value package.

  • ?
    Visual Design

    Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.

    Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away ? Customizing your site in the included Variant Page Builder makes experimenting with styles and content arrangements dead simple.

  • ?
    Customer Experience

    Medium Rare is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it's no wonder over 20,000 customers enjoy using Medium Rare templates.

Vertical Tabs

Add the class .tabs--vertical to the .tabs-container element to create a side-by-side tab view.

To set the default active tab, put the class .active on the relevant tabs parent <li> element.

<div class="tabs-container tabs--vertical">
	<ul class="tabs">
		<li class="active">
			<div class="tab__title">
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title">
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title">
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
	</ul>
</div><!--end of tabs container-->
					
  • Title 1

    Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.

    Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you've got yourself one powerful value package.

  • Title 2

    Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.

    Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away ? Customizing your site in the included Variant Page Builder makes experimenting with styles and content arrangements dead simple.

  • Title 3

    Medium Rare is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it's no wonder over 20,000 customers enjoy using Medium Rare templates.

Vertical Icon & Text Tabs

The icon tab style for Stack achieved by placing an <i> element as the first child inside the .tab__title.

Add the class .tabs--vertical to the .tabs-container element to create a side-by-side tab view.

<div class="tabs-container tabs--vertical">
	<ul class="tabs">
		<li class="active">
			<div class="tab__title">
				<i class="icon icon--sm block icon-CLASS"></i>
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title">
				<i class="icon icon--sm block icon-CLASS"></i>
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title">
				<i class="icon icon--sm block icon-CLASS"></i>
				<span class="h5">Title</span>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
	</ul>
</div><!--end of tabs container-->
					
  • ?>Title 1

    Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.

    Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you've got yourself one powerful value package.

  • ?Title 2

    Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.

    Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away ? Customizing your site in the included Variant Page Builder makes experimenting with styles and content arrangements dead simple.

  • ?Title 3

    Medium Rare is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it's no wonder over 20,000 customers enjoy using Medium Rare templates.

Vertical Icon Tabs

The icon tab style for Stack achieved by placing an <i> element as the first and only child inside the .tab__title.

Add the class .tabs--vertical to the .tabs-container element to create a side-by-side tab view.

<div class="tabs-container tabs--vertical tabs--icons">
	<ul class="tabs">
		<li class="active">
			<div class="tab__title">
				<i class="icon icon--sm block icon-CLASS"></i>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title">
				<i class="icon icon--sm block icon-CLASS"></i>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
		<li>
			<div class="tab__title">
				<i class="icon icon--sm block icon-CLASS"></i>
			</div>
			<div class="tab__content">
				Content
			</div>
		</li>
	</ul>
</div><!--end of tabs container-->
					
  • Code Quality

    Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.

    Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you've got yourself one powerful value package.

  • Visual Design

    Stack offers a clean and contemporary look to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.

    Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away ? Customizing your site in the included Variant Page Builder makes experimenting with styles and content arrangements dead simple.

  • Cusomter Experience

    Medium Rare is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it's no wonder over 20,000 customers enjoy using Medium Rare templates.

Looking for styled tabs sections?

View Tabs Sections