.atlas-accordion
Accordion
Collapsible section list. Chevron rotates on open.
Default
<div class="atlas-accordion" style="width:480px;border:1px solid var(--border-default);border-radius:6px;overflow:hidden">
<div class="atlas-accordion-item is-open">
<button class="atlas-accordion-trigger" style="display:flex;justify-content:space-between;align-items:center;width:100%;height:32px;padding:0 12px;background:transparent;border:0;color:var(--text-primary);font-family:inherit;font-size:13px;cursor:pointer">
<span>Environment variables</span>
<span class="atlas-accordion-chev" style="transform:rotate(90deg);transition:transform 120ms">›</span>
</button>
<div class="atlas-accordion-content" style="padding:12px;font-size:13px;color:var(--text-secondary);border-top:1px solid var(--border-subtle)">3 variables configured for production.</div>
</div>
<div class="atlas-accordion-item" style="border-top:1px solid var(--border-subtle)">
<button class="atlas-accordion-trigger" style="display:flex;justify-content:space-between;align-items:center;width:100%;height:32px;padding:0 12px;background:transparent;border:0;color:var(--text-primary);font-family:inherit;font-size:13px;cursor:pointer">
<span>Build settings</span>
<span class="atlas-accordion-chev">›</span>
</button>
</div>
<div class="atlas-accordion-item" style="border-top:1px solid var(--border-subtle)">
<button class="atlas-accordion-trigger" style="display:flex;justify-content:space-between;align-items:center;width:100%;height:32px;padding:0 12px;background:transparent;border:0;color:var(--text-primary);font-family:inherit;font-size:13px;cursor:pointer">
<span>Domains</span>
<span class="atlas-accordion-chev">›</span>
</button>
</div>
</div>