Card
View in LexiconCards are a specific form of data visualization focused mainly on displaying images.
install | yarn add @clayui/card |
---|---|
version | |
use | import ClayCard from '@clayui/card'; |
Table of Contents
Composing
Card follows the Clay component compositional philosophy, you can compose with ClayCard’s low-level components to get Clay results and adapt to your use cases, but if you just follow the specification you can use the high-level ClayCard.
This documentation focuses on how you can use ClayCard low-level components to reach unspecified use cases and how to use ClayCard high-level components.
You can only leverage the body of Card
and Card.Body
to create the white card and add more elements.
import {Provider} from '@clayui/core'; import Card from '@clayui/card'; import Button from '@clayui/button'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <div className="col-md-5"> <Card> <Card.Body> <Card.Description displayType="title"> {'Card Title'} </Card.Description> <Card.Description truncate={false} displayType="text"> { 'Some quick example text to build on the card title and make up the bulk of the card content.' } </Card.Description> <Button>{'Go somewhere'}</Button> </Card.Body> </Card> </div> </div> </Provider> ); }
Horizontal composing
You can use the Card in horizontal format and use the autofit
utilities to create more possibilities.
import {Provider} from '@clayui/core'; import Card from '@clayui/card'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <Card horizontal> <Card.Row> <div className="autofit-col"> <img alt="thumbnail" className="card-item-first" src="https://clayui.com/images/thumbnail_placeholder.gif" style={{width: '150px'}} /> </div> <div className="autofit-col autofit-col-expand autofit-col-gutters"> <section className="autofit-section"> <Card.Description displayType="title"> {'So ristretto cappuccino'} </Card.Description> <Card.Description truncate={false} displayType="text"> {'Wings eu, pumpkin spice robusta.'} </Card.Description> </section> </div> </Card.Row> </Card> </div> </Provider> ); }
Lexicon specs
The low-level components for ClayCard have been built thinking about how you can use the components in the composition to get close to Lexicon specifications.
For some low-level components it is necessary to pass some modifier classes in order for the component to reach the Lexicon result, this was necessary since we did not want to attach the component just for this case and the low-level components could be used more flexibly and allow you to create new possibilities.
import {Provider} from '@clayui/core'; import Card from '@clayui/card'; import Icon from '@clayui/icon'; import Sticker from '@clayui/sticker'; import Label from '@clayui/label'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <div className="col-md-4"> <Card displayType="file"> <Card.AspectRatio className="card-item-first"> <div className="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon"> <Icon symbol="documents-and-media" /> </div> <Sticker displayType="danger" position="bottom-left"> {'DOC'} </Sticker> </Card.AspectRatio> <Card.Body> <Card.Row> <div className="autofit-col autofit-col-expand"> <section className="autofit-section"> <Card.Description displayType="title"> {'deliverable.doc'} </Card.Description> <Card.Description displayType="subtitle"> {'Stevie Ray Vaughn'} </Card.Description> <Card.Caption> <Label displayType="success">{'Approved'}</Label> </Card.Caption> </section> </div> </Card.Row> </Card.Body> </Card> </div> </div> </Provider> ); }
High-level Components
ClayCard’s high-level components predict the major cases of the Lexicon specification:
- Cards with Images
- Card for user listing
- Card for docs listing
- Card for folder
- Card for navigation
CardWithInfo
ClayCardWithInfo
you can use to create cards with images and documents.
import {Provider} from '@clayui/core'; import {ClayCardWithInfo} from '@clayui/card'; import React, {useState} from 'react'; export default function App() { const [value, setValue] = useState(false); return ( <Provider spritemap="/icons.svg"> <div className="row"> <div className="col-md-4"> <ClayCardWithInfo actions={[ { label: 'clickable', onClick: () => { alert('you clicked!'); }, }, {type: 'divider'}, { href: '#', label: 'linkable', }, ]} description="A cool description" href="#" labels={[ { displayType: 'success', value: 'Awesome', }, { displayType: 'danger', value: 'Crazy', }, ]} onSelectChange={(newVal) => setValue(newVal)} selected={value} stickerProps={{ content: 'DOC', displayType: 'danger', }} title="Selectable File" /> </div> </div> </Provider> ); }
CardWithNavigation
import {Provider} from '@clayui/core'; import {ClayCardWithNavigation} from '@clayui/card'; import Icon from '@clayui/icon'; import React, {useState} from 'react'; export default function App() { const [value, setValue] = useState(false); return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <div className="row"> <div className="col-md-4"> <ClayCardWithNavigation description="Pick and choose your layout..." onClick={() => alert('clicked')} title="onClick Card with icon" > <Icon symbol="page-template" /> </ClayCardWithNavigation> </div> </div> </div> </Provider> ); }
CardWithUser
import {Provider} from '@clayui/core'; import {ClayCardWithUser} from '@clayui/card'; import React, {useState} from 'react'; export default function App() { const [value, setValue] = useState(false); return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <div className="row"> <div className="col-md-4"> <ClayCardWithUser actions={[ { label: 'clickable', onClick: () => { alert('you clicked!'); }, }, {type: 'divider'}, { href: '#', label: 'linkable', }, ]} description="Assistant to the regional manager" href="#" labels={[ { displayType: 'success', value: 'Awesome', }, { displayType: 'danger', value: 'Crazy', }, ]} name="Abraham Kuyper" onSelectChange={() => {}} selected={true} /> </div> </div> </div> </Provider> ); }
CardWithHorizontal
import {Provider} from '@clayui/core'; import {ClayCardWithHorizontal} from '@clayui/card'; import React, {useState} from 'react'; export default function App() { const [value, setValue] = useState(false); return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <div className="row"> <div className="col-md-4"> <ClayCardWithHorizontal actions={[ { label: 'clickable', onClick: () => { alert('you clicked!'); }, }, {type: 'divider'}, { href: '#', label: 'linkable', }, ]} href="#" onSelectChange={setValue} selected={value} title="Selectable Folder" /> </div> </div> </div> </Provider> ); }
API Reference
Card
typeof Card
Parameters
Properties
active
boolean | undefined
Flag that indicates if active
class is applied
displayType
"image" | "file" | "user" | undefined
Determines the style of the card
selectable
boolean | undefined
Flag that indicates if the card can be selectable.
horizontal
boolean | undefined
Flag to indicate whether to use card as a horizontal/folder card. See the following documenation: https://liferay.design/lexicon/core-components/cards/cards-variation/
interactive
boolean | undefined
Flag to indicate whether to use card as a navigation card. See the following documenation: https://liferay.design/lexicon/core-components/cards/cards-navigation/
Returns
ElementClayCardWithHorizontal
({ "aria-label": ariaLabel, actions, checkboxProps, disabled, dropDownTriggerProps, href, onSelectChange, radioProps, selectableType, selected, spritemap, symbol, title, truncate, ...otherProps }: IProps) => JSX.Element
Parameters
Properties
actions
Array<Item> | undefined
checkboxProps
React.HTMLAttributes<HTMLInputElement> | undefined
= {}
Props to add to the checkbox element
disabled
boolean | undefined
Flag to indicate that all interactions on the card will be disabled.
dropDownTriggerProps
Omit<ButtonWithIconProps, "symbol" | "className" | "spritemap" | "displayType"> | undefined
= {"'aria-label'":"More actions"}
Props to add to the dropdown trigger element
href
string | undefined
Path or URL to item
radioProps
(React.HTMLAttributes<HTMLInputElement> & { name: string; value: string; }) | undefined
= {"name":"","value":""}
Props to add to the radio element
selected
boolean | undefined
Flag to indicate if card is selected
spritemap
string | undefined
Path to clay icon spritemap
symbol
string | undefined
= "folder"
Name of icon symbol
title *
string
Name of the item
truncate
boolean | undefined
= true
Flag to indicate if the card text is truncated
onSelectChange
((value: boolean | string) => void) | undefined
Callback for when item is selected.
selectableType
"checkbox" | "radio" | undefined
Determines what type of selectable it is.
Returns
ElementClayCardWithInfo
({ "aria-label": ariaLabel, actions, checkboxProps, description, disabled, displayType, dropDownTriggerProps, flushHorizontal, flushVertical, href, imgProps, labels, onSelectChange, radioProps, selectableType, selected, spritemap, stickerProps, symbol, title, truncate, ...otherProps }: IProps) => JSX.Element
Parameters
Properties
actions
Array<Item> | undefined
List of actions in the dropdown menu
checkboxProps
React.HTMLAttributes<HTMLInputElement> | undefined
= {}
Props to add to the checkbox element
radioProps
(React.HTMLAttributes<HTMLInputElement> & { name: string; value: string; }) | undefined
= {"name":"","value":""}
Props to add to the radio element
description
React.ReactText | undefined
Description of the file
disabled
boolean | undefined
Flag to indicate that all interactions on the card will be disabled.
displayType
"image" | "file" | undefined
Determines the style of the card
dropDownTriggerProps
Omit<ButtonWithIconProps, "symbol" | "className" | "spritemap" | "displayType"> | undefined
= {"'aria-label'":"More actions"}
Props to add to the dropdown trigger element
flushHorizontal
boolean | undefined
Flag to indicate if aspect-ratio-item-flush
class should be
applied to the image.
flushVertical
boolean | undefined
Flag to indicate if aspect-ratio-item-vertical-flush
class should be
applied to the image.
href
string | undefined
Path or URL to file
imgProps
string | React.ImgHTMLAttributes<HTMLImageElement> | undefined
Object of props for <img />
or string path to image
labels
Array<IProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement> & { value: React.ReactText; }> | undefined
List of labels that are applied to the file
selected
boolean | undefined
Flag to indicate if card is selected
spritemap
string | undefined
Path to clay icon spritemap
stickerProps
(IClayStickerProps & { content?: React.ReactNode; }) | null | undefined
= {}
Values used in displaying bottom-left icon
symbol
string | undefined
Name of icon
title *
string
Name of the file
truncate
boolean | undefined
= true
Flag to indicate if the card text is truncated
onSelectChange
((value: boolean | string) => void) | undefined
Callback for when item is selected.
selectableType
"checkbox" | "radio" | undefined
Determines what type of selectable it is.
Returns
ElementClayCardWithNavigation
({ "aria-label": ariaLabel, children, description, horizontal, horizontalSymbol, href, onClick, onKeyDown, spritemap, stickerTitle, title, ...otherProps }: IProps) => JSX.Element
Parameters
Properties
children
React.ReactNode
description
React.ReactText | undefined
Value displayed that describes the card
href
string | undefined
Path or url for click through
horizontal
boolean | undefined
Flag to indicate if card should be the horizontal
variant
horizontalSymbol
string | undefined
Icon to display when card is horizontal
onClick
((event: React.MouseEvent | React.KeyboardEvent) => void) | undefined
Callback for when card is clicked on
onKeyDown
((event: React.KeyboardEvent) => void) | undefined
= "noop"
Callback for when a keyboard key pressed on a card
spritemap
string | undefined
Path to spritemap for icon symbol.
stickerTitle
string | undefined
Title for bottom-left icon.
title
string | undefined
Value displayed for the card’s title
Returns
ElementClayCardWithUser
({ "aria-label": ariaLabel, actions, checkboxProps, description, disabled, dropDownTriggerProps, href, name, onSelectChange, selected, spritemap, stickerTitle, selectableType, radioProps, userImageAlt, userDisplayType, userImageSrc, userSymbol, truncate, ...otherProps }: IProps & (RadioProps | CheckboxProps)) => JSX.Element
Parameters
*
IProps & (RadioProps | CheckboxProps)
= {"checkboxProps":{},"dropDownTriggerProps":{"'aria-label'":"More actions"},"selected":false,"radioProps":{"name":"","value":""},"userImageAlt":"thumbnail","userSymbol":"user","truncate":true}
Returns
ElementAspectRatio
({ children, className, containerAspectRatio }: Props) => JSX.Element
Parameters
Properties
children *
React.ReactNode
AspectRatio content.
className
string | undefined
Defines a CSS class for the element.
containerAspectRatio
ContainerAspectRatioType | undefined
Contrains an image for a given Aspect Ratio.
Returns
ElementBody
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element
Returns
ElementCaption
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement | HTMLSpanElement>) => JSX.Element
Returns
ElementDescription
({ children, className, disabled, displayType, href, tag: Tag, truncate, ...otherProps }: ICardDescriptionProps) => JSX.Element
Parameters
displayType *
"title" | "text" | "subtitle"
Type of description that can be applied for a text.
disabled
boolean | undefined
Flag to indicate if href will be disabled.
href
string | undefined
Path or URL
tag
"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined
Define the name of the container element.
truncate
boolean | undefined
Truncates the text inside a description.
Returns
ElementGroup
({ children, className, label, ...otherProps }: ICardGroupProps) => JSX.Element
Parameters
label
string | undefined
Header’s label of Card Group
Returns
ElementRow
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element
Returns
ElementContributors
Last edited May 9, 2025 at 6:15:38 AM