Tabs component

Use the tabs component to present information in a clear and organized manner to the user.

Title

You're free to place any content you'd like here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget leo vel est laoreet sagittis ut scelerisque felis. Curabitur sit amet varius velit, quis tincidunt metus. Praesent nisl ipsum, ornare molestie rutrum a, lacinia id sem. Sed blandit ante eget ante accumsan, vitae efficitur nibh feugiat. Quisque ultricies porta bibendum. Nullam in tortor a metus finibus congue. Vestibulum quis dolor tortor. Integer sit amet justo eget massa ultrices condimentum quis nec diam. Phasellus maximus nunc quis nisi interdum porttitor. Vestibulum pulvinar ante ipsum. Nullam mollis tellus id quam ullamcorper pharetra. Vestibulum bibendum volutpat commodo. Fusce tempus iaculis massa, in pretium nibh consequat nec.

Guidelines

- Use a minimum of two tabs and a maximum of six

- Keep the copy of the tab header concise and effective

When configuring the tabs, you are required to enter an unique id per tab. These id's are linked with the content of the tab. When this id is changed the content of the tab will disappear.

With icons

There is an option to add icons for each individual tab. This is done in the configuration dialog.

Title of tab #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of tab #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Extra guidelines

- Do not mix tabs with icons and without icons in a single Tabs-component

Scrolling tabs

Whenever there is not enough space to display all the tabs in a single row then buttons will appear to scroll through the tabs. This is mostly relevant for mobile and tablet devices.

Title of tab #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of tab #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of tab #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of tab #4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of tab #5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Theme: minimal

Without icons

Title of tab #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of tab #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of tab #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

With icons

Title of tab #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of tab #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title of tab #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.