Accordion

Seções colapsáveis com simple-table no conteúdo expandido. Variantes: padrão, com ícone, com badge, com badge e ícone. Clique no header para expandir/colapsar. Dark mode automático via tokens semânticos.

components/accordion.cssAbrir no Figma

Variantes

Clique nos headers para expandir/colapsar. O primeiro item de cada variante começa aberto.

Carregando exemplo...

Propriedades

Classes disponíveis para configurar o accordion.

Propriedade	Tipo	Default	Descrição
`.accordion`	`classe`	—	Container principal.
`.accordion-item`	`classe`	—	Item com border-bottom separador.
`.accordion-header`	`classe`	—	Header clicável (padding 24px 0, gap 20px).
`.accordion-header-content`	`classe`	—	Área flexível com título, ícone e badge.
`.accordion-title`	`classe`	—	Título do item (p3 medium).
`.accordion-icon`	`classe`	—	Ícone à esquerda (18x18, opcional).
`.accordion-chevron`	`classe`	—	Chevron (24x24, rotaciona ao abrir).
`.accordion-body`	`classe`	—	Conteúdo expandido (padding-bottom 32px).
`.is-open`	`classe`	—	Expande o item (mostra body, rotaciona chevron).

Código

Snippets prontos para copiar e usar.

Padrão

html

<div class="accordion">
    <div class="accordion-item is-open">
        <div class="accordion-header">
            <div class="accordion-header-content">
                <span class="accordion-title">Item A</span>
            </div>
            <span class="accordion-chevron">
                <svg viewBox="0 0 12 12" fill="none" stroke="currentColor"
                     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M2.5 4.5L6 8l3.5-3.5"/>
                </svg>
            </span>
        </div>
        <div class="accordion-body">
            <div class="simple-table">
                <div class="simple-table-body">
                    <div class="simple-table-row">
                        <span class="simple-table-label">Rótulo</span>
                        <span class="simple-table-value">Valor</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Com ícone e badge

html

<div class="accordion-header">
    <div class="accordion-header-content">
        <span class="accordion-icon"><!-- SVG 18x18 --></span>
        <span class="accordion-title">Item</span>
        <span class="badge badge--outline badge--sm">Badge</span>
    </div>
    <span class="accordion-chevron"><!-- SVG chevron --></span>
</div>

Tokens utilizados

Variáveis semânticas aplicadas ao componente.

Token	Uso
`--text-base-neutral-default`	Cor do título
`--icon-base-neutral-default`	Cor do ícone e chevron
`--border-base-neutral-default`	Separador entre itens

Accordion ​

Variantes ​

Propriedades ​

Código ​

Padrão ​

Com ícone e badge ​