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-[var(--border)] rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-[var(--card2)] hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">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-[var(--card2)] hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">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-[var(--card2)] hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">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-[var(--card2)] hs-accordion-active:border-0 border-b border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i>
</span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card2)] hs-accordion-active:border-0 border-b border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i>
</span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card2)] hs-accordion-active:border-0 border-b border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i>
</span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-[var(--card2)] hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-[var(--card2)] hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-[var(--card2)] hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-[var(--card2)] hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="plus" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="minus" class="w-4 h-4"></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="c-dim">
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-[var(--border)] rounded-lg mb-2">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-[var(--card2)] hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="circle-plus" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="circle-minus" class="w-4 h-4"></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="c-dim">
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-[var(--border)] rounded-lg">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-[var(--card2)] hs-accordion-active:rounded-t-lg hs-accordion-active:border-b border-0 border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="square-plus" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="square-minus" class="w-4 h-4"></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="c-dim">
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-[var(--border)] rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-[var(--card2)] hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto">
<i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card2)] hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card2)] hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] rounded-lg overflow-hidden">
<div class="hs-accordion active">
<button class="hs-accordion-toggle py-4 px-5 hs-accordion-active:bg-[var(--card2)] hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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="c-dim">
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-[var(--card2)] hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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="c-dim">
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-[var(--card2)] hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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="c-dim">
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-[var(--border)] 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:c-gold hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:c-gold hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:c-gold hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] 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-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] 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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] 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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] 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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] 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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] 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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--border)] 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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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:-white hs-accordion-active:border-0 border border-[var(--border)] inline-flex items-center gap-x-3 w-full font-semibold text-start c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-gold 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-gold 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-gold 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-green 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-green 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-green 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-orange 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-orange 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-orange 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-red 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-red 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-red 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-cyan 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-cyan 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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-[var(--card)] hs-accordion-active:c-cyan 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 c-dim 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 data-lucide="chevron-down" class="w-4 h-4"></i></span>
<span class="hs-accordion-active:block hidden size-4 ms-auto"><i data-lucide="chevron-up" class="w-4 h-4"></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="c-dim">
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>
