Pular para o conteúdo
Faculdade PhorteDesign System

BlogCard

Em andamento

Cartão de post do blog, em dois desenhos: o padrão (capa, etiqueta, data, título, resumo e autor com foto) e o de destaque (size="lg", capa larga com o título por cima, a etiqueta de destaque e o tempo de leitura). Nos dois, o link é o título, estendido sobre o cartão (E68).

Função
Institucional
Também chamado de
cartão de post, card de blog, artigo
Mora em
app/components/molecules/BlogCard.tsx
Última mudança
2026-10-01
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Tamanhos
  3. Sem Tempo De Leitura
  4. Texto Longo
  5. Esqueleto

Quando usar

Em listas e grades do blog, com os dados de um `BlogPost`; o destaque, para o post principal da página.

Faça

  • Enquanto os dados chegam, mostre o BlogCardEsqueleto (E157) — um por cartão esperado, dentro de um EsqueletoGrupo rotulo="Carregando publicações" —, e troque o grupo inteiro pelos cartões quando chegarem.
  • Passe formatDate para a data ficar legível ("12 de outubro"): sem ele, sai como veio.
  • Use size="lg" em um post só por página — o título dele é h2 —, e troque a etiqueta com destaque ("Mais lido").
  • Troque o href quando o site clonado tiver outras rotas (padrão /blog/<id>).
  • Dê readTime quando souber: aparece no destaque.
  • Passe href={null} quando a publicação não tiver página: o cartão só informa, sem link (E77) — é o que o Blog faz.

Evite

  • Dois destaques na mesma página.
  • Pôr outro link dentro do cartão: a área do link do título o cobre.

Quando não usar. Para a vitrine fixa da página inicial, o Blog já existe (sem dados). Para eventos, o EventCard; para cursos, o CourseCard.

Nota de uso

A variante grande usava <h1> dentro de um cartão, o que quebra a hierarquia de qualquer página que mostre mais de um. Hoje o nível é o do cartão.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Capa — Imagem decorativa (`alt=""`); não é mais link (E68).
  2. Etiqueta e data — A primeira tag do post (Tag `outline`, ou "Artigo") e a data num `<time>`.
  3. Título — No padrão, `h3`; no destaque, `h2` sobre a capa. Os dois com o `CardLink`.
  4. Resumo — Até três linhas; no destaque, só a partir de 768px. Fora do nome do link.
  5. Autor — No padrão: o PessoaResumo (E72) — Avatar pequeno, o nome e "Autoria".

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
CarregandoO BlogCardEsqueleto (E157): a mesma superfície e proporção, com as linhas e a imagem em esqueleto, decorativo (aria-hidden); o grupo diz "Carregando publicações" uma vez. Medido na ficha: a mesma largura e menos de 20% de diferença de altura.
Padrãomd: coluna com capa 16:10. O sm saiu na E68 — era igual ao md.
Destaquelg: capa 4:3 (21:9 a partir de 768px) com degradê escuro, a etiqueta (destaque, padrão "Em destaque") e o título grande em branco.
HoverA capa aproxima (com movimento liberado); no padrão, o título fica vermelho.
FocoO anel de foco no cartão inteiro, só no teclado — nos dois tamanhos.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Clique em qualquer lugar do cartãoLeva ao href (padrão /blog/<id>).
Post sem tagsA etiqueta diz "Artigo".

Relacionados