Grocery Apex
Grocery Bevy
Grocery Eden
English
Arabic
Accordions
Default Accordion
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Always Open Accordion
Omit the data-accordion="open" attribute on each .accordion-collapse 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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
With Spacing
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Flush Accordion
Add .accordion-flush to remove the default
background-color,
borders, and rounded corners.
Placeholder content for this accordion,
which is
intended to demonstrate the
.accordion-flush class.
This is
the
first item's accordion body.
Placeholder content for this accordion,
which is
intended to demonstrate the
.accordion-flush class.
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
.accordion-flush class.
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.
Light Colors:
Primary
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Secondary
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Solid Colors:
Primary
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Secondary
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Warning
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Info
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Success
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Danger
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Colored Borders:
Primary
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Secondary
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Success
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Info
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Warning
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Danger
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Left Aligned Icons
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Without Icon
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Custom Icon Accordion
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Custom Accordion
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's 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's 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's also worth noting that
just
about
any HTML can go within the
.accordion-body, though the
transition
does limit overflow.
Example
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Targets Collapse
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Horizontal Collapse
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.