Accordions

Accordions are used to isolate sections of content and allow the user to focus on one particular section at a time. Accordion titles allow for the flexibility to change the position of the caret, and icons or images. Accordions can also contain other components, such as a list or set of steps for the user to follow.

Standard

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula semper eleifend. Morbi tincidunt, magna non hendrerit malesuada, ex est pulvinar nisi, ac luctus lorem quam vel nibh. Integer at tortor luctus dui egestas consequat. Donec ut nibh lorem. Phasellus sed sapien lobortis, egestas lacus nec, vehicula lorem. Donec hendrerit nibh sed velit placerat aliquet. Morbi tristique pretium lorem, nec pretium turpis mattis vel.

Accordion title

Badge

Morbi faucibus placerat massa, vitae vulputate neque finibus ut. Nunc ut finibus ipsum. Duis sed consequat nunc, a molestie urna. Morbi tincidunt in orci ac interdum. Suspendisse gravida lobortis turpis vitae commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce quis ex sit amet leo egestas condimentum eget vitae dui. Donec viverra imperdiet tortor ut pharetra. Pellentesque at ultrices dolor.

Accordion title

Vestibulum et turpis urna. Nunc fermentum tempus mauris. Proin sed tortor eget mi scelerisque cursus a nec neque. Cras sapien turpis, dapibus ac nibh a, euismod ullamcorper orci. Morbi consequat nisl lectus, non vestibulum purus venenatis vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ac est enim. In malesuada lorem non justo pretium, at viverra ex lacinia.

Containers .accordion-wrapper .accordion-panel
Required .accordion-title .accordion-content
Modifiers .accordion-title.has-badge
Optional Elements .badge
States .is-visible

Guidelines

  • Title should be sentence case and ≤ 30 characters.
  • Byline content, when used, should use complete sentences and be ≤ 150 characters.
  • When an accordion is closed, its carat should point right. When open, it should point down.
  • When options like byline and icons are used, all accordions in the group should use the same options.
Don't use options inconsistently.
Don't use excessive text.

Nested

Accordion title

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula semper eleifend. Morbi tincidunt, magna non hendrerit malesuada, ex est pulvinar nisi, ac luctus lorem quam vel nibh. Integer at tortor luctus dui egestas consequat. Donec ut nibh lorem. Phasellus sed sapien lobortis, egestas lacus nec, vehicula lorem. Donec hendrerit nibh sed velit placerat aliquet. Morbi tristique pretium lorem, nec pretium turpis mattis vel.

Accordion title

Morbi faucibus placerat massa, vitae vulputate neque finibus ut. Nunc ut finibus ipsum. Duis sed consequat nunc, a molestie urna. Morbi tincidunt in orci ac interdum. Suspendisse gravida lobortis turpis vitae commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce quis ex sit amet leo egestas condimentum eget vitae dui. Donec viverra imperdiet tortor ut pharetra. Pellentesque at ultrices dolor.

Accordion title

Morbi faucibus placerat massa, vitae vulputate neque finibus ut. Nunc ut finibus ipsum. Duis sed consequat nunc, a molestie urna. Morbi tincidunt in orci ac interdum. Suspendisse gravida lobortis turpis vitae commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce quis ex sit amet leo egestas condimentum eget vitae dui. Donec viverra imperdiet tortor ut pharetra. Pellentesque at ultrices dolor.

Accordion title

Vestibulum et turpis urna. Nunc fermentum tempus mauris. Proin sed tortor eget mi scelerisque cursus a nec neque. Cras sapien turpis, dapibus ac nibh a, euismod ullamcorper orci. Morbi consequat nisl lectus, non vestibulum purus venenatis vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ac est enim. In malesuada lorem non justo pretium, at viverra ex lacinia.

Containers .accordion-wrapper .accordion-panel
Required .accordion-title .accordion-content .has-child
States .is-visible

Caret Left

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula semper eleifend. Morbi tincidunt, magna non hendrerit malesuada, ex est pulvinar nisi, ac luctus lorem quam vel nibh. Integer at tortor luctus dui egestas consequat. Donec ut nibh lorem. Phasellus sed sapien lobortis, egestas lacus nec, vehicula lorem. Donec hendrerit nibh sed velit placerat aliquet. Morbi tristique pretium lorem, nec pretium turpis mattis vel.

