Clay
Skip to ContentClayClay by Liferay
  • Get Started
    • Introduction
    • What is Clay
    • Importing the JS Component
    • Using JS Components with Metal.js
    • Web Components
  • Foundations
    • Grid
    • Typography
  • Lexicon Core Components
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Advanced Examples
        • Axis Label
        • Axis Range
        • Data Color
        • Gridlines
        • Predictive forecasting
        • Regions
        • X Axis Tick Formatting
      • Basic Examples
        • Bar Chart
        • Bubble Chart
        • Combination Chart
        • Donut Chart
        • Gauge Chart
        • Geomap Chart
        • Line Chart
        • Pie Chart
        • Scatter Chart
        • Spline Chart
        • Step Chart
    • Dataset Display
    • Dropdown Menu
    • Forms
      • Checkbox, Radio, and Toggle
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumbs
      • Navigation Bar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bars
    • Sidebar
      • Info Panel
    • Stickers
    • Table
      • Inline Edit Table
      • Table
    • Tabs
    • Toolbars
      • Management Toolbar
  • CSS Framework
    • SCSS
    • Class Helpers
    • Satellite Components
      • Alerts
      • Badges
      • Button Group
      • Cards
      • Dropdown Menu
      • Forms
        • Form Elements
        • Form Elements (Input Groups)
        • Form Elements (Validation)
      • Images (Aspect Ratios)
      • Images and Thumbnails
      • Labels
      • Links
      • List Groups
      • Modals
      • Nav
      • Navigation
        • Header
      • Paginations
      • Panels
      • Popovers and Tooltips
      • Progress Bars
      • Stickers
      • Tables
      • Tbar (Toolbar)
      • Timelines
      • Toggle Switch
    • Page Examples
      • Card View Template
      • Document Upload
      • List View Template
      • Table View Template
      • Users and Organizations
  • News

Cards

Description

Cards are a very specific visual representation of data.

Check the Lexicon Cards Pattern for a more in-depth look at the motivations and proper usage of this component.

Image card

Image cards are used in image/document galleries.

Default

thumbnail_coffee.jpg
Author Action
Approved
Download Edit Move Checkout Permissions Move to Recycle Bin
{call ClayImageCard.render}
	{param actionItems: [
		[
			'href': '#1',
			'label': 'Edit',
			'separator': true
		],
		[
			'href': '#1',
			'label': 'Save'
		]
	] /}
	{param imageAlt: 'thumbnail' /}
	{param imageSrc: '/images/thumbnail_coffee.jpg' /}
	{param labels: [
		[
			'label': 'Approved',
			'style': 'success'
		]
	] /}
	{param selectable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param stickerIcon: 'document-image' /}
	{param stickerStyle: 'danger' /}
	{param subtitle: 'Author Action' /}
	{param title: 'thumbnail_coffee.jpg' /}
{/call}
<clay-image-card
	actionItems='[{"href": "#1", "label": "Edit", "separator": true}, {"href": "#1", "label": "Save"}]'
	imageAlt="thumbnail"
	imageSrc="/images/thumbnail_coffee.jpg"
	labels='[{"label": "Approved", "style": "success"}]'
	selectable="true"
	spritemap="/images/icons/icons.svg"
	stickerIcon="document-image"
	stickerStyle="danger"
	subtitle="Author Action"
	title="thumbnail_coffee.jpg">
</clay-image-card>
<div class="card-type-asset form-check form-check-card form-check-top-left image-card">
	<div class="card">
		<div class="aspect-ratio card-item-first">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox"/>
					<span class="custom-control-label"></span>
					<img alt="thumbnail"class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="/images/thumbnail_coffee.jpg" />
					<span class="sticker sticker-rounded sticker-danger sticker-bottom-left">
						<span class="inline-item">
							<svg class="lexicon-icon lexicon-icon-document-image" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#document-image"></use>
							</svg>
						</span>
					</span>
				</label>
			</div>
		</div>
		<div class="card-body">
			<div class="card-row">
				<div class="autofit-col autofit-col-expand">
					<div class="card-title text-truncate" title="thumbnail_coffee.jpg">thumbnail_coffee.jpg</div>
					<div class="card-subtitle text-truncate" title="Author Action">Author Action</div>
					<div class="card-detail">
						<span class="label label-success">
							<span class="label-item label-item-expand">Approved</span>
						</span>
					</div>
				</div>
				<div class="autofit-col">
					<div class="dropdown dropdown-action">
						<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#ellipsis-v" />
							</svg>
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#1">Download</a>
							<a class="dropdown-item" href="#1">Edit</a>
							<a class="dropdown-item" href="#1">Move</a>
							<a class="dropdown-item" href="#1">Checkout</a>
							<a class="dropdown-item" href="#1">Permissions</a>
							<a class="dropdown-item" href="#1">Move to Recycle Bin</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Active

