This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.
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 👇
<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>
<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.
The Accordion component has no props, it returns the wrapping only<ul>
.
Prop | Type | Default | Accepted values |
| boolean |
| - |
| string | - | - |
Prop | Type | Default | Accepted values |
| boolean |
| - |
| string | - | - |
Style is defined into 3 files:
src/assets/scss/core/elements/_accordion.scss
src/assets/scss/settings/elements/_accordion.scss
👆Use this to adjust Sass variables
src/assets/scss/theme/elements/_accordion.scss
👆Use this to add custom CSS
Learn more about the Sass logic behind each template.