gm-ui-core — Smoke Test

Biblioteca de componentes Blade + Tailwind do Gastando Menos.

Button

Com icone

Card

Card simples

Conteudo do card com tipografia padrao do design system.

Card com footer

Descricao secundaria em tom muted.

Typography

Heading H1 (display)

Heading H3

Paragrafo lead — destaque introdutorio.

Paragrafo default — corpo de texto padrao.

Paragrafo muted — metadados e texto secundario.

Form

Usado para newsletter e alertas.

Alert

Informacao

Conteudo editorial ou dica complementar ao artigo.

Sucesso

Preferencias salvas com sucesso.

Banner

Badge

Primary Secondary Melhor oferta Novo Indisponivel Editorial Patrocinado Small

Link

Default Muted Underline Oferta parceiro Externo

Breadcrumb

Pagination

Table

Comparativo de cartoes (exemplo)
Cartao Anuidade Cashback Nota
Cartao A R$ 0 1% 9,2
Cartao B R$ 49/mes 2% 8,7
Cartao C R$ 25/mes 0,5% 7,5

Modal

Elemento nativo <dialog> com foco preso, Escape e clique no backdrop para fechar.

Confirmar acao

Deseja continuar? Esta acao nao pode ser desfeita.

Termos de uso

Resumo de termos para demonstracao do modal em tamanho grande.

Ao utilizar este site voce concorda com nossa politica de privacidade e regras de conteudo patrocinado.

Accordion / FAQ

Baseado em <details>. Com name, apenas um item aberto por vez (FAQ exclusivo).

FAQ exclusivo

O que e o gm-ui-core?

Plugin de componentes Blade e Tailwind do Gastando Menos.

Preciso rodar npm run build?

Sim, apos alterar CSS ou JS em resources/.

Funciona com o tema Sage?

Sim, com Acorn ativo e namespace gm-ui-core registrado.

Multiplos abertos

Item A
Conteudo A.
Item B
Conteudo B.

Tabs

Compare anuidade, cashback e beneficios dos principais cartoes.

Melhor oferta

Dropdown

Menu contextual com role="menu", setas, Escape e clique fora para fechar.

Tooltip

Dica contextual no hover/foco. role="tooltip" + aria-describedby.

Patrocinado

Toast

Feedback nao intrusivo com aria-live. API JS: window.gmUiCore.toast.show({...})

Variantes (estaticas)

Sucesso

Preferencias salvas com sucesso.

Informacao

Novo artigo disponivel na categoria Financas.

Disparar toast (JS)

Skeleton

Placeholders de carregamento (CSS puro, aria-hidden). Envolva a secao com aria-busy="true" enquanto carrega.

Variantes

Card (loading)

Avatar

Foto de perfil ou iniciais do nome. Integracao WordPress via get_avatar_url().

Avatar de exemplo

Ana Costa

Editora financeira

Icon