Accordion

General information
The accordion element is a simple unordered list like the example below. You can add the .is-active class to make one or more accordions expanded by default.
<ul class="accordion list-reset mb-0">
    <li class="is-active">
        <div class="accordion-header text-sm">
            <span>Nisi porta lorem mollis aliquam ut.</span>
            <div class="accordion-icon"></div>
        </div>
        <div class="accordion-content text-xs">
            <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        </div>
    </li>
    <li>
        <div class="accordion-header text-sm">
            <span>Nisi porta lorem mollis aliquam ut.</span>
            <div class="accordion-icon"></div>
        </div>
        <div class="accordion-content text-xs">
            <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        </div>
    </li>
    <li>
        <div class="accordion-header text-sm">
            <span>Nisi porta lorem mollis aliquam ut.</span>
            <div class="accordion-icon"></div>
        </div>
        <div class="accordion-content text-xs">
            <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        </div>
    </li>
</ul>
In the example above we are using a few helper classes (e.g. .list-reset, .mb-0, .text-sm, .text-xs) to reset the default list style, and to adjust bottom spacing and font size.
The same result can be achieved in React and Vue using the code below 👇
React
Vue
React
<Accordion>
  <AccordionItem title="Nisi porta lorem mollis aliquam ut." active>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</AccordionItem>
  <AccordionItem title="Nisi porta lorem mollis aliquam ut.">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</AccordionItem>
  <AccordionItem title="Nisi porta lorem mollis aliquam ut.">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</AccordionItem>
</Accordion>
Vue
<c-accordion>
  <c-accordion-item title="Nisi porta lorem mollis aliquam ut." active>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</c-accordion-item>
  <c-accordion-item title="Nisi porta lorem mollis aliquam ut.">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</c-accordion-item>
  <c-accordion-item title="Nisi porta lorem mollis aliquam ut.">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</c-accordion-item>
</c-accordion>
As you know, an accordion is made of a wrapping component (Accordion in React, c-accordion in Vue) and each accordion has its own component  (AccordionItem in React, c-accordion-item in Vue).
Pass the title prop for the item title, and the active prop if you want to make the accordion expanded by default.
TL;DR
The Accordion component has no props, it returns the wrapping only<ul>.
React props (Accordion Item component)
Prop
Type
Default
Accepted values
active
boolean
false
-
title (required)
string
-
-
Vue props (Accordion Item component)
Prop
Type
Default
Accepted values
active
boolean
false
-
title (required)
string
-
-
Theming
Style is defined into 3 files:
📋 Core file
src/assets/scss/core/elements/_accordion.scss
👆🚫 Don't edit this file!
📋 Settings file
src/assets/scss/settings/elements/_accordion.scss
👆Use this to adjust Sass variables
📋 Theme file
src/assets/scss/theme/elements/_accordion.scss
👆Use this to add custom CSS
Learn more about the Sass logic behind each template. 
Basic elements - Previous
Form example
Next - Basic elements
Carousel
Last updated 4 weeks ago
Prop	Type	Default	Accepted values
`active`	boolean	`false`	-
`title` (required)	string	-	-