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';
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.
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="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';
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.
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>
);
}
CardWithNavigation
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
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
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>
);
}