CSS: card ​

.instui-card — Um contêiner de superfície que aceita conteúdo arbitrário.

Variant controla como os filhos diretos são estilizados: content (padrão) os deixa sem estilo; container os empilha como seções com borda e preenchimento. O preenchimento escala com a largura da viewport e é o mesmo em ambas as variantes. Size é totalmente responsivo — preenchimento e border-radius aumentam automaticamente em 320px (20rem) e 640px (40rem) via consultas de mídia padrão min-width; nenhuma classe de tamanho é necessária. Combine com @pantoken/components para cabeçalho, botão e outros componentes inline.

Acessibilidade ​

Use <article> como o elemento card quando o card for uma unidade autônoma de conteúdo; use <section> quando agrupado dentro de um marco (landmark) maior. Em -variant-container, prefira elementos <section> como filhos diretos para que cada região com borda carregue significado semântico.

Uso ​

@import "@pantoken/plugin-custom-components/custom-components.css";

css
@import "@pantoken/plugin-custom-components/custom-components.css";

Exemplos ​

Card de conteúdo

html
<article class="instui-card">
  <h2 class="instui-heading -h3">Card title</h2>
  <p>Content here.</p>
  <button class="instui-button">Action</button>
</article>

Card de contêiner

html
<article class="instui-card -variant-container">
  <section>First section</section>
  <section>Second section</section>
</article>

Estrutura ​

text
.instui-card
  ‹content›
flowchart TD n0[".instui-card"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n0 --> n1 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modificadores ​

ModificadorDescrição
.-variant-containerCard de contêiner; os filhos diretos tornam-se seções com borda e preenchimento.
.-variant-contentCard de conteúdo padrão; filhos ficam sem estilo. Padrão quando nenhuma variante é definida.

Condições ​

TipoConsultaDescrição
media(min-width: 20rem)—
media(min-width: 40rem)—

Tokens consumidos ​

TokenTipoValor
--instui-component-card-background-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-card-border-radius-base-lg<length>1rem
--instui-component-card-border-radius-base-md<length>1rem
--instui-component-card-border-radius-base-sm<length>0.75rem
--instui-component-card-border-radius-nested-lg<length>0.75rem
--instui-component-card-border-radius-nested-md<length>0.5rem
--instui-component-card-border-radius-nested-sm<length>0.5rem
--instui-component-card-nested-border-color<color>LightDarklight-dark(#E8EAEC, #2D3D49)
--instui-component-card-padding-base-lg<length>1.5rem
--instui-component-card-padding-base-md<length>1rem
--instui-component-card-padding-base-sm<length>0.75rem
--instui-component-card-padding-nested-lg<length>1rem
--instui-component-card-padding-nested-md<length>0.75rem
--instui-component-card-padding-nested-sm<length>0.5rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-lg<length>1rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-md<length>0.75rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-sm<length>0.5rem
--instui-component-shared-tokens-stroke-width-sm<length>0.0625rem
--instui-elevation-cardnone | <shadow>#—

Compatibilidade com navegadores ​

  • @scope é Baseline 2023 Newly Available; o card degrada para uma folha de estilo plana não escopada em navegadores antigos sem perda de estilo visível.

Relacionados ​

  • heading — Coloque diretamente no card ou dentro de uma seção do contêiner.
  • button — Coloque diretamente no card ou dentro de uma seção do contêiner.
  • img — Coloque diretamente no card como uma região de mídia.
  • badge — Coloque diretamente no card como um indicador de status.

Veja também ​