sunweb

Tabs

component action tabs

Definition


Tabs component solves the design problem of show various related topics in the same page space.
The component could have only one featured item, which is shown a the right of the other ones.

c-tabs

Handlebars

Tab 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam ipsam nobis quam quia sed veniam. Beatae error illo ipsa pariatur repellendus. Aliquam consequuntur molestias non quaerat. Consequuntur, ducimus, nihil.

Tab 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Tab 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Tab 5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Tab 6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Loading...

Javascript

Loading...

Anchorable


c-tabs > c-tabs anchorable

Anchored navigation is aimed to interact with hash data in the url.

c-tabs

Handlebars

Tab 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam ipsam nobis quam quia sed veniam. Beatae error illo ipsa pariatur repellendus. Aliquam consequuntur molestias non quaerat. Consequuntur, ducimus, nihil.

Tab 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Tab 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Tab 5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Tab 6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Loading...

Javascript

Loading...

Variants


c-tabs > c-tabs--secondary

The secondary navigation changes the look and feel of the component, being more discrete.
It ought be used as a secondary navigation so, inside another main tabs component.

Handlebars

Tab 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam ipsam nobis quam quia sed veniam. Beatae error illo ipsa pariatur repellendus. Aliquam consequuntur molestias non quaerat. Consequuntur, ducimus, nihil.

Tab 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ducimus exercitationem fugiat odio praesentium ratione recusandae tempore voluptates. Dolorem doloribus est facere id labore nihil obcaecati quasi sapiente sint totam.

Tab 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Tab 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Tab 5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid aspernatur autem consequatur consequuntur ducimus earum eligendi ex illum maxime nulla odio officia quam quidem, saepe temporibus unde voluptates.

Loading...

Javascript

Loading...