Tabs

On this page

# Intro

Tabs can be created by using a tabs classed container with radios, labels, and a content classed element for each tab.

Tab One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec gravida purus. Fusce bibendum sit amet mauris sed gravida. Ut in felis quam. Nunc cursus purus facilisis ante tempus, sit amet accumsan dui gravida. Pellentesque hendrerit a enim nec tempor. Morbi tortor justo, ultricies volutpat condimentum sed, bibendum sed urna. Mauris viverra condimentum nunc, sit amet sagittis leo sagittis at. Donec at vehicula libero. Donec pretium vitae enim sodales tristique. Sed vulputate erat ac vulputate consequat. Vestibulum fermentum diam quis pretium ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Tab Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec gravida purus. Fusce bibendum sit amet mauris sed gravida. Ut in felis quam. Nunc cursus purus facilisis ante tempus, sit amet accumsan dui gravida. Pellentesque hendrerit a enim nec tempor. Morbi tortor justo, ultricies volutpat condimentum sed, bibendum sed urna. Mauris viverra condimentum nunc, sit amet sagittis leo sagittis at. Donec at vehicula libero. Donec pretium vitae enim sodales tristique. Sed vulputate erat ac vulputate consequat. Vestibulum fermentum diam quis pretium ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Tab Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec gravida purus. Fusce bibendum sit amet mauris sed gravida. Ut in felis quam. Nunc cursus purus facilisis ante tempus, sit amet accumsan dui gravida. Pellentesque hendrerit a enim nec tempor. Morbi tortor justo, ultricies volutpat condimentum sed, bibendum sed urna. Mauris viverra condimentum nunc, sit amet sagittis leo sagittis at. Donec at vehicula libero. Donec pretium vitae enim sodales tristique. Sed vulputate erat ac vulputate consequat. Vestibulum fermentum diam quis pretium ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Tab Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec gravida purus. Fusce bibendum sit amet mauris sed gravida. Ut in felis quam. Nunc cursus purus facilisis ante tempus, sit amet accumsan dui gravida. Pellentesque hendrerit a enim nec tempor. Morbi tortor justo, ultricies volutpat condimentum sed, bibendum sed urna. Mauris viverra condimentum nunc, sit amet sagittis leo sagittis at. Donec at vehicula libero. Donec pretium vitae enim sodales tristique. Sed vulputate erat ac vulputate consequat. Vestibulum fermentum diam quis pretium ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="tabs">
	<input name="tabs" type="radio" id="tab-1" checked="checked"/>
	<label for="tab-1" class="label">One</label>
	<div class="content">
		...
	</div>

	<input name="tabs" type="radio" id="tab-2"/>
	<label for="tab-2" class="label">Two</label>
	<div class="content">
		...
	</div>

	<input name="tabs" type="radio" id="tab-3"/>
	<label for="tab-3" class="label">Three</label>
	<div class="content">
		...
	</div>
</div>