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.
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.
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.
Razor
Open in new tabJavascript
Anchorable
Anchored navigation is aimed to interact with hash data in the url.
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.
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.
Razor
Open in new tabJavascript
Variants
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.