The Accordion component lets users create a collapsible sections of related content on a page.
jsximport { Accordion, AccordionHeader, AccordionDetails, Text, Block } from "landing-page-ui"
Here are the variation list for Accordion components.
Explore the available props for the Accordion component
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | false | Active state of the accordion. |
| deactivate | boolean | false | Deactivate state of the accordion. |
| children | node | - | Child components and content to be placed within it. |
| style | string | - | Any CSS className to style the Accordion. |
| headerStyle | string | - | Any CSS className to style the Accordion Header. |
| detailsStyle | string | - | Any CSS className to style the Accordion Details. |
| activeHeaderStyle | string | - | Any CSS className to style the Accordion Active Header. |
| deactivateHeaderStyle | string | - | Any CSS className to style the Accordion Deactivate Header. |
| variant | number | "1" | Variant of the accordion |
Explore the available props for the AccordionHeader component
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | string | fa-caret-right | Icon name for accordion |
| toggleIcon | string | fa-caret-down | Toggle icon for accordion. |
| iconLibrary | string | font-awesome | Icon library name. font-awesome bootstrap-icons icon-font |
| toggleIconLibrary | string | - | Icon library name. font-awesome bootstrap-icons icon-font |
| iconStyle | string | - | Any CSS className to style the Accordion Header Icon. |
| toggleIconStyle | string | - | Any CSS className to style the Accordion Header Toggle Icon. |
| iconPosition | string | before | Icon position value. before after |
| children | node | - | Child components and content to be placed within it. |
| style | string | - | Any CSS className to style the Accordion Header Label. |
| activeStyle | string | - | Any CSS className to style the Accordion Active Header. |
| deactivateStyle | string | - | Any CSS className to style the Accordion Deactivate Header. |
| variant | number | "1" | Variant of the accordion |
Explore the available props for the AccordionDetails component
| Prop | Type | Default | Description |
|---|---|---|---|
| tagName | string | div | HTML Tag name. |
| children | node | - | Child components and content to be placed within it. |
| style | string | - | Any CSS className to style the Accordion Header Label. |
| variant | number | "1" | Variant of the accordion |