Tabs

Explora la eficacia de la navegación con nuestro componente de pestañas. Organiza tu contenido de manera clara y accesible, permitiendo a los usuarios explorar sin esfuerzo. Con una integración perfecta en tu diseño, nuestras pestañas ofrecen una experiencia intuitiva y atractiva para tus visitantes.

Nuestros Tabs

Puedes personalizar los títulos reemplazando la clase "font-n" con cualquier otra que desees, e incluso puedes emplear una clase personalizada de tu elección. Además, el desplazamiento vertical se activa automáticamente cuando el contenido excede la altura límite del contenedor de las pestañas. Asimismo, el ancho del componente de pestañas se ajusta automáticamente al ancho de su contenedor, lo que lo hace completamente adaptable a diferentes tamaños de pantalla, garantizando una experiencia responsiva.

Título 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Título 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Título 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

HTML 
                                    
  <div class="tabs" role="tablist">
    <ul class="tabs-content-buttom" role="presentation">
      <li class="tabs-buttom font-n activo" role="tab" aria-selected="true" aria-controls="tabpanel1">Botón Título 1 <svg class="ico-16 ico-primary-alt".../></svg></li>
      <li class="tabs-buttom font-n" role="tab" aria-selected="false" aria-controls="tabpanel2">Botón Título 2</li>
      <li class="tabs-buttom font-n" role="tab" aria-selected="false" aria-controls="tabpanel3">Botón Título 3</li>
    </ul>
    <div class="subtabs">
      <article class="tabs-block activo" role="tabpanel" aria-labelledby="tab1" id="tabpanel1">
        <h2 tabindex="0">Título #1</h2>
        <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit...Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
      </article>
      <article class="tabs-block" role="tabpanel" aria-labelledby="tab2" id="tabpanel2">
        <h2 tabindex="0">Título #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
      </article>
      <article class="tabs-block" role="tabpanel" aria-labelledby="tab3" id="tabpanel3">
        <h2 tabindex="0">Título #3</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
      </article>
    </div>
  </div>