Accordions

Accordions can be used on their own or within a .fizz-card. If adjusting the font-size of the summary, be sure to add it on the summary element rather than in a child element, as the position of the chevron is set relative to the font size.

Default

Accordion

It's important to keep your Sales Rep information in Provi up to date so that we can send your orders to the right person who can confirm your order and ensure delivery. If you've ordered from a distributor before, the easiest way to identify your sales rep will be to check a past invoice. Your rep's contact information will be included on the invoice.

HTML
<details class="fizz-accordion fizz-stack-32">
<summary class="fizz-heading-4">Accordion</summary>
<div class="fizz-inset-square-16">
<p>It's important to keep your Sales Rep information in Provi up to date so that we can send your orders to the right person who can confirm your order and ensure delivery. If you've ordered from a distributor before, the easiest way to identify your sales rep will be to check a past invoice. Your rep's contact information will be included on the invoice.</p>
</div>
</details>

In Card

Accordion

It's important to keep your Sales Rep information in Provi up to date so that we can send your orders to the right person who can confirm your order and ensure delivery. If you've ordered from a distributor before, the easiest way to identify your sales rep will be to check a past invoice. Your rep's contact information will be included on the invoice.

HTML
<div class="fizz-card fizz-bordered">
<details class="fizz-accordion">
<summary class="fizz-heading-4">Accordion</summary>
<div class="fizz-inset-square-16">
<p>It's important to keep your Sales Rep information in Provi up to date so that we can send your orders to the right person who can confirm your order and ensure delivery. If you've ordered from a distributor before, the easiest way to identify your sales rep will be to check a past invoice. Your rep's contact information will be included on the invoice.</p>
</div>
</details>
</div>

Hide on Open

You can enclose content inside of a container with the class .fizz-hide-on-open inside of the <summary> element to hide it when the accordion is open.

Brittany Banana

Woodfired Kitchen & Cocktails
11/20/2021 at 2:30pm

Email:
brittany@gmail.com
Phone:
312-333-3333
Account:
Woodfired Kitchen & Cocktails
1234 Main St.
Chicago, IL 60647
Account #:
1234567
Order date:
11/20/2021 at 2:30pm
Order status:
Not confirmed
HTML
<div class="fizz-card fizz-bordered">
<details class="fizz-accordion">
<summary>
<span class="fizz-heading-4">Brittany Banana</span>
<p class="fizz-text-subdued fizz-text-small fizz-hide-on-open">
Woodfired Kitchen &amp; Cocktails<br>
11/20/2021 at 2:30pm
</p>
</summary>
<div class="fizz-inset-square-16">
<dl class="fizz-definition-list">
<dt>Email:</dt>
<dd>brittany@gmail.com</dd>
...
</dl>
</div>
</details>
</div>