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.
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.
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.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-1">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-1" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">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.</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-2">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-2" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">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.</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-3">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-3" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">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.</p>
</div>
</div>
</div>
</div>
Flush Accordions
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.
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.
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.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border-b border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-4">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto">
<i class="icon icon-chevron-down"></i>
</span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i class="icon icon-chevron-up"></i>
</span>
</button>
<div id="acc-4" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border-b border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-5">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto">
<i class="icon icon-chevron-down"></i>
</span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i class="icon icon-chevron-up"></i>
</span>
</button>
<div id="acc-5" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border-b border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-6">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto">
<i class="icon icon-chevron-down"></i>
</span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i class="icon icon-chevron-up"></i>
</span>
</button>
<div id="acc-6" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Bordered Accordions
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.
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.
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.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-border-color rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-7">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-7" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-border-color rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-8">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-8" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-border-color rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-9">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-9" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Custom Icon Accordion
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.
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.
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.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-border-color rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-10">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-plus"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-minus"></i></span>
</button>
<div id="acc-10" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-border-color rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-11">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-circle-plus"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-circle-minus"></i></span>
</button>
<div id="acc-11" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-border-color rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-12">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-square-plus"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-square-minus"></i></span>
</button>
<div id="acc-12" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Always Open Accordions
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.
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.
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.
<div class="border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-13" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i class="icon icon-chevron-up"></i>
</span>
</button>
<div id="acc-13" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-14">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-14" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-15">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-15" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Accordion Without Arrow
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.
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.
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.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-16">
Accordion #1
</button>
<div id="acc-16" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-17">
Accordion #2
</button>
<div id="acc-17" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-light hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-18">
Accordion #3
</button>
<div id="acc-18" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Primary - Light Color
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.
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.
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.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary-100 hs-accordion-active:text-primary hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-55">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-55" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary-100 hs-accordion-active:text-primary hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-56">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-56" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary-100 hs-accordion-active:text-primary hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-57">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-57" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Dark - Light Color
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.
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.
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.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-gray-100 hs-accordion-active:text-dark hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-58">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-58" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-gray-100 hs-accordion-active:text-dark hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-59">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-59" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-gray-100 hs-accordion-active:text-dark hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-60">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-60" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Primary - Solid Color
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.
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.
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.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-19">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-19" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-20">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-20" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-primary hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-21">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-21" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Success - Solid Color
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.
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.
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.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-success hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-22">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i>
</span>
</button>
<div id="acc-22" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-success hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-23">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-23" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-success hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-24">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-24" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Warning - Solid Color
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.
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.
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.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-warning hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-25">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-25" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-warning hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-26">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-26" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-warning hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-27">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-27" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Error - Solid Color
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.
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.
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.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-danger hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-28">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-28" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-danger hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-29">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-29" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-danger hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-30">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-30" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Dark - Solid Color
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.
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.
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.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-dark hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-31">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-31" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-dark hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none"aria-expanded="false"aria-controls="acc-32">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-32" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-dark hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-33">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-33" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Info - Solid Color
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.
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.
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.
<div class="hs-accordion-group border border-border-color rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-info hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-34">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-34" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-info hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-35">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-35" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-info hs-accordion-active:text-white hs-accordion-active:border-0 border border-border-color inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-36">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-36" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Primary - Colored Border
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.
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.
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.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-primary rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-primary hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-primary inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-37" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-37" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-primary rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-primary hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-primary inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-38">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-38" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-primary rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-primary hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-primary inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-39">
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-39" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Success - Colored Border
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.
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.
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.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-success rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-success hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-success inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-40">
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-40" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-success rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-success hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-success inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-41">
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-41" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-success rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-success hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-success inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-42" >
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-42" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Warning - Colored Border
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.
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.
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.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-warning rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-warning hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-warning inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-43" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-43" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-warning rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-warning hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-warning inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-44" >
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-44" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-warning rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-warning hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-warning inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-45" >
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-45" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Error - Colored Border
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.
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.
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.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-danger rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-danger hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-danger inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-46" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-46" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-danger rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-danger hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-danger inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-47" >
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-47" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-danger rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-danger hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-danger inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-48" >
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-48" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Dark - Colored Border
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.
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.
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.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-dark rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-dark hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-dark inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-49" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-49" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-dark rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-dark hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-dark inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-50" >
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-50" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-dark rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-dark hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-dark inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-51" >
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-51" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
Info - Colored Border
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.
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.
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.
<div class="hs-accordion-group overflow-hidden">
<div class="hs-accordion active border border-info rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-info hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-info inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="true" aria-controls="acc-52" >
Accordion #1
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-52" class="hs-accordion-content w-full overflow-hidden duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-info rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-info hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-info inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-53" >
Accordion #2
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-53" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
<div class="hs-accordion border border-info rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-white hs-accordion-active:text-info hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-info inline-flex items-center gap-x-3 w-full font-semibold text-start text-foreground disabled:pointer-events-none" aria-expanded="false" aria-controls="acc-54" >
Accordion #3
<span class="hs-accordion-active:hidden block size-4 ms-auto"><i class="icon icon-chevron-down"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i class="icon icon-chevron-up"></i></span>
</button>
<div id="acc-54" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region">
<div class="px-5 py-4">
<p class="text-foreground">
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.
</p>
</div>
</div>
</div>
</div>
'/%3e%3cpath%20d='M19.3718%208.44531C13.2794%208.77342%208.42255%2013.8273%208.42255%2020.0001V34.643C8.42255%2036.336%207.05011%2037.7085%205.35714%2037.7085C3.66416%2037.7085%202.29171%2036.336%202.29171%2034.643V22.0124C5.86298%2012.0352%2013.2293%208.65628%2019.3718%208.44531Z'%20fill='url(%23paint1_linear_1134_24406)'/%3e%3cpath%20d='M24.111%2018.6378L20.8502%2019.8353L19.6368%2023.0902L18.4392%2019.8294L15.1843%2018.616L18.4451%2017.4184L19.6586%2014.1636L20.8561%2017.4243L24.111%2018.6378Z'%20fill='url(%23paint2_linear_1134_24406)'/%3e%3cpath%20d='M26.0749%2014.0398L24.7502%2014.5263L24.2573%2015.8486L23.7708%2014.5239L22.4485%2014.0309L23.7732%2013.5444L24.2661%2012.2221L24.7526%2013.5468L26.0749%2014.0398Z'%20fill='url(%23paint3_linear_1134_24406)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_1134_24406'%20x1='21.5672'%20y1='33.2429'%20x2='17.6287'%20y2='7.94212'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_1134_24406'%20x1='5.99286'%20y1='14.1017'%20x2='11.3239'%20y2='34.0911'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
