Card Continue

Card horizontal para exibir conteúdos em andamento numa seção "Continue de onde parou". Mostra uma imagem à esquerda, um breadcrumb e o título à direita, além de um botão para continuar.

Exemplos

Básico

Estado padrão com todos os subcomponentes compostos juntos.

Histologia
Assunto 2

Histologia do sistema cardiovascular

API

Estrutura do CardContinue

Componente	Descrição	Uso
CardContinue	Container raiz transparente e sem borda, com layout flex horizontal e `gap-3`	Envolve a imagem e o conteúdo num layout flex horizontal
CardContinueImage	Área de imagem à esquerda, de 200×122px e limitada a 45% da largura do card em containers estreitos, com cantos arredondados	Passe `src` para uma imagem ou adicione children para conteúdo personalizado. Quando vazio, exibe a ilustração `FallbackImage`.
CardContinueContent	Coluna de conteúdo à direita, com layout space-between e sem padding	Envolve o `CardContinueHeader` no topo e o `CardContinueButton` na base
CardContinueHeader	Grupo vertical para breadcrumb e título, com espaçamento curto	Use para agrupar visualmente o `CardContinueBreadcrumb` e o `CardContinueTitle`
CardContinueBreadcrumb	Trilha compacta em `text-xs`, montada com a `BreadcrumbList` do projeto como lista simples (sem landmark de navegação nem links)	Passe `items` como um array de strings, do nível mais amplo ao mais específico
CardContinueTitle	Título semibold em `text-lg` com cor primary-foreground, limitado a 2 linhas	Título principal do conteúdo
CardContinueButton	Botão de ação emphasis-soft pronto, com o ícone ArrowRightSm	Renderiza um Button `size="sm"`. Sempre passe o texto via `children`.

CardContinue

Propriedade	Tipo	Padrão	Descrição
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardContinueImage

Propriedade	Tipo	Padrão	Descrição
src	string	-	URL da imagem. Quando informada, renderiza um `<img>` cobrindo a área da imagem com `object-cover`.
alt	string	""	Texto alternativo da imagem.
children	React.ReactNode	-	Renderizado quando `src` não é informado. Use para um fallback personalizado; se omitido, exibe a ilustração `FallbackImage`.
...props	React.ComponentProps<"div">	-	Aceita todas as props nativas de div.

CardContinueBreadcrumb

Propriedade	Tipo	Padrão	Descrição
items	string[]	-	Obrigatória. Níveis da trilha, em ordem. Os itens são separados por um chevron e todos são texto comum: a trilha do card é uma lista, não uma navegação, então uma lista de cards não cria vários landmarks nem links indisponíveis para o leitor de tela. Quando a trilha não cabe na largura, ela rola na horizontal.
className	string	-	Classes CSS adicionais aplicadas à lista da trilha (`BreadcrumbList`).

CardContinueButton

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	-	Texto do botão. Obrigatório para definir a chamada para ação no idioma desejado.
...props	ButtonProps	-	Aceita todas as props de Button. O padrão é `variant="emphasis-soft"` e `size="sm"`, com o ícone `ArrowRightSm`.