intro

Card

Concrete container to group related data and content.

O Card é uma molécula baseada em geometria concreta, empregada para segregar e agrupar partes de conteúdo. Não possui semântica forte (<section> vs <div>) por padrão, mas estabelece os limites físicos, de espaçamento e de sombras.

Exemplo Interativo

Concrete Geometry

This card demonstrates the sharp concrete aesthetics combined with honest pool shadows. It serves as an un-opinionated container for static information.

Patterned Card

Cards can also support subtle background patterns (like "geometric") from the COBOGÓ visual identity, ensuring the pattern opacity remains low to not disturb the content.

A Regra do Concreto

De acordo com o DESIGN.md, o Cartão (Card) obedece estritamente às propriedades de “Concreto”:

  1. Ele hospeda dados e informações passivas.
  2. Seu “hover” (elevação e sombra pool-shadow) reflete os limites de elevação aprovados no sistema.
  3. Não aninha outras bordas com grandes raios ou curvas internas, caso contrário, estaria a infligir a estética Modernista do Brasil que define o COBOGÓ.

O componente Card do COBOGÓ também permite carregar padrões de azulejos (“patterns”) como o azulejo de Athos Bulcão (pattern="geometric"), injetados de forma sutil e responsável sem prejudicar o contraste de legibilidade, aplicando uma opacidade de até 8%.

<Card pattern="geometric">
  <h3>Informação Pessoal</h3>
  <p>Estes dados estão protegidos.</p>
</Card>