Card

Cards 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
Horizontal composing
Lexicon specs
High-level Components
CardWithInfo
CardWithNavigation
CardWithUser
CardWithHorizontal
API Reference

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.

Open Sandbox

import {Provider} from '@clayui/core';
import Card from '@clayui/card';
import Button from '@clayui/button';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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.

Open Sandbox

import {Provider} from '@clayui/core';
import Card from '@clayui/card';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Card horizontal>
					<Card.Row>
						<div className="autofit-col">
							<img
								alt="thumbnail"
								className="card-item-first"
								src="/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.

Open Sandbox

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';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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.

Open Sandbox

import {Provider} from '@clayui/core';
import {ClayCardWithInfo} from '@clayui/card';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [value, setValue] = useState(false);

	return (
		<Provider spritemap="/public/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>
	);
}

Open Sandbox

import {Provider} from '@clayui/core';
import {ClayCardWithNavigation} from '@clayui/card';
import Icon from '@clayui/icon';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [value, setValue] = useState(false);

	return (
		<Provider spritemap="/public/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

Open Sandbox

import {Provider} from '@clayui/core';
import {ClayCardWithUser} from '@clayui/card';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [value, setValue] = useState(false);

	return (
		<Provider spritemap="/public/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

Open Sandbox

import {Provider} from '@clayui/core';
import {ClayCardWithHorizontal} from '@clayui/card';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [value, setValue] = useState(false);

	return (
		<Provider spritemap="/public/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

Element

ClayCardWithHorizontal

({ "aria-label": ariaLabel, actions, checkboxProps, disabled, dropDownTriggerProps, href, onSelectChange, radioProps, selectableType, selected, spritemap, symbol, title, truncate, ...otherProps }: IProps) => JSX.Element

Parameters

Properties

actions

any

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

Element

ClayCardWithInfo

({ "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

any

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<any> | 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

any= {}

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

Element

({ "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

Element

ClayCardWithUser

({ "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

Element

AspectRatio

({ 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

Element

Body

({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element

Returns

Element

Caption

({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement | HTMLSpanElement>) => JSX.Element

Returns

Element

Description

({ children, className, disabled, displayType, href, tag: Tag, truncate, ...otherProps }: ICardDescriptionProps) => JSX.Element

Parameters

Properties

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= "p"

Define the name of the container element.

truncate

boolean | undefined= true

Truncates the text inside a description.

Returns

Element

Group

({ children, className, label, ...otherProps }: ICardGroupProps) => JSX.Element

Parameters

Properties

label

string | undefined

Header's label of Card Group

Returns

Element

Row

({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element

Returns

Element

Edit this page on GitHub

Contributors

Table of Contents

Composing
Horizontal composing
Lexicon specs
High-level Components
CardWithInfo
CardWithNavigation
CardWithUser
CardWithHorizontal
API Reference