AppCard

Moléculas

Superfície de conteúdo composta com AppCardMedia, AppCardBody e AppCardFooter.

Quando usar: agrupar mídia, texto e ações relacionadas (produto, plano, prêmio) numa superfície elevada.

Quando não usar: uma lista simples de texto sem mídia ou ação própria; use Typography direto.

Importar

import { AppCard } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppCard.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppCard.css';

Exemplos

Default

const Default = () => (
  <div style={{ width: 298 }}>
    <AppCard>
      <AppCardMedia>
        <AppThumb alt="Produto" />
      </AppCardMedia>
      <AppCardBody>
        <Typography variant="h5" as="h3" style={{ margin: 0 }}>Nome do produto</Typography>
        <Typography variant="body" style={{ margin: 0, color: 'var(--color-foreground-muted)' }}>
          Descrição curta do produto participante da campanha.
        </Typography>
      </AppCardBody>
      <AppCardFooter>
        <AppButton size="full">Ver mais</AppButton>
      </AppCardFooter>
    </AppCard>
  </div>
);

Planos

const Planos = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(0, 260px))', gap: 24 }}>
    <AppCard>
      <AppCardMedia>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 155, background: 'var(--color-surface-muted)' }}>
          <AppBadge>Básico</AppBadge>
        </div>
      </AppCardMedia>
      <AppCardBody>
        <Typography variant="h4" as="h3" style={{ margin: 0 }}>Básico</Typography>
        <ul style={{ margin: 0, paddingInlineStart: 20, display: 'grid', gap: 8 }}>
          <li>1 participação por mês</li>
          <li>Suporte por e-mail</li>
        </ul>
      </AppCardBody>
      <AppCardFooter>
        <AppButton appearance="outline" size="full">Escolher</AppButton>
      </AppCardFooter>
    </AppCard>
    <AppCard tone="brand">
      <AppCardMedia>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 155 }}>
          <AppBadge tone="primary">Enterprise</AppBadge>
        </div>
      </AppCardMedia>
      <AppCardBody>
        <Typography variant="h4" as="h3" style={{ margin: 0 }}>Enterprise</Typography>
        <ul style={{ margin: 0, paddingInlineStart: 20, display: 'grid', gap: 8 }}>
          <li>Participações ilimitadas</li>
          <li>Suporte prioritário</li>
          <li>Relatórios mensais</li>
        </ul>
      </AppCardBody>
      <AppCardFooter>
        <AppButton tone="white" size="full">Escolher</AppButton>
      </AppCardFooter>
    </AppCard>
    <AppCard>
      <AppCardMedia>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 155, background: 'var(--color-surface-muted)' }}>
          <AppBadge>Intermediário</AppBadge>
        </div>
      </AppCardMedia>
      <AppCardBody>
        <Typography variant="h4" as="h3" style={{ margin: 0 }}>Intermediário</Typography>
        <ul style={{ margin: 0, paddingInlineStart: 20, display: 'grid', gap: 8 }}>
          <li>5 participações por mês</li>
          <li>Suporte por chat</li>
        </ul>
      </AppCardBody>
      <AppCardFooter>
        <AppButton appearance="outline" size="full">Escolher</AppButton>
      </AppCardFooter>
    </AppCard>
  </div>
);

Carregando

const Carregando = () => (
  <div style={{ width: 298 }} aria-busy="true">
    <AppCard>
      <AppCardMedia>
        <AppThumb alt="" />
      </AppCardMedia>
      <AppCardBody>
        <AppSkeleton variant="title" />
        <AppSkeleton variant="text" lines={2} />
      </AppCardBody>
      <AppCardFooter>
        <AppSkeleton variant="rect" height={44} />
      </AppCardFooter>
    </AppCard>
  </div>
);

Interativo

const Interativo = () => (
  <div style={{ width: 298 }}>
    <AppCard interactive>
      <AppCardMedia>
        <AppThumb alt="" />
      </AppCardMedia>
      <AppCardBody>
        <Typography variant="h5" as="h3" style={{ margin: 0 }}>Plano Básico</Typography>
        <a href="#plano-basico">Ver mais</a>
      </AppCardBody>
    </AppCard>
  </div>
);

Grade

const Grade = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 220px), 1fr))', gap: 16, maxWidth: 960 }}>
    {['Produto A', 'Produto B', 'Produto C', 'Produto D'].map((name) => (
      <AppCard key={name}>
        <AppCardMedia>
          <AppThumb alt={name} />
        </AppCardMedia>
        <AppCardBody>
          <Typography variant="h6" as="h3" style={{ margin: 0 }}>{name}</Typography>
        </AppCardBody>
        <AppCardFooter>
          <AppButton size="full" appearance="outline">Ver mais</AppButton>
        </AppCardFooter>
      </AppCard>
    ))}
  </div>
);

Props

Prop	Tipo	Padrão	Descrição
`as`	`"article" \| "div" \| "li"`	`div`	Elemento raiz renderizado. Padrão: `'div'`.
`elevation`	`"raised" \| "flat"`	`raised`	`'flat'` remove a sombra, mantendo só a borda. Padrão: `'raised'`.
`interactive`	`boolean`	`false`	Transforma o primeiro link/botão do card na área clicável do card inteiro (stretched link), com hover elevado e foco visível da marca.
`tone`	`"default" \| "brand"`	`default`	`'brand'` usa o fundo suave da marca. Padrão: `'default'`.