Cards are the fundamental content blocks of Ambrosio Health. Each variation serves a specific purpose — from presenting features and metrics to profiles and products.
Component
Basic Card
General-purpose card with label, title, description and call-to-action. Base for most informational contexts.
Nutrição Funcional
Protocolo de Longevidade
Um sistema integrado de suplementação baseado em biomarcadores individuais e ciência de ponta em healthspan.
Rules for correct card usage to maintain visual consistency and information hierarchy.
Do — Estrutura
Use padding consistente de 1.75rem–2rem. Mantenha apenas um CTA por card. Use card-label para categorizar o conteúdo antes do título principal.
Don't — Sobrecarga
Não misture mais de 2 tipos de card na mesma linha. Não sobrecarregue o card com múltiplos CTAs. Não use fonte menor que 11px para texto descritivo.
Do — Espaçamento
Mantenha gap de 1.5rem entre cards em grids. Use border-radius de 16px–20px. O hover deve elevar com translateY(-4px) e box-shadow aumentado.
Don't — Cores
Não use bordas coloridas em cards light exceto na variante feature-card. Não aplique gradiente laranja diretamente no background de cards com texto escuro.
Do — Tipografia
Sempre use Plus Jakarta Sans para títulos (font-weight: 700+). Use Inter para descrições. Roboto Mono apenas para labels e métricas de dados.
Don't — Grid
Não coloque mais de 4 cards em uma linha em desktop. Não use alturas fixas que forcem truncamento de texto. Evite aninhar cards dentro de outros cards.