thumbnail_coffee.jpg
Author Action
Approved
Download Edit Move Checkout Permissions Move to Recycle Bin
{call ClayImageCard.render}
	{param actionItems: [
		[
			'href': '#1',
			'label': 'Edit',
			'separator': true
		],
		[
			'href': '#1',
			'label': 'Save'
		]
	] /}
	{param imageAlt: 'thumbnail' /}
	{param imageSrc: '/images/thumbnail_coffee.jpg' /}
	{param labels: [
		[
			'label': 'Approved',
			'style': 'success'
		]
	] /}
	{param selectable: true /}
	{param selected: true /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param subtitle: 'Author Action' /}
	{param stickerIcon: 'document-image' /}
	{param stickerStyle: 'danger' /}
	{param title: 'thumbnail_coffee.jpg' /}
{/call}
<clay-image-card
	actionItems='[{"href": "#1", "label": "Edit", "separator": true}, {"href": "#1", "label": "Save"}]'
	imageAlt="thumbnail"
	imageSrc="/images/thumbnail_coffee.jpg"
	labels='[{"label": "Approved", "style": "success"}]'
	selectable="true"
	selected="true"
	spritemap="/images/icons/icons.svg"
	stickerIcon="document-image"
	stickerStyle="danger"
	subtitle="Author Action"
	title="thumbnail_coffee.jpg">
</clay-image-card>
<div class="active card-type-asset form-check form-check-card form-check-top-left image-card">
	<div class="card">
		<div class="aspect-ratio card-item-first">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox" checked="true"/>
					<span class="custom-control-label"></span>
					<img alt="thumbnail"class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="/images/thumbnail_coffee.jpg" />
					<span class="sticker sticker-rounded sticker-danger sticker-bottom-left">
						<span class="inline-item">
							<svg class="lexicon-icon lexicon-icon-document-image" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#document-image"></use>
							</svg>
						</span>
					</span>
				</label>
			</div>
		</div>
		<div class="card-body">
			<div class="card-row">
				<div class="autofit-col autofit-col-expand">
					<div class="card-title text-truncate" title="thumbnail_coffee.jpg">thumbnail_coffee.jpg</div>
					<div class="card-subtitle text-truncate" title="Author Action">Author Action</div>
					<div class="card-detail">
						<span class="label label-success">
							<span class="label-item label-item-expand">Approved</span>
						</span>
					</div>
				</div>
				<div class="autofit-col">
					<div class="dropdown dropdown-action">
						<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#ellipsis-v" />
							</svg>
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#1">Download</a>
							<a class="dropdown-item" href="#1">Edit</a>
							<a class="dropdown-item" href="#1">Move</a>
							<a class="dropdown-item" href="#1">Checkout</a>
							<a class="dropdown-item" href="#1">Permissions</a>
							<a class="dropdown-item" href="#1">Move to Recycle Bin</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Empty

empty-background.png
Author Action
Rejected
Download Edit Move Checkout Permissions Move to Recycle Bin
{call ClayImageCard.render}
	{param actionItems: [
		[
			'href': '#1',
			'label': 'Edit',
			'separator': true
		],
		[
			'href': '#1',
			'label': 'Save'
		]
	] /}
	{param labels: [
		[
			'label': 'Rejected',
			'style': 'danger'
		]
	] /}
	{param selectable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param stickerIcon: 'document-image' /}
	{param stickerStyle: 'danger' /}
	{param subtitle: 'Author Action' /}
	{param title: 'empty-background.png' /}
{/call}
<clay-image-card
	actionItems='[{"href": "#1", "label": "Edit", "separator": true}, {"href": "#1", "label": "Save"}]'
	labels='[{"label": "Rejected", "style": "danger"}]'
	selectable="true"
	spritemap="/images/icons/icons.svg"
	stickerIcon="document-image"
	stickerStyle="danger"
	subtitle="Author Action"
	title="thumbnail_coffee.jpg">
