Page type used: Accordion Tab
Can be used in all row options except: Single column - Full width
Mobile: Shrinks but keeps the same look and feel
Logic:
- Multiple tabs can be opened at once
- First tab is open by default but this option can be turned off
- "Unlimited" number or accordion items
Specs:
- Colour themes
- White
- Charcoal
- Light grey (F2)
- Grey (E7)
- CTA options
- 11 button styles
- 2 text styles
- Blue
- White
- CTA's can be opened in a new window
- Accordion items use the rich text editor
All items closed
Optional sub title
Special notes
- The rich text preview doesn't represent the styles very well so in order to see what this truely looks like you'll have to preview it on the page being built
- Section titles are H2's so if you want a heading in here use an H3 followed by an H4 and so on
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet a odio ut ornare. Curabitur vitae leo tincidunt, laoreet nunc nec, lobortis leo. Sed nec tellus et magna iaculis dapibus. Donec viverra urna sit amet nulla mattis lacinia.
Images
Lists
- Item 1
- Item 2
- Item 2.5
- Item 2.75 (don't go more than 3 levels deep)
- Item 2.5
Links: This is a link
This is what the "Bordered Charcoal w/ Charcoal text (Charcoal hover bg)" option for the "Link style" looks like.
Charcoal version
Special notes
- The rich text preview doesn't represent the styles very well so in order to see what this truely looks like you'll have to preview it on the page being built
- Section titles are H2's so if you want a heading in here use an H3 followed by an H4 and so on
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet a odio ut ornare. Curabitur vitae leo tincidunt, laoreet nunc nec, lobortis leo. Sed nec tellus et magna iaculis dapibus. Donec viverra urna sit amet nulla mattis lacinia.
Images
Lists
- Item 1
- Item 2
- Item 2.5
- Item 2.75 (don't go more than 3 levels deep)
- Item 2.5
Links: This is a link
This is what the "Bordered Charcoal w/ Charcoal text (Charcoal hover bg)" option for the "Link style" looks like.
Grey version
Special notes
- The rich text preview doesn't represent the styles very well so in order to see what this truely looks like you'll have to preview it on the page being built
- Section titles are H2's so if you want a heading in here use an H3 followed by an H4 and so on
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet a odio ut ornare. Curabitur vitae leo tincidunt, laoreet nunc nec, lobortis leo. Sed nec tellus et magna iaculis dapibus. Donec viverra urna sit amet nulla mattis lacinia.
Images
Lists
- Item 1
- Item 2
- Item 2.5
- Item 2.75 (don't go more than 3 levels deep)
- Item 2.5
Links: This is a link
This is what the "Bordered Charcoal w/ Charcoal text (Charcoal hover bg)" option for the "Link style" looks like.
White version
This is what the "Bordered White w/ White text (White hover bg)" option for the "Link style" looks like.
Light grey version
This is what the "Bordered White w/ White text (White hover bg)" option for the "Link style" looks like.