README
title: 'Card' description: 'Cards are a specific form of data visualization focused mainly on displaying images.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/cards/' packageNpm: '@clayui/card'
import { CardBasic, CardBasicHorizontal, CardWithInfo, CardWithNavigation, CardWithUser, CardWithHorizontal, Card, } from '$packages/clay-card/docs/index';
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.
Horizontal composing
You can use the Card in horizontal format and use the autofit utilities to create more possibilities.
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.
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.