Início Boas práticas Tema Idiomas e RTL App e cabeçalho Layout Tipografia Abas Menu e âncora Dropdown e popover Command e toggles Botão Campos Seleção e valores Combobox e menções Datas e calendário Árvore e cascata Transfer Upload Filtros Tabela Planilha KPI e estatística Badge e tag Listas e detalhes Gráficos Imagem e carrossel Ícones Diagramas Alertas e estados Progresso e passos Diálogo e toast Drawer e notificação Utilitários Overview Work queue Report Report com htmx Form / request Tabela administrativa Página de detalhe Formulário em diálogo Gráfico com dados do servidor Buscar… llms.txt Tema Tema Restaurar Retos (4 / 2)Padrão (8 / 6)Arredondados (16 / 10) ConfortávelCompacta ClaroEscuroAutomático Copiar prompt Copiar snippet Prompt: para as instruções de um agente. Snippet: direto no templates/base.html. v0.11.0 Stacks children vertically (default) or horizontally with a gap from the spacing scale. Stack, grid e clustergap usa a escala 0–8 (4px a 64px). ab-grid cols quebra sozinho em telas estreitas. 123 tagoutra tagmais uma EsquerdaDireita <ab-stack gap="4"> <ab-grid cols="3" gap="3"> <ab-card padding="sm">1</ab-card><ab-card padding="sm">2</ab-card><ab-card padding="sm">3</ab-card> </ab-grid> <ab-cluster gap="2"><ab-badge>tag</ab-badge><ab-badge>outra tag</ab-badge><ab-badge>mais uma</ab-badge></ab-cluster> <ab-stack direction="horizontal" justify="between"><strong>Esquerda</strong><ab-button size="sm">Direita</ab-button></ab-stack> </ab-stack> Split (lista + detalhe)Coluna lateral fixa; empilha abaixo de 900px da própria largura. Item AItem B <ab-split side-width="16rem"> <ab-card slot="side" heading="Fila"><ab-stack gap="2"><span>Item A</span><span>Item B</span></ab-stack></ab-card> <ab-card heading="Detalhe" description="Item A"><ab-skeleton lines="3"></ab-skeleton></ab-card> </ab-split> Card VerConteúdo ConteúdoAção <ab-grid cols="2"> <ab-card heading="Contas a pagar" description="Próximos 7 dias"><ab-button slot="actions" size="sm" variant="ghost" icon="arrow-up-right">Ver</ab-button>Conteúdo</ab-card> <ab-card heading="Com rodapé">Conteúdo<ab-cluster slot="footer" justify="end"><ab-button size="sm">Ação</ab-button></ab-cluster></ab-card> </ab-grid> Card como linkhref transforma o card inteiro em um link (como o card hoverable do antd): borda de destaque no hover, anel de foco no card e Enter abre. Não coloque outros links ou botões dentro. RelatóriosFechamento mensal <ab-grid cols="3" min="12rem"> <ab-card href="#card-como-link" heading="Contas a pagar" description="12 vencem esta semana"></ab-card> <ab-card href="#card-como-link" heading="Contas a receber" description="3 em atraso"></ab-card> <ab-card href="#card-como-link"><ab-stack gap="2"><ab-cluster gap="2"><ab-icon name="chart-bar"></ab-icon><ab-text strong>Relatórios</ab-text></ab-cluster><ab-text type="secondary">Fechamento mensal</ab-text></ab-stack></ab-card> </ab-grid> APIAtributos, propriedades, métodos, eventos e slots de cada tag. <ab-stack>Stacks children vertically (default) or horizontally with a gap from the spacing scale. <ab-grid>Responsive grid. With cols, at most that many columns that wrap below min width each. <ab-cluster>Inline items that wrap (chips, buttons, filters). <ab-split>Side + main columns (list/detail, filters/results). Stacks below 900px of its own width. <ab-card>Surface container with optional header (heading, description, actions) and footer. With href the whole card is one link (antd hoverable card): accent border on hover, focus ring around the card, Enter opens it. Don't put other links or buttons inside a linked card.