Moon · Phoenix Framework

Deposit & Withdrawals

<Accordion id="deposits-and-withdrawals-1">
  <:title>Deposit & Withdrawals</:title>
  <:content>
    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.
  </:content>
</Accordion>

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.

<Accordion id="deposits-and-withdrawals-2" open_by_default>
  <:title>Deposit & Withdrawals</:title>
  <:content>
    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.
  </:content>
</Accordion>

Without button

Deposit & Withdrawals

<Accordion id="deposits-and-withdrawals-3" with_button={false}>
  <:title>Deposit & Withdrawals</:title>
  <:content>
    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.
  </:content>
</Accordion>

Disabled

Deposit & Withdrawals

<Accordion id="deposits-and-withdrawals-4" disabled>
  <:title>Deposit & Withdrawals</:title>
  <:content>
    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.
  </:content>
</Accordion>

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.

<Accordion id="basket-items" open_by_default is_content_inside={false}>
  <:title>Basket Items</:title>
  <:content>
    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.
  </:content>
</Accordion>

Header content

Customer support

<Accordion id="customer-support">
  <:title>Customer support</:title>
  <:header_content>
    <ChatChat class="w-6 h-6" />
    <ChatComment class="w-6 h-6" />
    <ChatCommentAdd class="w-6 h-6" />
    <ChatDoubleBubble class="w-6 h-6" />
  </:header_content>
  <:content>
    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.
  </:content>
</Accordion>

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"

<Accordion id="size-4" size="xl">
  <:title>X Large (xl)</:title>
  <:content>
    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.
  </:content>
</Accordion>
<Accordion id="size-3" size="lg">
  <:title>Large (lg)</:title>
  <:content>
    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.
  </:content>
</Accordion>
<Accordion id="size-2">
  <:title>Medium is default (md)</:title>
  <:content>
    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.
  </:content>
</Accordion>
<Accordion id="size-1" size="sm">
  <:title>Small (sm)</:title>
  <:content>
    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.
  </:content>
</Accordion>

Sizes: content outside

X Large (xl)

Large (lg)

Medium default (md)

Small (sm)

<Accordion id="size-out-4" size="xl" is_content_inside={false}>
  <:title>X Large</:title>
  <:content>
    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.
  </:content>
</Accordion>
<Accordion id="size-out-3" size="lg" is_content_inside={false}>
  <:title>Large</:title>
  <:content>
    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.
  </:content>
</Accordion>
<Accordion id="size-out-2" is_content_inside={false}>
  <:title>Medium (Default)</:title>
  <:content>
    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.
  </:content>
</Accordion>
<Accordion id="size-out-1" size="sm" is_content_inside={false}>
  <:title>Small</:title>
  <:content>
    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.
  </:content>
</Accordion>

With background

Test accordion with backgound

Test accordion with backgound: content outside

<Accordion id="deposits-and-withdrawals-9-1" bg_color="bg-beerus">
  <:title>Test accordion with backgound</:title>
  <:content>
    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.
  </:content>
</Accordion>
<Accordion id="deposits-and-withdrawals-9-2" bg_color="bg-beerus">
  <:title>Test accordion with backgound: content outside</:title>
  <:content>
    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.
  </:content>
</Accordion>

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

Components v2

Button

Form

Components v1

Charts

Datepicker

Dialog

Progress

Select

Accordion

Default

Deposit & Withdrawals

Open by default

Deposit & Withdrawals

Without button

Deposit & Withdrawals

Disabled

Deposit & Withdrawals

Content outside

Basket Items

Header content

Customer support

Sizes

X Large (xl)

Large (lg)

Medium default (md)

Small (sm)

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