Submit Feedback

Clay Cards

Cards visually represent data. Use them for images, document libraries, user profiles and more. There are four main types of Cards:

Image Cards
File Cards
User Cards
Horizontal Cards

Each of these types is covered below.

File Cards

File Cards display an icon of the file’s type. They represent file types other than image files (i.e. PDF, MP3, DOC, etc.).

<clay:file-card
	actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
	fileType="MP3"
	fileTypeStyle="warning"
	labels="<%= cardsDisplayContext.getLabels() %>"
	labelStylesMap="<%= cardsDisplayContext.getLabelStylesMap() %>"
	selectable="<%= true %>"
	selected="<%= true %>"
	subtitle="Jimi Hendrix"
	title="<%= MP3_FILE_TITLE %>"
/>

File Cards display file type icons.

You can optionally use the labelStylesMap attribute to pass a HashMap of multiple labels, as shown above.

The example below specifies a list icon instead of the default file icon:

<clay:file-card
	actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
	fileType="DOC"
	fileTypeStyle="info"
	icon="list"
	labels="<%= cardsDisplayContext.getLabels() %>"
	selectable="<%= true %>"
	selected="<%= true %>"
	subtitle="Paco de Lucia"
	title="<%= DOC_FILE_TITLE %>"
/>

note

The full list of available Liferay icons can be found on the Clay CSS website.

User Cards

User Cards display user profile images or the initials of the user’s name or name+surname.

User Card with initials:

<clay:user-card
	actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
	initials="HS"
	name="User Name"
	subtitle="Latest Action"
	userColor="danger"
/>

User Cards can display a user's initials.

User Card with profile image:

<clay:user-card
	actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
	disabled="<%= true %>"
	imageAlt="thumbnail"
	imageSrc="https://images.unsplash.com/photo-1502290822284-9538ef1f1291"
	name="User name"
	selectable="<%= true %>"
	selected="<%= true %>"
	subtitle="Latest Action"
/>

A User Card can also display a profile image.

Horizontal Cards represent folders and can have the same amount of information as other Cards. The key difference is that horizontal Cards let you remove the image portion of the Card, since only the folder icon is required.

<clay:horizontal-card
	actionItems="<%= cardsDisplayContext.getDefaultActionItems() %>"
	selectable="<%= true %>"
	selected="<%= true %>"
	title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual"
/>

Horizontal Cards are good for displaying folders.