tabbed-navigation

Darstellung

Code

<div class="th-tabbed-navigation-wrapper spacing-bottom-xl">

<ul class="th-tabbed-navigation" role="tablist">
<li class="th-btn-tabbed current arrow" data-tab="#tab-1" role="tab">Reiter 1</li>
<li class="th-btn-tabbed arrow" data-tab="#tab-2" role="tab"> Reiter 2</li>
<li class="th-btn-tabbed arrow" data-tab="#tab-3" role="tab"> Reiter 3</li>
</ul>

<div id="tab-1" class="th-tab current" role="tabpanel">
<div class="th-two-cols">
<div class="th-tabbed-text">
<h2>Reiter 1</h2>
<p>Content 1</p>								
</div>
<div class="th-tabbed-image-wrap">
<div class="th-tabbed-image" style="background-image: url('/wp-content/themes/base-template-components/src/img/template/tabbed-navigation-image-1920x1280.jpg');">
</div>
</div>	
</div>
</div>

<div id="tab-2" class="th-tab" role="tabpanel">
<div class="th-tabbed-text">
<h2> Reiter 2</h2>
<p> Content 2</p>
</div>
</div>

<div id="tab-3" class="th-tab" role="tabpanel">
<div class="th-two-cols">		
<div class="th-tabbed-text">
<h2> Reiter 3 </h2>
<p> Content 3</p>
</div>
<div class="th-tabbed-image-wrap">
<div class="th-tabbed-image" style="background-image: url('/wp-content/themes/base-template-components/src/img/template/tabbed-navigation-image-1920x1280.jpg');">
</div>
</div>
</div>
</div>

</div>