Accordion
The accordion template allows you to present information condensed and shorten the page scroll. The accordion template is great for FAQ style content where a user may only want to see one block of content at a time, or when you want to allow the user to control what they see.
test intro
Donec id enim erat. Proin malesuada ex id urna blandit, eu dictum turpis consectetur.
- Aenean sollicitudin, tellus non interdum ultricies, ex turpis scelerisque metus, non
- hendrerit arcu nunc in ipsum. Cras pulvinar, eros at posuere placerat, sem tortor iaculis
- felis, sit amet maximus magna justo in diam. Pellentesque sit amet vehicula justo.
Vestibulum lacinia neque quis pretium vehicula. Nulla diam elit, gravida quis ullamcorper ultricies, venenatis accumsan velit. Sed tristique purus quis auctor maximus. Aliquam in condimentum libero.
Aenean convallis purus nunc
In varius neque convallis nec. Suspendisse eu imperdiet tortor, et posuere sem. Suspendisse dapibus tempor enim a consequat. Nulla sit amet nibh eget enim pellentesque mattis et eleifend libero.
Suspendisse in ultricies sapien
Id accumsan velit. In hac habitasse platea dictumst. Duis rutrum, quam at feugiat interdum, nunc libero commodo tortor, vel posuere quam turpis sed elit.
| Table heading | TH | TH |
|---|---|---|
| Id accumsan velit. In hac habitasse platea dictumst. Duis rutrum, quam at feugiat interdum, nunc libero commodo tortor | Id accumsan velit. In hac habitasse platea dictumst. Duis rutrum, quam at feugiat interdum, nunc libero commodo tortor | Id accumsan velit. In hac habitasse platea dictumst. Duis rutrum, quam at feugiat interdum, nunc libero commodo tortor |
Donec id enim erat. Proin malesuada ex id urna blandit, eu dictum turpis consectetur.
- Aenean sollicitudin, tellus non interdum ultricies, ex turpis scelerisque metus, non
- hendrerit arcu nunc in ipsum. Cras pulvinar, eros at posuere placerat, sem tortor iaculis
- felis, sit amet maximus magna justo in diam. Pellentesque sit amet vehicula justo.
Vestibulum lacinia neque quis pretium vehicula. Nulla diam elit, gravida quis ullamcorper ultricies, venenatis accumsan velit. Sed tristique purus quis auctor maximus. Aliquam in condimentum libero.
Aenean convallis purus nunc
In varius neque convallis nec. Suspendisse eu imperdiet tortor, et posuere sem. Suspendisse dapibus tempor enim a consequat. Nulla sit amet nibh eget enim pellentesque mattis et eleifend libero.
Suspendisse in ultricies sapien
Id accumsan velit. In hac habitasse platea dictumst. Duis rutrum, quam at feugiat interdum, nunc libero commodo tortor, vel posuere quam turpis sed elit.
| Table heading | TH | TH |
|---|---|---|
| Id accumsan velit. In hac habitasse platea dictumst. Duis rutrum, quam at feugiat interdum, nunc libero commodo tortor | Id accumsan velit. In hac habitasse platea dictumst. Duis rutrum, quam at feugiat interdum, nunc libero commodo tortor | Id accumsan velit. In hac habitasse platea dictumst. Duis rutrum, quam at feugiat interdum, nunc libero commodo tortor |
Nam ut auctor odio. Praesent ut auctor felis. Quisque fringilla porta felis sed pulvinar. Phasellus in malesuada lectus, sit amet feugiat ex. Nullam viverra lorem nulla, ac convallis nisi facilisis non. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
%globals_asset_contents_raw:Nam ut auctor odio. Praesent ut auctor felis. Quisque fringilla porta felis sed pulvinar. Phasellus in malesuada lectus, sit amet feugiat ex. Nullam viverra lorem nulla, ac convallis nisi facilisis non. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
%In euismod nulla vel vulputate vestibulum. Phasellus cursus lectus ante, sed laoreet neque feugiat a. Phasellus feugiat dui nec quam gravida rhoncus. Maecenas elit turpis, tincidunt quis lacus ut, dapibus facilisis sapien. Cras mi sem, semper ac gravida at, eleifend ac nisi. Nullam id neque ante. Quisque dapibus blandit ultricies. Morbi dapibus orci id vulputate molestie. Pellentesque fermentum scelerisque aliquam. Nulla ut mauris sem. Nulla facilisi.
%globals_asset_contents_raw:In euismod nulla vel vulputate vestibulum. Phasellus cursus lectus ante, sed laoreet neque feugiat a. Phasellus feugiat dui nec quam gravida rhoncus. Maecenas elit turpis, tincidunt quis lacus ut, dapibus facilisis sapien. Cras mi sem, semper ac gravida at, eleifend ac nisi. Nullam id neque ante. Quisque dapibus blandit ultricies. Morbi dapibus orci id vulputate molestie. Pellentesque fermentum scelerisque aliquam. Nulla ut mauris sem. Nulla facilisi.
%Accordion options
The Accordion component can have up to 7 items. The first item can be set to open or closed by default. You can choose to display an expand/collase all button. Heading level can be selected to support correct semantic order.
Heading
Morbi dapibus orci id vulputate molestie. Pellentesque fermentum scelerisque aliquam. Nulla ut mauris sem. Nulla facilisi.
%globals_asset_contents_raw:Morbi dapibus orci id vulputate molestie. Pellentesque fermentum scelerisque aliquam. Nulla ut mauris sem. Nulla facilisi.
%In euismod nulla vel vulputate vestibulum. Phasellus cursus lectus ante, sed laoreet neque feugiat a. Phasellus feugiat dui nec quam gravida rhoncus. Maecenas elit turpis, tincidunt quis lacus ut, dapibus facilisis sapien.
%globals_asset_contents_raw:In euismod nulla vel vulputate vestibulum. Phasellus cursus lectus ante, sed laoreet neque feugiat a. Phasellus feugiat dui nec quam gravida rhoncus. Maecenas elit turpis, tincidunt quis lacus ut, dapibus facilisis sapien.
%Accordion options
The Accordion component can have up to 7 items. The first item can be set to open or closed by default. You can choose to display an expand/collase all button. Heading level can be selected to support correct semantic order.
Heading
Morbi dapibus orci id vulputate molestie. Pellentesque fermentum scelerisque aliquam. Nulla ut mauris sem. Nulla facilisi.
%globals_asset_contents_raw:Morbi dapibus orci id vulputate molestie. Pellentesque fermentum scelerisque aliquam. Nulla ut mauris sem. Nulla facilisi.
%In euismod nulla vel vulputate vestibulum. Phasellus cursus lectus ante, sed laoreet neque feugiat a. Phasellus feugiat dui nec quam gravida rhoncus. Maecenas elit turpis, tincidunt quis lacus ut, dapibus facilisis sapien.
%globals_asset_contents_raw:In euismod nulla vel vulputate vestibulum. Phasellus cursus lectus ante, sed laoreet neque feugiat a. Phasellus feugiat dui nec quam gravida rhoncus. Maecenas elit turpis, tincidunt quis lacus ut, dapibus facilisis sapien.
%Heading typography
These are applied using WYSIWYG classes via design configuration. To get bolded variants use the bold button in the WYSIWYG editor in addition to the class.
Heading-64
Heading-48
Heading-32
Heading-26
Heading-20
Heading-18
Text typography
These are applied using WYSIWYG classes via design configuration. To get bolded variants use the bold button in the WYSIWYG editor in addition to the class.
Text-24
Text-18
Text-16
Text-14
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum at mi non mattis. Quisque ut erat sollicitudin orci sollicitudin efficitur ac id augue. Phasellus condimentum tortor eget nisi pretium tincidunt. Vestibulum ante nunc, ultricies sit amet fringilla nec, commodo eu sapien. Mauris a sapien non augue ornare dictum. Donec eu mauris in ipsum venenatis sodales ac at libero. Duis sed orci imperdiet, rhoncus tortor a, sodales odio. Morbi vulputate id magna non vehicula. Praesent in elementum magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum at mi non mattis. Quisque ut erat sollicitudin orci sollicitudin efficitur ac id augue. Phasellus condimentum tortor eget nisi pretium tincidunt. Vestibulum ante nunc, ultricies sit amet fringilla nec, commodo eu sapien. Mauris a sapien non augue ornare dictum. Donec eu mauris in ipsum venenatis sodales ac at libero. Duis sed orci imperdiet, rhoncus tortor a, sodales odio. Morbi vulputate id magna non vehicula. Praesent in elementum magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum at mi non mattis. Quisque ut erat sollicitudin orci sollicitudin efficitur ac id augue. Phasellus condimentum tortor eget nisi pretium tincidunt. Vestibulum ante nunc, ultricies sit amet fringilla nec, commodo eu sapien. Mauris a sapien non augue ornare dictum. Donec eu mauris in ipsum venenatis sodales ac at libero. Duis sed orci imperdiet, rhoncus tortor a, sodales odio. Morbi vulputate id magna non vehicula. Praesent in elementum magna.
Links
%globals_asset_contents_raw:Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum at mi non mattis. Quisque ut erat sollicitudin orci sollicitudin efficitur ac id augue. Phasellus condimentum tortor eget nisi pretium tincidunt. Vestibulum ante nunc, ultricies sit amet fringilla nec, commodo eu sapien. Mauris a sapien non augue ornare dictum. Donec eu mauris in ipsum venenatis sodales ac at libero. Duis sed orci imperdiet, rhoncus tortor a, sodales odio. Morbi vulputate id magna non vehicula. Praesent in elementum magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum at mi non mattis. Quisque ut erat sollicitudin orci sollicitudin efficitur ac id augue. Phasellus condimentum tortor eget nisi pretium tincidunt. Vestibulum ante nunc, ultricies sit amet fringilla nec, commodo eu sapien. Mauris a sapien non augue ornare dictum. Donec eu mauris in ipsum venenatis sodales ac at libero. Duis sed orci imperdiet, rhoncus tortor a, sodales odio. Morbi vulputate id magna non vehicula. Praesent in elementum magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum at mi non mattis. Quisque ut erat sollicitudin orci sollicitudin efficitur ac id augue. Phasellus condimentum tortor eget nisi pretium tincidunt. Vestibulum ante nunc, ultricies sit amet fringilla nec, commodo eu sapien. Mauris a sapien non augue ornare dictum. Donec eu mauris in ipsum venenatis sodales ac at libero. Duis sed orci imperdiet, rhoncus tortor a, sodales odio. Morbi vulputate id magna non vehicula. Praesent in elementum magna.
Links
%Unordered Lists
Basic List
- List item 1
- List item 2
- List item 3
Deep List
- List item 1
- List item 2
- List item 3
- List item 3.1
- List item 3.2
- List item 3.3
Ordered Lists
Basic List
- List item
- List item
- List item
Deep List
- List item
- List item
- List item
- List item
- List item
- List item
Unordered Lists
Basic List
- List item 1
- List item 2
- List item 3
Deep List
- List item 1
- List item 2
- List item 3
- List item 3.1
- List item 3.2
- List item 3.3
Ordered Lists
Basic List
- List item
- List item
- List item
Deep List
- List item
- List item
- List item
- List item
- List item
- List item
Small Table
| Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Large Table
| Animals | Vehicles | Tools | Years | Quotes | Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Cat | Honda | Hammer | 1980 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Dog | Mazda | Chisel | 2006 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Rat | Audi | Plane | 1996 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Bear | Ford | Wrench | 1788 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Table Options
These are applied using WYSIWYG classes via design configuration.
Striping
| Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Border
| Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Header colour
| Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Small Table
| Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Large Table
| Animals | Vehicles | Tools | Years | Quotes | Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Cat | Honda | Hammer | 1980 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Dog | Mazda | Chisel | 2006 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Rat | Audi | Plane | 1996 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Bear | Ford | Wrench | 1788 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Table Options
These are applied using WYSIWYG classes via design configuration.
Striping
| Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Border
| Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Header colour
| Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Animals | Vehicles | Tools | Years | Quotes |
|---|---|---|---|---|
| Cat | Honda | Hammer | 1980 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Dog | Mazda | Chisel | 2006 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Rat | Audi | Plane | 1996 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Bear | Ford | Wrench | 1788 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Heading typography
These are applied using WYSIWYG classes via design configuration. To get bolded variants use the bold button in the WYSIWYG editor in addition to the class.
Heading-64
Heading-48
Heading-32
Heading-26
Heading-20
Heading-18
Text typography
These are applied using WYSIWYG classes via design configuration. To get bolded variants use the bold button in the WYSIWYG editor in addition to the class.
Text-24
Text-18
Text-16
Text-14
%globals_asset_contents_raw:Heading typography
These are applied using WYSIWYG classes via design configuration. To get bolded variants use the bold button in the WYSIWYG editor in addition to the class.
Heading-64
Heading-48
Heading-32
Heading-26
Heading-20
Heading-18
Text typography
These are applied using WYSIWYG classes via design configuration. To get bolded variants use the bold button in the WYSIWYG editor in addition to the class.
Text-24
Text-18
Text-16
Text-14
%