Use Bento grid quando a interface precisar de composição de destaques com hierarquia de tamanho e dados.
Bento grid
Composição de destaques com hierarquia de tamanho e dados. 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.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Base
Composição de destaques com hierarquia de tamanho e dados.
HTML e exemplo
<article class="sc-grid">Bento grid</article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Usar HTML semântico e foco visível.
- Fornecer rótulo acessível quando não houver texto visível.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
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.
WIDE · stable
#Product
Product, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-1"><span>01</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Product</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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
#Metric
Metric, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-2"><span>02</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Metric</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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
#Workflow
Workflow, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-3"><span>03</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Workflow</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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
#Security
Security, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-4"><span>04</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Security</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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.
WIDE · stable
#Automation
Automation, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-1"><span>05</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Automation</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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
#Integrations
Integrations, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-2"><span>06</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Integrations</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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
#AI
AI, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-3"><span>07</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>AI</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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
#Mobile
Mobile, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-4"><span>08</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Mobile</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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.
WIDE · stable
#Analytics
Analytics, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-1"><span>09</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Analytics</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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
#Collaboration
Collaboration, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-2"><span>01</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Collaboration</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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
#Files
Files, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-3"><span>02</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Files</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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
#Payments
Payments, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-4"><span>03</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Payments</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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.
WIDE · stable
#CRM
CRM, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-1"><span>04</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>CRM</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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
#Support
Support, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-feature sc-showcase-feature-2"><span>05</span><div class="sc-showcase-feature-visual" aria-hidden="true"></div><h3>Support</h3><p>Bloco de benefício para explicar produto, operação e resultado.</p><a href="/docs/components/">Entender recurso →</a></article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
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.