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
<div class="accordion-wrapper">
<div class="accordion-panel">
<div class="accordion-title">
<h2>Accordion title</h2>
</div>
<div class="accordion-content">
<p>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.</p>
</div>
</div>
</div>

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
<div class="accordion-panel has-child">
<div class="accordion-title">
<h2>Accordion title</h2>
</div>
<div class="accordion-content">
<div class="accordion-wrapper" id="accordion-example-basic">
<div class="accordion-panel">
<div class="accordion-title">
<h3>Accordion title</h3>
</div>
<div class="accordion-content">
<p>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.</p>
</div>
</div>
</div>
</div>
</div>

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
<div class="accordion-wrapper accordion-caret-left">
...
</div>

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
<div class="accordion-wrapper accordion-large">
...
</div>

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
<div class="accordion-wrapper accordion-large">
<div class="accordion-panel">
<div class="accordion-title">
<i class="sg-icon sg-icon-airplane accordion-icon"></i>
<h2>Send Your First Email</h2>
<p>Choose one of these common ways to send email. You can always change this later.</p>
</div>
<div class="accordion-content accordion-list">
<ul>
<li class="accordion-check-circle is-complete">
<h3>Integrate using our Web API or SMTP relay</h3>
<p>Easily send API-driven email from your application.</p>
<button class="btn btn-secondary">Start</button>
</li>
<li class="accordion-check-circle">
<h3>Integrate with popular applications</h3>
<p>Quickly send email from Wordpress, Drupal, Magento, and other popular applications.</p>
<button class="btn btn-secondary">Start</button>
</li>
</ul>
</div>
</div>
</div>

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
<div class="accordion-wrapper is-editor">
<div class="accordion-panel">
<div class="accordion-title">
<h4>Add Modules</h4>
</div>
<div class="accordion-content">
<div class="card is-module is-centered">
<p><i class="sg-icon sg-icon-images"></i> Image</p>
</div>
...
</div>
</div>
</div>

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
<header class="accordion-header">
<p>Template</p>
<p class="sort sort-desc">Last Edited</p>
</header>
<div class="accordion-wrapper accordion-caret-left is-templates" id="accordion-example-templates">
<div class="accordion-panel is-visible">
<div class="accordion-title">
<h3>Password Reset</h3>
<p class="date">March 25, 2019 1:01 PM PDT</p>
<div class="actions">
<div class="btn btn-dropdown dropdown">
<i class="sg-icon sg-icon-ellipsis-vertical"></i>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-pencil"></i> Edit Name</a></li>
<li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-copy"></i> Duplicate</a></li>
<li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-trash"></i> Delete</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion-content">
<div class="template-details">
<p class="template-id">Template ID: 431537ed-09a1-44db-b7a0-04713722fd9</p>
<button class="btn btn-secondary btn-small">Add Version</button>
</div>
<table class="table-wrap">
<thead>
<tr>
<th>Dynamic Email Version</th>
<th>Editor</th>
<th>Last Edited</th>
<th class="actions">&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td class="template-version">
<a href="#">2019 Update</a>
<span class="badge mantis">Active</span>
</td>
<td class="template-type"><i class="sg-icon sg-icon-code"></i> Code</td>
<td>March 22, 2019 1:01 PM PDT</td>
<td class="actions">
<div class="btn btn-dropdown dropdown">
<i class="sg-icon sg-icon-ellipsis-vertical"></i>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-check-thin"></i> Make Active</a></li>
<li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-pencil"></i> Edit</a></li>
<li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-view"></i> Preview</a></li>
<li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-copy"></i> Duplicate</a></li>
<li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-trash"></i> Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>