</clay-image-card>
<div class="card card-type-asset image-card">
	<div class="aspect-ratio card-item-first">
		<span class="sticker sticker-rounded sticker-danger sticker-bottom-left">
			<span class="inline-item">
				<svg class="lexicon-icon lexicon-icon-document-image" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#document-image"></use>
				</svg>
			</span>
		</span>
	</div>
	<div class="card-body">
		<div class="card-row">
			<div class="autofit-col autofit-col-expand">
				<div class="card-title text-truncate" title="empty-background.png">empty-background.png</div>
				<div class="card-subtitle text-truncate" title="Author Action">Author Action</div>
				<div class="card-detail">
					<span class="label label-danger">
						<span class="label-item label-item-expand">Rejected</span>
					</span>
				</div>
			</div>
			<div class="autofit-col">
				<div class="dropdown dropdown-action">
					<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
						<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
							<use href="/images/icons/icons.svg#ellipsis-v" />
						</svg>
					</a>
					<div class="dropdown-menu dropdown-menu-right">
						<a class="dropdown-item" href="#1">Download</a>
						<a class="dropdown-item" href="#1">Edit</a>
						<a class="dropdown-item" href="#1">Move</a>
						<a class="dropdown-item" href="#1">Checkout</a>
						<a class="dropdown-item" href="#1">Permissions</a>
						<a class="dropdown-item" href="#1">Move to Recycle Bin</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

IMAGE WITH DIFFERENT RATIOS

It is important to highlight that images can have different sizes. To provide the end user with that relevant data about the image, Lexicon incorporates cards that allow this feature.

lexicon_icon_camera_av93ii2oofffmmmsjf2332.svg
Author Action
Approved
Download Edit Move Checkout Permissions Move to Recycle Bin
thumbnail
thumbnail_coffee.jpg
Author Action
{call ClayImageCard.render}
	{param actionItems: [
		[
			'href': '#1',
			'label': 'Edit',
			'separator': true
		],
		[
			'href': '#1',
			'label': 'Save'
		]
	] /}
	{param icon: 'camera' /}
	{param labels: [
		[
			'label': 'Approved',
			'style': 'success'
		]
	] /}
	{param selectable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param stickerIcon: 'document-vector' /}
	{param stickerStyle: 'dark' /}
	{param subtitle: 'Author Action' /}
	{param title: 'lexicon_icon_camera_av93ii2oofffmmmsjf2332.svg' /}
{/call}

{call ClayImageCard.render}
	{param imageAlt: 'thumbnail' /}
	{param imageSrc: '/images/thumbnail_coffee.jpg' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param stickerIcon: 'document-image' /}
	{param stickerStyle: 'danger' /}
	{param subtitle: 'Author Action' /}
	{param title: 'thumbnail_coffee.jpg' /}
{/call}
<clay-image-card
	actionItems='[{"href": "#1", "label": "Edit", "separator": true}, {"href": "#1", "label": "Save"}]'
	icon="camera"
	labels='[{"label": "Approved", "style": "success"}]'
	selectable="true"
	spritemap="/images/icons/icons.svg"
	stickerIcon="document-vector"
	stickerStyle="dark"
	subtitle="Author Action"
	title="lexicon_icon_camera_av93ii2oofffmmmsjf2332.jpg">
</clay-image-card>

<clay-image-card
	imageAlt="thumbnail"
	imageSrc="/images/thumbnail_coffee.jpg"
	spritemap="/images/icons/icons.svg"
	stickerIcon="document-image"
	stickerStyle="danger"
	subtitle="Author Action"
	title="thumbnail_coffee.jpg">
