Accordion
NB! The component will be deprecated soon.
Please check out our new Accordion component.
Default
Deposit & Withdrawals
Open by default
Deposit & Withdrawals
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Without button
Deposit & Withdrawals
Disabled
Deposit & Withdrawals
Content outside
Basket Items
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Header content
Customer support
Sizes
X Large (xl)
Large (lg)
Medium default (md)
Small (sm)
please note that also for sizes we do use explicit namings also - "xlarge", "large", "medium", "small"
Sizes: content outside
X Large (xl)
Large (lg)
Medium default (md)
Small (sm)
With background
Test accordion with backgound
Test accordion with backgound: content outside
Accordion props
Name | Type | Required | Default | Description |
---|---|---|---|---|
title | slot | Yes | - | Title of accordion |
open_by_default | boolean | No | false | Expanded/collapsed accordion by default |
with_button | boolean | No | true | Show expand/collapse chevron |
disabled | boolean | No | false | Disable expand/collapse accordion |
content | slot | Yes | - | Content to show inside of accordion |
size | sm | md | lg | xl | No | md | Size variant of accordion |
is_content_inside | boolean | No | false | Whether the content is displayed outside of the accordion header |