Use Expandable card quando a interface precisar de revela detalhes sem deslocar o contexto da ação.
Expandable card
Revela detalhes sem deslocar o contexto da ação. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.
Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Morph (stack) • Single
Morph (stack) • Single, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-disclosure" data-disclosure="single" data-morph="true">
<details class="sc-disclosure-item" open="">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="tool"></i>
<span class="sc-disclosure-title">O que é design engineering?</span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p>Onde intuição de design encontra execução em código para enxergar problemas de UI e construir soluções do zero.</p>
</div></div>
</details>
<details class="sc-disclosure-item">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="grid"></i>
<span class="sc-disclosure-title">O que é “craft” de UI?</span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p>Construir bem: dominar a plataforma para não depender de ferramentas específicas.</p>
</div></div>
</details>
<details class="sc-disclosure-item">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="globe"></i>
<span class="sc-disclosure-title">Por que focar na web?</span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p>Trabalhando com a web (e não contra ela) você desbloqueia performance, acessibilidade e durabilidade.</p>
</div></div>
</details>
</div>Classes, JavaScript e API
Inicialize disclosures após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- disclosures
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Pills (bem diferente do accordion)
Pills (bem diferente do accordion), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-disclosure sc-disclosure--pills" data-disclosure="single">
<details class="sc-disclosure-item" open="">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="sparkles"></i>
<span class="sc-disclosure-title">Diferente no visual</span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p>Formato pill + transição suave.</p>
</div></div>
</details>
<details class="sc-disclosure-item">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="palette"></i>
<span class="sc-disclosure-title">Bom para filtros</span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p>Um “mini painel” discreto por item.</p>
</div></div>
</details>
</div>Classes, JavaScript e API
Inicialize disclosures após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- disclosures
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Accent (faixa lateral)
Accent (faixa lateral), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-disclosure sc-disclosure--accent" data-disclosure="multi" data-morph="true">
<details class="sc-disclosure-item" open="">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="zap"></i>
<span class="sc-disclosure-title">Destaque de seção</span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p>A faixa lateral reforça qual item está aberto.</p>
</div></div>
</details>
<details class="sc-disclosure-item">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="info"></i>
<span class="sc-disclosure-title">Modo multi</span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p>Várias abertas ao mesmo tempo.</p>
</div></div>
</details>
</div>Classes, JavaScript e API
Inicialize disclosures após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- disclosures
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Cards (itens separados)
Cards (itens separados), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-disclosure sc-disclosure--cards" data-disclosure="single">
<details class="sc-disclosure-item" open="">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="settings"></i>
<span class="sc-disclosure-title">Configurações</span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p class="doc-muted" style="margin-bottom:10px;">Ações rápidas no painel.</p>
<div style="display:flex; gap:10px; flex-wrap:wrap;">
<button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Salvar</button>
<button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Cancelar</button>
</div>
</div></div>
</details>
<details class="sc-disclosure-item">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="shield-check"></i>
<span class="sc-disclosure-title">Segurança</span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p>Visual de cards (não parece accordion).</p>
</div></div>
</details>
</div>Classes, JavaScript e API
Inicialize disclosures após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- disclosures
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Badges (editorial)
Badges (editorial), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-disclosure sc-disclosure--accent" data-disclosure="single" data-morph="true">
<details class="sc-disclosure-item" open="">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="calendar-check"></i>
<span class="sc-disclosure-title">Release notes <span class="sc-badge" style="margin-left:8px;">NEW</span></span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p>Use badges para status e prioridade.</p>
</div></div>
</details>
<details class="sc-disclosure-item">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="alert-circle"></i>
<span class="sc-disclosure-title">Breaking change <span class="sc-badge sc-badge-warning" style="margin-left:8px;">WARN</span></span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<p>Modelos editoriais ficam melhores em Disclosure que em Accordion.</p>
</div></div>
</details>
</div>Classes, JavaScript e API
Inicialize disclosures após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- disclosures
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Conteúdo rico (form)
Conteúdo rico (form), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-disclosure sc-disclosure--pills" data-disclosure="single">
<details class="sc-disclosure-item" open="">
<summary class="sc-disclosure-summary">
<i class="sc-icon sc-disclosure-icon" data-smart-icon="mail"></i>
<span class="sc-disclosure-title">Inscrição</span>
<i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
</summary>
<div class="sc-disclosure-panel"><div class="sc-disclosure-content">
<div class="sc-field">
<label class="sc-label">Email</label>
<input class="sc-input" placeholder="voce@email.com">
</div>
<button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Enviar</button>
</div></div>
</details>
</div>Classes, JavaScript e API
Inicialize disclosures após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- disclosures
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.