Accordion title

Morbi faucibus placerat massa, vitae vulputate neque finibus ut. Nunc ut finibus ipsum. Duis sed consequat nunc, a molestie urna. Morbi tincidunt in orci ac interdum. Suspendisse gravida lobortis turpis vitae commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce quis ex sit amet leo egestas condimentum eget vitae dui. Donec viverra imperdiet tortor ut pharetra. Pellentesque at ultrices dolor.

Accordion title

Vestibulum et turpis urna. Nunc fermentum tempus mauris. Proin sed tortor eget mi scelerisque cursus a nec neque. Cras sapien turpis, dapibus ac nibh a, euismod ullamcorper orci. Morbi consequat nisl lectus, non vestibulum purus venenatis vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ac est enim. In malesuada lorem non justo pretium, at viverra ex lacinia.

Containers .accordion-wrapper
Required .accordion-caret-left

Large

Accordion title with icon and intro text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula semper eleifend. Morbi tincidunt, magna non hendrerit malesuada, ex est pulvinar nisi, ac luctus lorem quam vel nibh. Integer at tortor luctus dui egestas consequat. Donec ut nibh lorem. Phasellus sed sapien lobortis, egestas lacus nec, vehicula lorem. Donec hendrerit nibh sed velit placerat aliquet. Morbi tristique pretium lorem, nec pretium turpis mattis vel.

Teammate

Accordion title with image

Morbi faucibus placerat massa, vitae vulputate neque finibus ut. Nunc ut finibus ipsum. Duis sed consequat nunc, a molestie urna. Morbi tincidunt in orci ac interdum. Suspendisse gravida lobortis turpis vitae commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce quis ex sit amet leo egestas condimentum eget vitae dui. Donec viverra imperdiet tortor ut pharetra. Pellentesque at ultrices dolor.

Accordion with no icon/image

Vestibulum et turpis urna. Nunc fermentum tempus mauris. Proin sed tortor eget mi scelerisque cursus a nec neque. Cras sapien turpis, dapibus ac nibh a, euismod ullamcorper orci. Morbi consequat nisl lectus, non vestibulum purus venenatis vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ac est enim. In malesuada lorem non justo pretium, at viverra ex lacinia.

Containers .accordion-wrapper
Required .accordion-large

Large List

Send Your First Email

Choose one of these common ways to send email. You can always change this later.

  • Integrate using our Web API or SMTP relay

    Easily send API-driven email from your application.

  • Integrate with popular applications

    Quickly send email from Wordpress, Drupal, Magento, and other popular applications.

  • Build and send using Marketing Campaigns

    Build beautiful, engaging email marketing campaigns that deliver powerful results.

Verify Your Account

To guard against spam, we limit all unverified accounts to 100 emails per day. Complete these steps to send your plan’s full allotment.

  • Confirm Your Email Address

    Click the link in the email we sent to your.name@gmail.com.

  • Add Two-Factor Authentication

    Protects your account with a secret code, sent only to your phone.

  • Add a Domain Whitelabel

    Improves deliverability and allows you to use a custom, branded "from:" address.

Containers .accordion-wrapper .accordion-panel
Required .accordion-large .accordion-title .accordion-content .accordion-list
States .is-complete

Editor

Add Modules

Image

Image & Text

Text

Code

Columns

Button

Divider

Spacer

Social

Containers .accordion-wrapper .accordion-panel
Required .is-editor .accordion-title .accordion-content
States .is-visible

Templates

Template

Last Edited

Password Reset

March 25, 2019 1:01 PM PDT

Template ID: 431537ed-09a1-44db-b7a0-04713722fd9

Dynamic Email Version Editor Last Edited  
2019 Update Active Code March 22, 2019 1:01 PM PDT
New Logo Code March 22, 2019 1:01 PM PDT
Containers .accordion-header .accordion-wrapper.is-templates
Required .accordion-title .accordion-content
Optional Elements .template-details