Card

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

install	yarn add @clayui/card
version	3.123.1

Stable 3.123.1 View in Lexicon CHANGELOG

Card
Card.AspectRatio
Card.Body
Card.Caption
Card.Description
Card.Group
Card.Row
CardWithHorizontal
CardWithInfo
CardWithNavigation
CardWithUser

Card

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

Card.AspectRatio

Property	Description
`children` `React.ReactNode`	AspectRatio content.
`className` `string`	Defines a CSS class for the element.
`containerAspectRatio` `'1/1' \| '3/2' \| '4/3' \| '8/5' \| '16/9'`	Contrains an image for a given Aspect Ratio.

Card.Body

Extends from React.HTMLAttributes<HTMLDivElement>

Card.Caption

Extends from React.HTMLAttributes<HTMLDivElement | HTMLSpanElement>

Card.Description

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

Card.Group

Property	Description
`label` `string`	Header's label of Card Group

Card.Row

Extends from React.HTMLAttributes<HTMLDivElement>

CardWithHorizontal

Property	Description
`actions` `React.ComponentProps<typeof ClayDropDownWithItems>['items']`
`checkboxProps` `React.HTMLAttributes<HTMLInputElement>`	Props to add to the checkbox element The default value is {}
`disabled` `boolean`	Flag to indicate that all interactions on the card will be disabled.
`dropDownTriggerProps` `Omit< ButtonWithIconProps, 'symbol' \| 'spritemap' \| 'displayType' \| 'className' >`	Props to add to the dropdown trigger element The default value is { 'aria-label': 'More actions', }
`href` `string`	Path or URL to item
`radioProps` `React.HTMLAttributes<HTMLInputElement> & { name: string; value: string; }`	Props to add to the radio element The default value is {name: '', value: ''}
`selected` `boolean`	Flag to indicate if card is selected The default value is false
`spritemap` `string`	Path to clay icon spritemap
`symbol` `string`	Name of icon symbol The default value is 'folder'
`title` `string`	Name of the item
`truncate` `boolean`	Flag to indicate if the card text is truncated The default value is true

CardWithInfo

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

CardWithNavigation

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

CardWithUser

Property	Description
`actions` `React.ComponentProps<typeof ClayDropDownWithItems>['items']`	List of actions in the dropdown menu
`checkboxProps` `React.HTMLAttributes<HTMLInputElement>`	Props to add to the dropdown trigger element The default value is {}
`description` `string`	Value of the description of the user
`disabled` `boolean`	Flag to indicate that all interactions on the card will be disabled.
`dropDownTriggerProps` `Omit< ButtonWithIconProps, 'symbol' \| 'spritemap' \| 'displayType' \| 'className' >`	Props to add to the dropdown trigger element The default value is { 'aria-label': 'More actions', }
`href` `string`	Path or URL to user
`name` `string`	Name of the user
`radioProps` `React.HTMLAttributes<HTMLInputElement> & { name: string; value: string; }`	Props to add to the radio element The default value is {name: '', value: ''}
`selected` `boolean`	Flag to indicate if card is selected The default value is false
`spritemap` `string`	Path to clay icon spritemap
`stickerTitle` `string`	Title for user icon.
`userDisplayType` `StickerDisplayType`	Displays the color of the user icon
`userImageAlt` `string`	Value for alt attribute for user image The default value is 'thumbnail'
`userImageSrc` `string`	Path to the user's image
`userSymbol` `string`	Icon name to use for user avatar The default value is 'user'
`truncate` `boolean`	Flag to indicate if the card text is truncated The default value is true