</clay-image-card>
<div class="card-type-asset form-check form-check-card form-check-top-left image-card">
	<div class="card">
		<div class="aspect-ratio card-item-first">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox"/>
					<span class="custom-control-label"></span>
					<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
						<svg class="lexicon-icon lexicon-icon-camera" focusable="false" role="presentation">
							<use href="/images/icons/icons.svg#camera" />
						</svg>
					</div>
					<span class="sticker sticker-rounded sticker-dark sticker-bottom-left">
						<span class="inline-item">
							<svg class="lexicon-icon lexicon-icon-document-vector" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#document-vector"></use>
							</svg>
						</span>
					</span>
				</label>
			</div>
		</div>
		<div class="card-body">
			<div class="card-row">
				<div class="autofit-col autofit-col-expand">
					<div class="card-title text-truncate" title="lexicon_icon_camera_av93ii2oofffmmmsjf2332.svg">lexicon_icon_camera_av93ii2oofffmmmsjf2332.svg</div>
					<div class="card-subtitle text-truncate" title="Author Action">Author Action</div>
					<div class="card-detail">
						<span class="label label-success">
							<span class="label-item label-item-expand">Approved</span>
						</span>
					</div>
				</div>
				<div class="autofit-col">
					<div class="dropdown dropdown-action">
						<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#ellipsis-v" />
							</svg>
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#1">Download</a>
							<a class="dropdown-item" href="#1">Edit</a>
							<a class="dropdown-item" href="#1">Move</a>
							<a class="dropdown-item" href="#1">Checkout</a>
							<a class="dropdown-item" href="#1">Permissions</a>
							<a class="dropdown-item" href="#1">Move to Recycle Bin</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card card-type-asset">
	<div class="aspect-ratio bg-checkered card-item-first">
		<img alt="thumbnail"class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="/images/thumbnail_coffee.jpg" />
		<span class="sticker sticker-rounded sticker-danger sticker-bottom-left">
			<span class="inline-item">
				<svg class="lexicon-icon lexicon-icon-document-image" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#document-image"></use>
				</svg>
			</span>
		</span>
	</div>
	<div class="card-body">
		<div class="card-row">
			<div class="autofit-col autofit-col-expand">
				<div class="card-title text-truncate" title="thumbnail_coffee.jpg">thumbnail_coffee.jpg</div>
				<div class="card-subtitle text-truncate" title="Author Action">Author Action</div>
			</div>
		</div>
	</div>
</div>

API

Property Description Type Required Default
actionAriaLabel
Aria label attribute for the action element. string|undefined false undefined
actionItems
List of items to display in the actions menu. array|object|undefined false undefined
aspectRatioClasses
CSS classes for the aspect ratio images string|undefined false aspect-ratio-item-center-middle aspect-ratio-item-fluid
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
disabled
Flag to indicate if the card is disabled or not. bool false false
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
href
Url to be applied to the title of the card. string|undefined false undefined
icon
Icon to be rendered in the visual area of the card. string|undefined false undefined
id
Id to be applied to the element. string|undefined false undefined
imageAlt
Alternate text of the image. string|undefined false undefined
imageSrc
Source of the image to be rendered in the visual area of the card. string|undefined false undefined
inputName
Name to be applied to the input element. string|undefined false undefined
inputValue
Value to be applied to the input element. string|undefined false undefined
labels
Labels of the card. array|undefined false undefined
labelStylesMap
Object that maps specific label values with desired styles. object|undefined false undefined
selectable
Flag to indicate if the card is selectable or not. bool false false
selected
Flag to indicate if the card is selected or not. bool false false
spritemap
The path to the SVG spritemap file containing the icons. string|undefined false undefined
stickerClasses
CSS classes for the inside the sticker. string|undefined false undefined
stickerIcon
Icon to be renderer inside the sticker. string|undefined false undefined
stickerImageAlt
Alternate text of the image to be renderer inside the sticker. string|undefined false undefined
stickerImageSrc
Source of the image to be rendered inside the sticker. string|undefined false undefined
stickerLabel
Label for the sticker represented in the card. string|undefined false undefined
stickerStyle
Style of sticker represented in the card. string false primary
stickerShape
Shape for the sticker represented in the card. string false rounded
subtitle
Subtitle of the card. string|undefined false undefined
title
Title of the card. string true undefined

User card

User cards represent users. The user can be represented by their user image or up to two initials extracted from their user name or name + surname.

User Name
Latest Action
User Name
Latest Action
Download Edit Move Checkout Permissions Move to Recycle Bin
{call ClayUserCard.render}
	{param name: 'User Name' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param subtitle: 'Latest Action' /}
	{param userColor: 'danger' /}
{/call}

{call ClayUserCard.render}
	{param actionItems: [
		[
			'href': '#1',
			'label': 'Edit',
			'separator': true
		],
		[
			'href': '#1',
			'label': 'Save'
		]
	] /}
	{param name: 'User Name' /}
	{param selectable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param subtitle: 'Latest Action' /}
	{param userColor: 'danger' /}
{/call}
<clay-user-card
	name="User Name"
	spritemap="/images/icons/icons.svg"
	subtitle="Latest Action"
	userColor="danger">
