Card

Cards são componentes utilizados como containers de propósito geral. À partir das suas props e slots header, body, footer, image, icon e extra é possível criar variações e cards mais específicos, como o DashboardCard.

---

Quando usar

• Para agrupar elementos relacionados entre si.
• Para dar proeminência visual a elementos relacionados entre si.

Quando não usar

• De modo aninhado, com cards dentro de cards.
• Quando o conteúdo encapsulado pelo card ocupar mais da metade da página.

Observações

• As props title content e imageSrc nos permitem montar um layout simples de Card utilizando apenas props.
• O slot image tem precedência maior que o slot icon. Caso os dois sejam utilizados o slot image será exibido e o slot icon será ocultado.
• Para layouts horizontais de Card, utilize a prop horizontal.

---

Uso

<CdsCard
	imageWidth="300"
	imageHeight="180"
	imageSrc="https://images.unsplash.com/photo-1677391520535-e03e845dec33"
	@cardClick="logClick"
>
	<template #header>
		<div style="margin-bottom: 12px">
			Card Title
		</div>
	</template>
	<template #extra>
		<CdsBadge>Action</CdsBadge>
	</template>
	<template #body>
		Some quick example text to build on the card title and make up the bulk of the card's content.
	</template>
	<template #footer>
		<CdsButton size="md" style="margin-top: 16px">
			Action 1
		</CdsButton>
	</template>
</CdsCard>

---

Preview

Action

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Mostrar log

⚡Nenhum evento foi disparado

---

Card simples

As props title content e imageSrc nos permitem montar um layout simples de Card utilizando apenas props.

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Utilizando slots

Utilizando os slots title, body, footer e extra conseguimos criar Cards mais complexos, como o DashboardCard.

Alerta

45 gestantes

Não realizam consulta há mais de 30 dias

VER LISTA

Slot icon

O Card possui um slot chamado icon, que pode ser utilizado para adição de ícones no Card.

⚠️O Slot image tem precedência maior que o slot icon. Caso os dois sejam utiliados o slot image será exibido e o slot icon será ocultado.

32

UBSs com dados atualizados

Prop horizontal

Para layouts horizontais de Card, utilize a prop horizontal

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

---

Props

Nome	Tipo	Default	Opções	Descrição
title	string	''	--	Especifica o título do card. Quando conteúdo é enviado para o slot `Header` o conteúdo dessa prop não é exibido.
content	string	''	--	Especifica texto do Card. Quando conteúdo é enviado para o slot `Body` o conteúdo dessa prop não é exibido.
imageSrc	string	''	--	Caminho da imagem que vai ser renderizada. Quando conteúdo é enviado para o slot `Image` o conteúdo dessa prop não é exibido.
imageAlt	string	'imagem do card'	--	Descrição em texto da imagem.
imageWidth	string|number	300	--	Largura da imagem do card. Tem comportamento sobrescrito quando o card é vertical e a prop `fluid` está ativa.
imageHeight	string|number	180	--	Altura da imagem do card.
bodyWidth	string|number	300	--	Largura do conteúdo do card.
horizontal	boolean	false	--	Torna o alinhamento do Card horizontal.
clickable	boolean	false	--	Ativa ou desativa o clique no componente
fluid	boolean	false	--	Ativa ou desativa o comportamento fluido do Card

Eventos

Nome	Descrição
@cardClick	Evento que indica se o card foi clicado.

Slots

Nome	Descrição
#extra	Slot para incluir conteúdo adicional no canto superior direito do card.
#image	Slot utilizado para incluir imagens no Card.
#icon	Slot utilizado para incluir ícones no Card.
#header	Slot para conteúdo customizado do Header.
#body	Slot para conteúdo customizado do Body.
#footer	Slot para conteúdo customizado do Footer.

---