@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
71 lines (70 loc) • 2.2 kB
HTML
<div class="uss-tabs">
<h3 id="uss-tab-[j1myc8]" class="uss-sr-only">Tab component</h3>
<div class="uss-tabs__tablist" role="tablist" aria-labelledby="uss-tab-[j1myc8]">
<button
class="uss-tabs__tab"
id="tab-1"
type="button"
role="tab"
aria-selected="true"
aria-controls="tabpanel-1"
title="Tab #1"
>
<span>Tab #1</span>
</button>
<button
class="uss-tabs__tab"
id="tab-2"
type="button"
role="tab"
aria-selected="false"
aria-controls="tabpanel-2"
title="Tab #2"
tabindex="-1"
>
<span>Tab #2</span>
</button>
<button
class="uss-tabs__tab"
id="tab-3"
type="button"
role="tab"
aria-selected="false"
aria-controls="tabpanel-3"
title="Tab #3"
tabindex="-1"
>
<span>Tab #3</span>
</button>
</div>
<div class="uss-tabs__tabpanel" aria-labelledby="tab-1" role="tabpanel" id="tabpanel-1">
<div>
<h4>Contenido del Tab #1</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt accusantium sequi alias
possimus facere. Ea incidunt illo delectus ratione praesentium veritatis vel magni minus,
labore molestias veniam neque! Tenetur, vero.
</p>
</div>
</div>
<div class="uss-tabs__tabpanel is-hidden" aria-labelledby="tab-2" role="tabpanel" id="tabpanel-2">
<div>
<h4>Contenido del Tab #2</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt accusantium sequi alias
possimus facere. Ea incidunt illo delectus ratione praesentium veritatis vel magni minus,
labore molestias veniam neque! Tenetur, vero.
</p>
</div>
</div>
<div class="uss-tabs__tabpanel is-hidden" aria-labelledby="tab-3" role="tabpanel" id="tabpanel-3">
<div>
<h4>Contenido del Tab #3</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt accusantium sequi alias
possimus facere. Ea incidunt illo delectus ratione praesentium veritatis vel magni minus,
labore molestias veniam neque! Tenetur, vero.
</p>
</div>
</div>
</div>