Tabs Page content displayed in clickable tabs
Tabs can contain any content you wish: text, images, tables, video, nested grids, etc. You can event create a multi-level navigation by nesting tabs within tabs (like on this page).
Tab 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo porta dolor sit amet luctus. Ut tincidunt euismod semper. Vivamus adipiscing mattis metus sit amet consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante nisi, egestas in fringilla id, luctus at tellus. Maecenas enim nisi, elementum id iaculis nec, fringilla id eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Etiam aliquam gravida ornare. Pellentesque sed viverra odio. Duis sodales lorem lectus. Vivamus malesuada dignissim quam quis semper. Phasellus suscipit nisl pretium urna sodales accumsan. Proin nec arcu vel tortor ullamcorper fermentum. Nam ac nisi lacus. Etiam sit amet turpis pulvinar diam dignissim dignissim non sit amet lacus.
Tab 2 content. Curabitur tincidunt magna et nulla molestie non consectetur felis commodo. Vivamus aliquam sapien id nisi sagittis accumsan. Aliquam sit amet mauris nibh, porttitor molestie sapien. Vivamus vitae neque tortor. Vivamus eu laoreet ante. Cras ut sapien diam, ut adipiscing odio. Maecenas hendrerit, diam nec tincidunt hendrerit, lorem orci iaculis erat, vitae fringilla eros mi vitae neque. Mauris id feugiat sem.
Tab 3 content. Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc pulvinar vel bibendum mi mattis. Pellentesque sodales blandit libero, quis feugiat sapien bibendum vitae. Etiam tempus risus in justo euismod ut egestas nibh placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean libero odio, accumsan eu elementum sit amet, dignissim vitae lacus. Pellentesque nibh tortor, laoreet in tempus vitae, sodales sit amet lorem. Vivamus pellentesque tortor a nibh feugiat pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras quis dolor ante. Integer condimentum urna eu urna bibendum vel viverra ipsum sodales. Donec ut justo turpis, et interdum mi. Maecenas aliquet consequat urna, luctus volutpat nunc suscipit pellentesque.
To learn more check the documentation.
Toggles Show and hide content with a click
Toggle content heading
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc pulvinar vel bibendum mi mattis. Pellentesque sodales blandit libero, quis feugiat sapien bibendum vitae. Etiam tempus risus in justo euismod ut egestas nibh placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean libero odio, accumsan eu elementum sit amet, dignissim vitae lacus. Pellentesque nibh tortor, laoreet in tempus vitae, sodales sit amet lorem. Vivamus pellentesque tortor a nibh feugiat pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras quis dolor ante. Integer condimentum urna eu urna bibendum vel viverra ipsum sodales. Donec ut justo turpis, et interdum mi. Maecenas aliquet consequat urna, luctus volutpat nunc suscipit pellentesque.
Toggle content heading
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc pulvinar vel bibendum mi mattis. Pellentesque sodales blandit libero, quis feugiat sapien bibendum vitae. Etiam tempus risus in justo euismod ut egestas nibh placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean libero odio, accumsan eu elementum sit amet, dignissim vitae lacus. Pellentesque nibh tortor, laoreet in tempus vitae, sodales sit amet lorem. Vivamus pellentesque tortor a nibh feugiat pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras quis dolor ante. Integer condimentum urna eu urna bibendum vel viverra ipsum sodales. Donec ut justo turpis, et interdum mi. Maecenas aliquet consequat urna, luctus volutpat nunc suscipit pellentesque.
Toggle content heading
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc pulvinar vel bibendum mi mattis. Pellentesque sodales blandit libero, quis feugiat sapien bibendum vitae. Etiam tempus risus in justo euismod ut egestas nibh placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean libero odio, accumsan eu elementum sit amet, dignissim vitae lacus. Pellentesque nibh tortor, laoreet in tempus vitae, sodales sit amet lorem. Vivamus pellentesque tortor a nibh feugiat pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras quis dolor ante. Integer condimentum urna eu urna bibendum vel viverra ipsum sodales. Donec ut justo turpis, et interdum mi. Maecenas aliquet consequat urna, luctus volutpat nunc suscipit pellentesque.
Toggle content heading
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc pulvinar vel bibendum mi mattis. Pellentesque sodales blandit libero, quis feugiat sapien bibendum vitae. Etiam tempus risus in justo euismod ut egestas nibh placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean libero odio, accumsan eu elementum sit amet, dignissim vitae lacus. Pellentesque nibh tortor, laoreet in tempus vitae, sodales sit amet lorem. Vivamus pellentesque tortor a nibh feugiat pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras quis dolor ante. Integer condimentum urna eu urna bibendum vel viverra ipsum sodales. Donec ut justo turpis, et interdum mi. Maecenas aliquet consequat urna, luctus volutpat nunc suscipit pellentesque.
To learn more check the documentation.
Accordions Collapsible content panels
Accordions are collapsible content panels for presenting information in a limited amount of space. You will find 4 styles of accordion in the Acorn template: basic, lines, bars and box. Additionally, any of the available icons can be used in the accordion item heading. These features combined give you lots of options to create different accordions for your website.
1. Basic accordion
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
2. Accordion style 'lines'
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
3. Accordion style 'box'
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
- Accordion heading
-
Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc.
4. Accordion style 'bars'
To learn more check the documentation.
Tooltips Easily add tooltips to links, buttons and form elements
Examples of tolltips added to buttons
Tolltips added to form fields
To learn more check the documentation.