Card News
Card de atualização de conteúdo que destaca uma novidade editorial ou clínica, com tags de metadados, data, imagem de capa, tag de especialidade, título, descrição, revisor e botões de ação.
Exemplos
Não lido
O estado padrão do card. Quando isRead está ausente ou é false, o card aparece com borda e fundo na cor secundária (verde), para chamar a atenção do usuário para o conteúdo novo. Os chips e botões são compostos com os componentes Tag e Button que já existem.
Lido
Passe isRead para trocar o card para uma paleta neutra (borda cinza e fundo de superfície), sinalizando que o usuário já viu esse conteúdo.
A SBC publicou uma nova diretriz com mudanças no manejo da IC com fração de ejeção reduzida.
Compact
Use variant="compact" em contextos compactos, como sidebars ou modais, onde o card precisa de padding menor e borda mais arredondada. Sobrescreva o fundo via className quando a cor de superfície precisar combinar com o container (ex.: className="bg-gray-background-soft-muted" dentro de um modal).
Diretriz Brasileira de Insuficiência Cardíaca 2024 (SBC)
A SBC publicou uma nova diretriz com mudanças no manejo da IC com fração de ejeção reduzida.
Horizontal
Use orientation="horizontal" para montar o card em duas colunas: CardNewsBody (todo o conteúdo) à esquerda e CardNewsImage à direita. A imagem estica até a altura do conteúdo e some automaticamente em viewports com menos de 1280px.
Diretriz Brasileira de Insuficiência Cardíaca 2024 (SBC)
A SBC publicou uma nova diretriz com mudanças no manejo da IC com fração de ejeção reduzida.
API
Estrutura
| Componente | Descrição | Uso |
|---|---|---|
| CardNews | Container raiz com borda, cantos arredondados e espaçamento | Envolve todo o conteúdo do card. Use orientation e variant para mudar o layout e a paleta. |
| CardNewsBody | Wrapper da coluna da esquerda que reúne todo o conteúdo nos layouts horizontais | Usado com orientation="horizontal" como coluna da esquerda (flex flex-1 flex-col gap-6, passando a flex-auto a partir de 1280px); coloque CardNewsHeader, CardNewsContent e CardNewsFooter dentro dele, com o CardNewsImage como irmão à direita. |
| CardNewsHeader | Linha do topo que separa as tags e a data | Recebe CardNewsTags à esquerda e CardNewsDate à direita; empilha os dois na vertical abaixo do breakpoint md |
| CardNewsTags | Linha flex com quebra para os chips de metadados | Coloque um ou mais componentes Tag dentro; eles quebram de linha em larguras estreitas |
| CardNewsDate | Texto de data com ícone à esquerda | Renderiza por padrão um ícone Calendar mais a data passada como children |
| CardNewsImage | Imagem de capa com fundo neutro de fallback | Renderiza um img com lazy loading quando src está definido; senão, renderiza os children (ou um FallbackImage, se não houver) |
| CardNewsContent | Wrapper em coluna para a tag de especialidade, o título, a descrição e o autor | Agrupa o corpo principal com espaçamento de 24px (gap-6); o CardNewsTitle aproxima o próximo elemento em 8px |
| CardNewsTitle | Título principal, limitado a 2 linhas | Título principal da atualização |
| CardNewsDescription | Texto do corpo, limitado a 3 linhas | Resumo curto da atualização |
| CardNewsResources | Linha com label e pills de conteúdo da aula | Passe um label e coloque um ou mais CardNewsResourceItem dentro; eles quebram de linha em larguras estreitas |
| CardNewsResourceItem | Pill outlined sem interação que nomeia um item de conteúdo da aula | Renderiza um span com o estilo de um Button outlined (variant="outlined", size="sm"), então é só informativo: não recebe foco e não tem comportamento de clique nem de hover. Passe iconLeft e children como num Button comum; nomes longos terminam com reticências |
| CardNewsAuthor | Bloco do revisor: avatar, função e nome | Passe src, name e jobTitle; sem imagem, exibe as iniciais. Aceita children para sobrescrever tudo. |
| CardNewsFooter | Linha de ações com quebra | Coloque componentes Button dentro; eles quebram de linha em larguras estreitas |
CardNews
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| variant | "default" | "read" | "compact" | "default" | Controla a cor da borda, o fundo e o padding do card. "default" usa a paleta secundária (borda verde e fundo tingido) para destacar conteúdo novo. "read" troca para uma paleta neutra (fundo branco, borda cinza) para sinalizar que o conteúdo já foi visto. "compact" usa fundo branco com padding menor e rounded-xl, para contextos densos como sidebars ou modais. |
| orientation | "vertical" | "horizontal" | "vertical" | "horizontal" monta o card em duas colunas fixas: CardNewsBody à esquerda e CardNewsImage à direita. A imagem usa o dimensionamento horizontal (w-[482px], esticando até a altura do conteúdo) e some abaixo de 1280px (min-[1280px]:block), deixando o conteúdo em largura total. |
| isRead | boolean | false | Atalho para variant="read". Troca o card para uma paleta cinza neutra (fundo branco, borda cinza) para indicar que o conteúdo já foi lido. |
| ...props | React.ComponentProps<"div"> | - | Aceita todas as props nativas de div. |
CardNewsBody
CardNewsBody aceita todas as props nativas de div, além de className. Renderiza um container flex flex-1 flex-col gap-6 (flex-auto a partir de 1280px), sem props extras além de ...ComponentProps<"div">.
CardNewsDate
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| icon | React.ReactNode | <Calendar /> | Ícone renderizado antes da data. |
| children | React.ReactNode | - | Texto da data (ex.: "17 de maio de 2026"). |
| ...props | React.ComponentProps<"div"> | - | Aceita todas as props nativas de div. |
CardNewsImage
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| src | string | - | URL da imagem. Quando omitida (ou se a imagem falhar), renderiza os children ou, sem eles, a ilustração FallbackImage. |
| alt | string | "" | Texto alternativo da imagem. |
| children | React.ReactNode | - | Conteúdo de fallback renderizado quando src não é informado. |
| ...props | React.ComponentProps<"div"> | - | Aceita todas as props nativas de div. |
CardNewsResources
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | string | - | Label secundário renderizado acima da linha de botões (ex.: "Itens da aula em atualização"). Obrigatório. |
| children | React.ReactNode | - | Um ou mais componentes CardNewsResourceItem. |
| ...props | React.ComponentProps<"div"> | - | Aceita todas as props nativas de div. |
CardNewsResourceItem
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| children | React.ReactNode | - | Texto do botão. |
| ...props | ButtonProps | - | Aceita as props visuais de Button (ex.: iconLeft, variant, size). variant="outlined" e size="sm" vêm por padrão e podem ser sobrescritos. O item sempre é renderizado como um span sem interação, então onClick, disabled, loading, type e asChild não têm efeito. |
CardNewsAuthor
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| src | string | - | URL da imagem do avatar. Quando omitida, exibe as iniciais do autor. |
| alt | string | name | Texto alternativo da imagem do avatar. |
| name | string | - | Nome do revisor, exibido em semibold. Também é usado para gerar as iniciais do fallback. |
| jobTitle | string | - | Cargo do revisor, exibido acima do nome. |
| role | string | - | Obsoleta para o cargo. Sem jobTitle, ainda é exibida como cargo, para não quebrar quem já usa. Com jobTitle, vira o papel ARIA da div, como em qualquer elemento. |
| children | React.ReactNode | - | Substitui por completo o layout padrão de avatar + texto. |
| ...props | React.ComponentProps<"div"> | - | Aceita todas as props nativas de div. |