Card

yarn add @clayui/card

Cards are a specific form of data visualization focused mainly on displaying images.

Property	Type	Required	Description
active	boolean	false	Flag that indicates if `active` class is applied
displayType	'file' \| 'image' \| 'user'	false	Determines the style of the card
selectable	boolean	false	Flag that indicates if the card can be selectable.

Card.AspectRatio

Property	Type	Required	Default	Description
backgroundImageAspectRatio	'contain' \| 'cover' \| 'center'	false		Aspect ratio to be applied on the background image of the card.
containerAspectRatio	'1/1' \| '3/2' \| '4/3' \| '8/5' \| '16/9'	false		Contrains an image for a given Aspect Ratio.

Extends from React.HTMLAttributes<HTMLDivElement>

Extends from React.HTMLAttributes<HTMLDivElement | HTMLSpanElement>

Property	Type	Required	Default	Description
displayType	'text' \| 'title' \| 'subtitle'	true		Type of description that can be applied for a text.
disabled	boolean	false		Flag to indicate if href will be disabled.
href	string	false		Path or URL
tag	'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	false	'p'	Define the name of the container element.
truncate	boolean	false	true	Truncates the text inside a description.

Property	Type	Required	Default	Description
label	string	false		Header's label of Card Group

Extends from React.HTMLAttributes<HTMLDivElement>

Property	Type	Required	Default	Description
actions	React.ComponentProps<typeof ClayDropDownWithItems>['items']	false
checkboxProps	React.HTMLAttributes<HTMLInputElement>	false	{}	Props to add to the checkbox element
disabled	boolean	false		Flag to indicate that all interactions on the card will be disabled.
dropDownTriggerProps	React.HTMLAttributes<HTMLButtonElement>	false	{}	Props to add to the dropdown trigger element
href	string	false		Path or URL to item
onSelectChange	(val: boolean) => void	false		Callback for when item is selected
selected	boolean	false	false	Flag to indicate if card is selected
spritemap	string	false		Path to clay icon spritemap
symbol	string	false	'folder'	Name of icon symbol
title	string	true		Name of the item

Property	Type	Required	Default	Description
actions	React.ComponentProps<typeof ClayDropDownWithItems>['items']	false		List of actions in the dropdown menu
checkboxProps	React.HTMLAttributes<HTMLInputElement>	false	{}	Props to add to the checkbox element
description	React.ReactText	false		Description of the file
disabled	boolean	false		Flag to indicate that all interactions on the card will be disabled.
displayType	'file' \| 'image'	false		Determines the style of the card
dropDownTriggerProps	React.HTMLAttributes<HTMLButtonElement>	false	{}	Props to add to the dropdown trigger element
flushHorizontal	boolean	false		Flag to indicate if `aspect-ratio-item-flush` class should be applied to the image.
flushVertical	boolean	false		Flag to indicate if `aspect-ratio-item-vertical-flush` class should be applied to the image.
href	string	false		Path or URL to file
imgProps	React.ImgHTMLAttributes<HTMLImageElement> \| string	false		Object of props for `<img />` or string path to image
labels	Array< React.ComponentProps<typeof ClayLabel> & {value: React.ReactText} >	false		List of labels that are applied to the file
onSelectChange	(val: boolean) => void	false		Callback for when item is selected
selected	boolean	false	false	Flag to indicate if card is selected
spritemap	string	false		Path to clay icon spritemap
stickerProps	\| (IClayStickerProps & { content?: React.ReactNode; }) \| null	false	{}	Values used in displaying bottom-left icon
symbol	string	false		Name of icon
title	string	true		Name of the file

Property	Type	Required	Default	Description
children	React.ReactNode	false
description	React.ReactText	false		Value displayed that describes the card
href	string	false		Path or url for click through
horizontal	boolean	false	false	Flag to indicate if card should be the `horizontal` variant
horizontalSymbol	string	false	''	Icon to display when card is `horizontal`
onClick	(event: React.MouseEvent \| React.KeyboardEvent) => void	false		Callback for when card is clicked on
onKeyDown	(event: React.KeyboardEvent) => void	false	() => {}	Callback for when a keyboard key pressed on a card
spritemap	string	false		Path to spritemap for icon symbol.
title	string	false		Value displayed for the card's title

Property	Type	Required	Default	Description
actions	React.ComponentProps<typeof ClayDropDownWithItems>['items']	false		List of actions in the dropdown menu
checkboxProps	React.HTMLAttributes<HTMLInputElement>	false	{}	Props to add to the dropdown trigger element
description	string	false		Value of the description of the user
disabled	boolean	false		Flag to indicate that all interactions on the card will be disabled.
dropDownTriggerProps	React.HTMLAttributes<HTMLButtonElement>	false	{}	Props to add to the dropdown trigger element
href	string	false		Path or URL to user
name	string	true		Name of the user
onSelectChange	(val: boolean) => void	false		Callback for when item is selected
selected	boolean	false	false	Flag to indicate if card is selected
spritemap	string	false		Path to clay icon spritemap
userDisplayType	StickerDisplayType	false		Displays the color of the user icon
userImageAlt	string	false	'thumbnail'	Value for alt attribute for user image
userImageSrc	string	false		Path to the user's image
userSymbol	string	false	'user'	Icon name to use for user avatar