</clay-user-card>

<clay-user-card
	actionItems='[{"href": "#1", "label": "Edit", "separator": true}, {"href": "#1", "label": "Save"}]'
	name="User Name"
	selectable="true"
	spritemap="/images/icons/icons.svg"
	subtitle="Latest Action"
	userColor="danger">
</clay-user-card>
<div class="card card-type-asset user-card">
	<div class="aspect-ratio card-item-first">
		<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
			<span class="sticker sticker-circle sticker-primary sticker-user-icon">
				<span class="inline-item">
					<svg class="lexicon-icon lexicon-icon-user" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#user"></use>
					</svg>
				</span>
			</span>
		</div>
	</div>
	<div class="card-body">
		<div class="card-row">
			<div class="autofit-col autofit-col-expand">
				<div class="card-title text-truncate" title="User Name">User Name</div>
				<div class="card-subtitle text-truncate" title="Latest Action">Latest Action</div>
			</div>
		</div>
	</div>
</div>

<div class="card-type-asset form-check form-check-card form-check-top-left user-card">
	<div class="card">
		<div class="aspect-ratio card-item-first">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox"/>
					<span class="custom-control-label"></span>
					<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
						<span class="sticker sticker-circle sticker-danger sticker-user-icon">
							<span class="inline-item">
								<svg class="lexicon-icon lexicon-icon-user" focusable="false" role="presentation">
									<use href="/images/icons/icons.svg#user"></use>
								</svg>
							</span>
						</span>
					</div>
				</label>
			</div>
		</div>
		<div class="card-body">
			<div class="card-row">
				<div class="autofit-col autofit-col-expand">
					<div class="card-title text-truncate" title="User Name">User Name</div>
					<div class="card-subtitle text-truncate" title="Latest Action">Latest Action</div>
				</div>
				<div class="autofit-col">
					<div class="dropdown dropdown-action">
						<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#ellipsis-v" />
							</svg>
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#1">Download</a>
							<a class="dropdown-item" href="#1">Edit</a>
							<a class="dropdown-item" href="#1">Move</a>
							<a class="dropdown-item" href="#1">Checkout</a>
							<a class="dropdown-item" href="#1">Permissions</a>
							<a class="dropdown-item" href="#1">Move to Recycle Bin</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

API

Property Description Type Required Default
actionAriaLabel
Aria label attribute for the action element. string|undefined false undefined
actionItems
List of items to display in the actions menu. array|undefined false undefined
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
disabled
Flag to indicate if the card is disabled or not. bool false false
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
href
Url to be applied to the title of the card. string|undefined false undefined
id
Id to be applied to the element. string|undefined false undefined
imageAlt
Alternate text of the image. string|undefined false undefined
imageSrc
Source of the image to be rendered in the visual area of the card. string|undefined false undefined
initials
Initials of the user. string|undefined false undefined
inputName
Name to be applied to the input element. string|undefined false undefined
inputValue
Value to be applied to the input element. string|undefined false undefined
name
Name of the user. string true undefined
selectable
Flag to indicate if the card is selectable or not. bool false false
selected
Flag to indicate if the card is selected or not. bool false false
spritemap
The path to the SVG spritemap file containing the icons. string|undefined false undefined
subtitle
Subtitle of the card. string|undefined false undefined
userColorClass
Color of the user sticker. string false primary

File card

File cards represent files other than images.

deliverable.doc
Stevie Ray Vaughn
Approved
deliverable.doc
Stevie Ray Vaughn
Approved
Download Edit Move Checkout Permissions Move to Recycle Bin
{call ClayFileCard.render}
	{param icon: 'documents-and-media' /}
	{param labels: [
		[
			'label': 'Approved',
			'style': 'success'
		]
	] /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param stickerIcon: 'document-text' /}
	{param stickerStyle: 'primary' /}
	{param subtitle: 'Stevie Ray Vaughn' /}
	{param title: 'deliverable.doc' /}
{/call}

