Card
Cards are a specific form of data visualization focused mainly on displaying images.
install | yarn add @clayui/card |
---|---|
version | 3.119.0 |
Stable3.119.0View in LexiconCHANGELOG
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 variantThe 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 |