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.
Variants
Default
Default (Medium) 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
<detailsclass="fizz-accordion fizz-stack-32"> <summaryclass="fizz-heading-4">Default (Medium) Accordion</summary> <divclass="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>
Small
Small 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
<detailsclass="fizz-accordion fizz-accordion--small"> <summaryclass="fizz-heading-4">Small Accordion</summary> <divclass="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>
Large
Large Accordion
$0.00
Label
This is an example of the large variant of the accordion.
HTML
<detailsclass="fizz-accordion fizz-accordion--large"> <summaryclass="fizz-heading-4">Large Accordion</summary> <divclass="fizz-accordion--large-items"> <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>
Bordered
Bordered
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
<detailsclass="fizz-accordion fizz-accordion--bordered"> <summaryclass="fizz-heading-4">Bordered</summary> <divclass="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>
Active Bordered
Active Bordered
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
<detailsclass="fizz-accordion fizz-accordion--active-bordered"> <summaryclass="fizz-heading-4">Active Bordered</summary> <divclass="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>
Product
Mobile Product
This only shows correctly when screen is less than 700px in width.
The Product variation of the accordion has a different markup structure between mobile and desktop variations. The
product card specifically needs to be pulled out of the accordion on mobile. You can use JavaScript in the component
to check if the innerWidth of the window is less than700px. The mobile
variation also
needs some JavaScript added to handle the opening of the accordion when the white space around the product card is
clicked. This can be accomplished by adding a click event listener to the fizz-accordion--product-card
class and checking if it is less than700px, then toggling the open
attribute on the details element.
This only shows correctly when screen is greater than 700px in width.
The Product variation of the accordion has a different markup structure between mobile and desktop variations. The
product card specifically needs to be added to the summary section on desktop. You can use JavaScript in the component
to check if the innerWidth of the window is greater than700px.
Everything inside of the cart accordion is meant to be an example and can be implemented differently. The important
pieces are the classes prefixed with fizz-accordion--cart.
Mobile Cart
This only shows correctly when screen is less than 700px in width.
Emperical Brewing
Dina Ramunto, John Horan , Mark Cash, Pierre Deben