{call ClayFileCard.render}
	{param actionItems: [
		[
			'href': '#1',
			'label': 'Edit',
			'separator': true
		],
		[
			'href': '#1',
			'label': 'Save'
		]
	] /}
	{param icon: 'documents-and-media' /}
	{param labels: [
		[
			'label': 'Approved',
			'style': 'success'
		]
	] /}
	{param selectable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param stickerIcon: 'document-text' /}
	{param stickerStyle: 'primary' /}
	{param subtitle: 'Stevie Ray Vaughn' /}
	{param title: 'deliverable.doc' /}
{/call}
<clay-file-card
	icon="documents-and-media"
	labels='[{"label": "Approved", "style": "success"}]'
	spritemap="/images/icons/icons.svg"
	stickerIcon="document-text"
	stickerStyle="primary"
	subtitle="Stevie Ray Vaughn"
	title="deliverable.doc">
</clay-file-card>

<clay-file-card
	actionItems='[{"href": "#1", "label": "Edit", "separator": true}, {"href": "#1", "label": "Save"}]'
	icon="documents-and-media"
	labels='[{"label": "Approved", "style": "success"}]'
	selectable="true"
	spritemap="/images/icons/icons.svg"
	stickerIcon="document-text"
	stickerStyle="primary"
	subtitle="Stevie Ray Vaughn"
	title="deliverable.doc">
</clay-file-card>
<div class="card card-type-asset file-card">
	<div class="aspect-ratio card-item-first">
		<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
			<svg class="lexicon-icon lexicon-icon-documents-and-media" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#documents-and-media" />
			</svg>
		</div>
		<span class="sticker sticker-rounded sticker-primary sticker-bottom-left">
			<span class="inline-item">
				<svg class="lexicon-icon lexicon-icon-document-text" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#document-text"></use>
				</svg>
			</span>
		</span>
	</div>
	<div class="card-body">
		<div class="card-row">
			<div class="autofit-col autofit-col-expand">
				<div class="card-title text-truncate" title="deliverable.doc">deliverable.doc</div>
				<div class="card-subtitle text-truncate" title="Stevie Ray Vaughn">Stevie Ray Vaughn</div>
				<div class="card-detail">
					<span class="label label-success">
						<span class="label-item label-item-expand">Approved</span>
					</span>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card-type-asset form-check form-check-card form-check-top-left file-card">
	<div class="card">
		<div class="aspect-ratio card-item-first">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox" />
					<span class="custom-control-label"></span>
					<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
						<svg class="lexicon-icon lexicon-icon-documents-and-media" focusable="false" role="presentation">
							<use href="/images/icons/icons.svg#documents-and-media" />
						</svg>
					</div>
					<span class="sticker sticker-rounded sticker-primary sticker-bottom-left">
						<span class="inline-item">
							<svg class="lexicon-icon lexicon-icon-document-text" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#document-text"></use>
							</svg>
						</span>
					</span>
				</label>
			</div>
		</div>
		<div class="card-body">
			<div class="card-row">
				<div class="autofit-col autofit-col-expand">
					<div class="card-title text-truncate" title="deliverable.doc">deliverable.doc</div>
					<div class="card-subtitle text-truncate" title="Stevie Ray Vaughn">Stevie Ray Vaughn</div>
					<div class="card-detail">
						<span class="label label-success">
							<span class="label-item label-item-expand">Approved</span>
						</span>
					</div>
				</div>
				<div class="autofit-col">
					<div class="dropdown dropdown-action">
						<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
							<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#ellipsis-v" />
							</svg>
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" href="#1">Download</a>
							<a class="dropdown-item" href="#1">Edit</a>
							<a class="dropdown-item" href="#1">Move</a>
							<a class="dropdown-item" href="#1">Checkout</a>
							<a class="dropdown-item" href="#1">Permissions</a>
							<a class="dropdown-item" href="#1">Move to Recycle Bin</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

API

Property Description Type Required Default
actionAriaLabel
Aria label attribute for the action element. string|undefined false undefined
actionItems
List of items to display in the actions menu. array|undefined false undefined
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
disabled
Flag to indicate if the card is disabled or not. bool false false
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
href
Url to be applied to the title of the card. string|undefined false undefined
icon
Icon to be rendered in the visual area of the card. string false documents-and-media
id
Id to be applied to the element. string|undefined false undefined
inputName
Name to be applied to the input element. string|undefined false undefined
inputValue
Value to be applied to the input element. string|undefined false undefined
labels
Labels of the card. array|undefined false undefined
selectable
Flag to indicate if the card is selectable or not. bool false false
selected
Flag to indicate if the card is selected or not. bool false false
spritemap
The path to the SVG spritemap file containing the icons. string true undefined
stickerClasses
CSS classes for the inside the sticker. string|undefined false undefined
stickerIcon
Icon to be renderer inside the sticker. string|undefined false undefined
stickerImageAlt
Alternate text of the image to be renderer inside the sticker. string|undefined false undefined
stickerImageSrc
Source of the image to be rendered inside the sticker. string|undefined false undefined
stickerLabel
Label for the sticker represented in the card. string|undefined false undefined
stickerShape
Shape for the sticker represented in the card. string false rounded
stickerStyle
Style of sticker represented in the card. string false primary
subtitle
Subtitle of the card. string|undefined false undefined
title
Title of the card. string true undefined

