Accordion

...

Browser support

...

Parameters

The CSS component uses the <section> tag with the z-accordion HTML custom attribute.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
z-accordion	string	Custom attribute for the accordion component
accordion-size	string	The size of the accordion

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Accordion.css" />

Code

<section z-accordion accordion-size="l">
  <details>
    <summary>Lorem ipsum dolor sit amet</summary>
  </details>

  <main>
    <p>Body text lorem ipsum dolor sit amet</p>
  </main>
</section>