Collapsible content panels built with sass_v2 classes. Each body item owns an accordian_title (clickable tab), title, description, and optional CTA.
Seven variants: default bordered, flush, separated, dark, FAQ, accent, and chevron. Two sizes: sm and lg.
The base accordion wraps items in a bordered container with +/− icons.
A data-first web platform that generates pages from Databoard JSON. No frameworks needed.
Every section has Header, Body (data[]), and Footer.
No. Pure vanilla JS and CSS.
<div class="antsand-accordion">
<div class="antsand-accordion-item">
<button class="antsand-accordion-header">
Title <span class="antsand-accordion-icon"></span>
</button>
<div class="antsand-accordion-body">
<div class="antsand-accordion-content">...</div>
</div>
</div>
</div>
body[].accordian_title = tab label
body[].description = panel contentNo outer border — designed for embedding inside cards or sections.
Install Antsand, create a Databoard, deploy your first page in minutes.
Set up menu keys, data mappings, and CSS slots.
<div class="antsand-accordion antsand-accordion-flush">
...
</div>
No outer border, only item dividers.Each item is its own bordered card with gap between.
Control email, push, and SMS preferences.
Manage data sharing and visibility.
Two-factor auth and login history.
<div class="antsand-accordion antsand-accordion-separated">
...
</div>
Gap between items via flexbox.Dark gradient background with light text.
Use Authorization: Bearer token for all requests.
100 requests per minute with backoff.
<div class="antsand-accordion antsand-accordion-dark">
...
</div>Question/answer pattern with Q and A prefixes.
Go to /databoard, click Create, name your board, and start adding sections.
Yes. Sass v2 and utility classes both work.
Open source. Self-host for free.
<div class="antsand-accordion antsand-accordion-faq">
...
</div>
Q prefix on headers, A prefix on content.Active item gets a primary-color left border accent.
Every section has three slots. CSS classes control the variant.
Change the parent class, change the visual.
<div class="antsand-accordion antsand-accordion-accent">
...
</div>
Uses :has() for modern browsers.Compact for sidebars, spacious for landing pages.
Smaller padding and font.
More padding and larger text.
antsand-accordion-sm → compact
antsand-accordion-lg → spacious