Basic Example
Using the tabs object, tab through the list of small content buttons to view different images/content.
<section class="o-section o-section--lg" id="tabbed_features">
<div class="o-wrapper">
<div class="c-tabbed-feature | o-tabs">
<div class="o-grid | u-align-middle">
<div class="o-grid__item | u-col-12 u-col-6-@bp3">
<ul class="o-list-inline o-list-stacked-@bp3 o-focus o-focus--sm | u-space-y">
<li class="o-list__item">
<button class="c-link-bare">
<strong class="u-heading u-delta">Title 1</strong>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error atque id illo dolorum dolorem nisi voluptatibus.</p>
</button>
</li>
<li class="o-list__item">
<button class="c-link-bare">
<strong class="u-heading u-delta">Title 2</strong>
<p>Quos minima alias, laboriosam corporis nostrum pariatur repellat eos iusto expedita!</p>
</button>
</li>
<li class="o-list__item">
<button class="c-link-bare">
<strong class="u-heading u-delta">Title 3</strong>
<p>Molestias asperiores expedita voluptatem nihil odit impedit minima ex cumque quo ut.</p>
</button>
</li>
</ul>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp3">
<div class="o-tabs__content" role="tabpanels">
<div class="o-tab__item | u-flex u-justify-center" id="tab-1">
<div class="u-aspect--3x4 | u-w-70%">
<img class="c-img | o-fit | u-radius" src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" width="" height="" alt>
</div>
</div>
<div class="o-tab__item" id="tab-2" style="display: none;">
</div>
<div class="o-tab__item" id="tab-3" style="display: none; ">
</div>
</div>
</div>
</div>
</div>
</div>
</section>