Accordions
The BAccordionItem uses BCollapse component internally to make it collapsible. To render an accordion that expanded, add the visible property on the BAccordionItem component.
Basic Example
Click the accordions below to expand/collapse the accordion content.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It is also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It is also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It is also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
<template>
<BAccordion>
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It is also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It is also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It is also worth noting
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
does limit overflow.
</BAccordionItem>
</BAccordion>
</template>
Flush
Add flush property to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
Placeholder content for this accordion, which is intended to demonstrate the
flush property. This is the first item's accordion body. Placeholder content for this accordion, which is intended to demonstrate the
flush property. This is the second item's accordion body. Let's imagine this being filled with some actual content. Placeholder content for this accordion, which is intended to demonstrate the
flush property. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
<template>
<BAccordion flush>
<BAccordionItem title="Accordion Item #1">
Placeholder content for this accordion, which is intended to demonstrate the
<code>flush</code> property. This is the first item's accordion body.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
Placeholder content for this accordion, which is intended to demonstrate the
<code>flush</code> property. This is the second item's accordion body. Let's imagine this being
filled with some actual content.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
Placeholder content for this accordion, which is intended to demonstrate the
<code>flush</code> property. This is the third item's accordion body. Nothing more exciting
happening here in terms of content, but just filling up the space to make it look, at least at
first glance, a bit more representative of how this would look in a real-world application.
</BAccordionItem>
</BAccordion>
</template>
Card
Use .accordion-card
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card with the
.accordion-card class. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card with the
.accordion-card class. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card with the
.accordion-card class.
<template>
<BAccordion class="accordion-card">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card with the <code>.accordion-card</code> class.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card with the <code>.accordion-card</code> class.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card with the <code>.accordion-card</code> class.
</BAccordionItem>
</BAccordion>
</template>
Accordion card shadow
Use .accordion-card and .accordion-card-shadow
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card Shadow with the
.accordion-card and .accordion-card-shadow classes. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card Shadow with the
.accordion-card and .accordion-card-shadow classes. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card Shadow with the
.accordion-card and .accordion-card-shadow classes.
<template>
<BAccordion class="accordion-card accordion-card-shadow">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card Shadow with the <code>.accordion-card</code> and
<code>.accordion-card-shadow</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card Shadow with the <code>.accordion-card</code> and
<code>.accordion-card-shadow</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card Shadow with the <code>.accordion-card</code> and
<code>.accordion-card-shadow</code> classes.
</BAccordionItem>
</BAccordion>
</template>
Card bold
Use .accordion-card-bold
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card Bold with the .accordion-card and .accordion-card-bold classes.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card Bold with the .accordion-card and .accordion-card-bold classes.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card Bold with the .accordion-card and .accordion-card-bold classes.
<template>
<BAccordion class="accordion-card accordion-card-bold">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card Bold with the <code>.accordion-card</code> and
<code>.accordion-card-bold</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card Bold with the <code>.accordion-card</code> and
<code>.accordion-card-bold</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card Bold with the <code>.accordion-card</code> and
<code>.accordion-card-bold</code> classes.
</BAccordionItem>
</BAccordion>
</template>
Card bold shadow
Use .accordion-card-bold
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card Bold Shadow with the .accordion-card, .accordion-card-shadow and .accordion-card-bold classes.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card Bold Shadow with the .accordion-card, .accordion-card-shadow and .accordion-card-bold classes.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. You can create Accordion Card Bold Shadow with the .accordion-card, .accordion-card-shadow and .accordion-card-bold classes.
<template>
<BAccordion class="accordion-card accordion-card-shadow accordion-card-bold">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card Bold Shadow with the .accordion-card,
.accordion-card-shadow and .accordion-card-bold classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card Bold Shadow with the .accordion-card,
.accordion-card-shadow and .accordion-card-bold classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. You can
create Accordion Card Bold Shadow with the .accordion-card,
.accordion-card-shadow and .accordion-card-bold classes.
</BAccordionItem>
</BAccordion>
</template>
Soft
Use .accordion-soft
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordionwith the
.accordion-soft class. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordionwith the
.accordion-soft class. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordionwith the
.accordion-soft class.
<template>
<BAccordion class="accordion-soft">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordionwith the <code>.accordion-soft</code> class.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordionwith the <code>.accordion-soft</code> class.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordionwith the <code>.accordion-soft</code> class.
</BAccordionItem>
</BAccordion>
</template>
Soft card
Use .accordion-soft
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordion Card the
.accordion-card and .accordion-soft classes. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordion Card the
.accordion-card and .accordion-soft classes. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordion Card the
.accordion-card and .accordion-soft classes.
<template>
<BAccordion class="accordion-card accordion-soft">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordion Card the <code>.accordion-card</code> and
<code>.accordion-soft</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordion Card the <code>.accordion-card</code> and
<code>.accordion-soft</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordion Card the <code>.accordion-card</code> and
<code>.accordion-soft</code> classes.
</BAccordionItem>
</BAccordion>
</template>
Soft card shadow
Use .accordion-card .accordion-card-shadow .accordion-soft
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordion Card Shadow with the
.accordion-card .accordion-card-shadow and .accordion-soft classes. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordion Card Shadow with the
.accordion-card .accordion-card-shadow and .accordion-soft classes. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordion Card Shadow with the
.accordion-card .accordion-card-shadow and .accordion-soft classes.
<template>
<BAccordion class="accordion-card accordion-card-shadow accordion-soft">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordion Card Shadow with the
<code>.accordion-card .accordion-card-shadow</code> and
<code>.accordion-soft</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordion Card Shadow with the
<code>.accordion-card .accordion-card-shadow</code> and
<code>.accordion-soft</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordion Card Shadow with the
<code>.accordion-card .accordion-card-shadow</code> and
<code>.accordion-soft</code> classes.
</BAccordionItem>
</BAccordion>
</template>
Soft card bold
Use .accordion-soft and accordion-card-bold
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordion Card Bold with the
.accordion-card .accordion-card-bold and .accordion-soft classes. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordion Card Bold with the
.accordion-card .accordion-card-bold and .accordion-soft classes. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Soft Accordion Card Bold with the
.accordion-card .accordion-card-bold and .accordion-soft classes.
<template>
<BAccordion class="accordion-card accordion-card-bold accordion-soft">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordion Card Bold with the
<code>.accordion-card .accordion-card-bold</code> and
<code>.accordion-soft</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordion Card Bold with the
<code>.accordion-card .accordion-card-bold</code> and
<code>.accordion-soft</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Soft Accordion Card Bold with the
<code>.accordion-card .accordion-card-bold</code> and
<code>.accordion-soft</code> classes.
</BAccordionItem>
</BAccordion>
</template>
Soft content
Use .accordion-soft-content
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion with Soft contents by adding a
.accordion-soft-content class. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion with Soft contents by adding a
.accordion-soft-content class. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion with Soft contents by adding a
.accordion-soft-content class.
<template>
<BAccordion class="accordion-soft accordion-soft-content">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion with Soft contents by adding a
<code>.accordion-soft-content</code> class.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion with Soft contents by adding a
<code>.accordion-soft-content</code> class.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion with Soft contents by adding a
<code>.accordion-soft-content</code> class.
</BAccordionItem>
</BAccordion>
</template>
Soft content flush
Use .accordion-soft-content
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion with Soft contents by adding a
.accordion-soft-content class. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion with Soft contents by adding a
.accordion-soft-content class. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion with Soft contents by adding a
.accordion-soft-content class.
<template>
<BAccordion flush class="accordion-soft accordion-soft-content">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion with Soft contents by adding a
<code>.accordion-soft-content</code> class.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion with Soft contents by adding a
<code>.accordion-soft-content</code> class.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion with Soft contents by adding a
<code>.accordion-soft-content</code> class.
</BAccordionItem>
</BAccordion>
</template>
Soft content card
Use .accordion-soft
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion Card with Soft contents by adding
.accordion-card and .accordion-soft-content classes. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion Card with Soft contents by adding
.accordion-card and .accordion-soft-content classes. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion Card with Soft contents by adding
.accordion-card and .accordion-soft-content classes.
<template>
<BAccordion class="accordion-card accordion-soft accordion-soft-content">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion Card with Soft contents by adding
<code>.accordion-card</code> and
<code>.accordion-soft-content</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion Card with Soft contents by adding
<code>.accordion-card</code> and
<code>.accordion-soft-content</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion Card with Soft contents by adding
<code>.accordion-card</code> and
<code>.accordion-soft-content</code> classes.
</BAccordionItem>
</BAccordion>
</template>
Soft content card shadow
Use .accordion-soft
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion Card with Soft contents and card shadow by adding
.accordion-card .accordion-card-shadow and .accordion-soft-content classes. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion Card with Soft contents and card shadow by adding
.accordion-card .accordion-card-shadow and .accordion-soft-content classes. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.You can create Accordion Card with Soft contents and card shadow by adding
.accordion-card .accordion-card-shadow and .accordion-soft-content classes.
<template>
<BAccordion class="accordion-card accordion-card-shadow accordion-soft accordion-soft-content">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion Card with Soft contents and card shadow by adding
<code>.accordion-card .accordion-card-shadow</code> and
<code>.accordion-soft-content</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion Card with Soft contents and card shadow by adding
<code>.accordion-card .accordion-card-shadow</code> and
<code>.accordion-soft-content</code> classes.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
Accordion Card with Soft contents and card shadow by adding
<code>.accordion-card .accordion-card-shadow</code> and
<code>.accordion-soft-content</code> classes.
</BAccordionItem>
</BAccordion>
</template>
Simple
Use .accordion-simple
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
<template>
<BAccordion class="accordion-simple">
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
simple Accordion with <code>.accordion-soft-content</code> class.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
simple Accordion with <code>.accordion-soft-content</code> class.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.You can create
simple Accordion with <code>.accordion-soft-content</code> class.
</BAccordionItem>
</BAccordion>
</template>
Simple flush
Use .accordion-simple with flush prop
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
<template>
<BAccordion flush class="accordion-simple">
<BAccordionItem title="Accordion Item #1" visible>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
</BAccordion>
</template>
Simple Card
Use .accordion-simple and .accordion-card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
<template>
<BAccordion class="accordion-card accordion-simple">
<BAccordionItem title="Accordion Item #1" visible>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
</BAccordion>
</template>
Simple Card Shadow
Use .accordion-simple, .accordion-card and .accordion-card-shadow
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
<template>
<BAccordion class="accordion-card accordion-card-shadow accordion-simple">
<BAccordionItem title="Accordion Item #1" visible>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
</BAccordion>
</template>
Simple card bold
Use .accordion-simple, .accordion-card and .accordion-card-bold
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
<template>
<BAccordion class="accordion-card accordion-card-bold accordion-simple">
<BAccordionItem title="Accordion Item #1" visible>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
</BAccordion>
</template>
Icon
Use .accordion-icon
<template>
<BAccordion class="accordion-icon">
<BAccordionItem visible>
<template #title>
<div class="d-flex align-items-center">
<i class="acon-icon ri-funds-box-line"></i>
<span>Accordion Item #1</span>
</div>
</template>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem>
<template #title>
<div class="d-flex align-items-center">
<i class="acon-icon ri-printer-cloud-line"></i>
<span>Accordion Item #2</span>
</div>
</template>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<template #title>
<div class="d-flex align-items-center">
<i class="acon-icon ri-award-fill"></i> <span>Accordion Item #3</span>
</div>
</template>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
</BAccordion>
</template>
Icon card bold
Use .accordion-card,.accordion-card-bold and .accordion-icon
<template>
<BAccordion class="accordion-card accordion-card-bold accordion-icon">
<BAccordionItem visible>
<template #title>
<div class="d-flex align-items-center">
<i class="acon-icon ri-funds-box-line"></i>
<span>Accordion Item #1</span>
</div>
</template>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem>
<template #title>
<div class="d-flex align-items-center">
<i class="acon-icon ri-printer-cloud-line"></i>
<span>Accordion Item #2</span>
</div>
</template>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<template #title>
<div class="d-flex align-items-center">
<i class="acon-icon ri-award-fill"></i> <span>Accordion Item #3</span>
</div>
</template>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor,
consequatur a est maxime optio quidem doloribus autem! Facilis maiores
ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus
libero optio sint.
</BAccordionItem>
</BAccordion>
</template>
Always open
Add free property to make accordion items stay open when another item is opened.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It is also worth noting that just about any HTML can go within the
default slot, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It is also worth noting that just about any HTML can go within the
default slot, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It is also worth noting that just about any HTML can go within the
default slot, though the transition does limit overflow.
<template>
<BAccordion free>
<BAccordionItem title="Accordion Item #1">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. It is also
worth noting that just about any HTML can go within the
<code>default</code> slot, though the transition does limit overflow.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. It is also
worth noting that just about any HTML can go within the
<code>default</code> slot, though the transition does limit overflow.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we
use to style each element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables. It is also
worth noting that just about any HTML can go within the
<code>default</code> slot, though the transition does limit overflow.
</BAccordionItem>
</BAccordion>
</template>