Folder card

Folder cards display horizontal representations of information. They have the same amount of elements as the other cards previously explained on this page. The main purpose of this card is to represent folders, therefore the image is removed in this card type. In this case, only the checkbox is used to select.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
{call ClayHorizontalCard.render}
	{param spritemap: '/images/icons/icons.svg' /}
	{param title: 'ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual' /}
{/call}

{call ClayHorizontalCard.render}
	{param actionItems: [
		[
			'href': '#1',
			'label': 'Edit',
			'separator': true
		],
		[
			'href': '#1',
			'label': 'Save'
		]
	] /}
	{param selectable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param title: 'ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual' /}
{/call}
<clay-horizontal-card
	spritemap="/images/icons/icons.svg"
	title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual">
</clay-horizontal-card>

<clay-horizontal-card
	actionItems='[{"href": "#1", "label": "Edit", "separator": true}, {"href": "#1", "label": "Save"}]'
	selectable="true"
	spritemap="/images/icons/icons.svg"
	title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual">
</clay-horizontal-card>
<div class="card card-horizontal card-type-directory">
	<div class="card-body">
		<div class="card-row">
			<div class="flex-col">
				<span class="sticker">
					<span class="inline-item">
						<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
							<use href="/images/icons/icons.svg#folder" />
						</svg>
					</span>
				</span>
			</div>
			<div class="autofit-col autofit-col-expand autofit-col-gutters">
				<div class="card-title text-truncate" title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</div>
			</div>
		</div>
	</div>
</div>

<div class="card-type-directory form-check form-check-card form-check-middle-left">
	<div class="custom-control custom-checkbox">
		<label>
			<input class="custom-control-input" type="checkbox"/>
			<span class="custom-control-label"></span>
			<div class="card card-horizontal">
				<div class="card-body">
					<div class="card-row">
						<div class="autofit-col">
							<span class="sticker">
								<span class="inline-item">
									<svg class="lexicon-icon lexicon-icon-folder" focusable="false" role="presentation">
										<use href="/images/icons/icons.svg#folder" />
									</svg>
								</span>
							</span>
						</div>
						<div class="autofit-col autofit-col-expand autofit-col-gutters">
							<div class="card-title text-truncate" title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</div>
						</div>
						<div class="autofit-col">
							<div class="dropdown dropdown-action">
								<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" role="button">
									<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
										<use href="/images/icons/icons.svg#ellipsis-v" />
									</svg>
								</a>
								<div class="dropdown-menu dropdown-menu-right">
									<a class="dropdown-item" href="#1">Download</a>
									<a class="dropdown-item" href="#1">Edit</a>
									<a class="dropdown-item" href="#1">Move</a>
									<a class="dropdown-item" href="#1">Checkout</a>
									<a class="dropdown-item" href="#1">Permissions</a>
									<a class="dropdown-item" href="#1">Move to Recycle Bin</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</label>
	</div>
</div>

API

Property Description Type Required Default
actionAriaLabel
Aria label attribute for the action element. string|undefined false undefined
actionItems
List of items to display in the actions menu. array|undefined false undefined
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
disabled
Flag to indicate if the card is disabled or not. bool false false
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
href
Url to be applied to the title of the card. string|undefined false undefined
icon
Icon of the card. string false folder
id
Id to be applied to the element. string|undefined false undefined
inputName
Name to be applied to the input element. string|undefined false undefined
inputValue
Value to be applied to the input element. string|undefined false undefined
selectable
Flag to indicate if the card is selectable or not. bool false false
selected
Flag to indicate if the card is selected or not. bool false false
spritemap
The path to the SVG spritemap file containing the icons. string true undefined
title
Title of the card. string true undefined

See dataset template for more examples.

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.