Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Card

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

installyarn add @clayui/card
version3.105.0
  • Examples
  • Markup
  • API

Stable3.105.0View in LexiconCHANGELOGstorybook demos

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

Card

PropertyDescription
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

PropertyDescription
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

PropertyDescription
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

PropertyDescription
label
string
Header's label of Card Group

Card.Row

Extends from React.HTMLAttributes<HTMLDivElement>

CardWithHorizontal

PropertyDescription
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
onSelectChange
(val: boolean) => void
Callback for when item is selected
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

CardWithInfo

PropertyDescription
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 {}
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
onSelectChange
(val: boolean) => void
Callback for when item is selected
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

CardWithNavigation

PropertyDescription
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

PropertyDescription
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
onSelectChange
(val: boolean) => void
Callback for when item is selected
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'

How can this be improved? Create an issue!