Card container can consist of titles, paragraphs, pictures, lists, and other content.
API doc
Design doc
Demos
How to import
import { Card } from '@douyinfe/semi-ui';
Basic card
The basic card contains the title, content and other parts.
import React from 'react';
import { Card, Typography } from '@douyinfe/semi-ui';
function Demo() {
const { Text } = Typography;
return (
<Card
title='Semi Design'
style={{ maxWidth: 360 }}
headerExtraContent={
<Text link>
More
</Text>
}
>
Semi Design is a design system developed and maintained by IES-FE & IES-UED. The design system includes a design language and a set of reusable front-end components, helping designers and developers to more easily create high-quality, consistent user experience, design-compliant Web applications.
</Card>
);
}
Simple card
The card can only set the content area.
import React from 'react';
import { Card, Popover, Avatar } from '@douyinfe/semi-ui';
import { IconInfoCircle } from '@douyinfe/semi-icons';
function Demo() {
const { Meta } = Card;
return (
<>
<Card style={{ maxWidth: 360 }} >
Semi Design is a design system developed and maintained by IES-FE & IES-UED.
</Card>
<br />
<Card
style={{ maxWidth: 360 }}
bodyStyle={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}
>
<Meta
title="Semi Doc"
avatar={
<Avatar
alt='Card meta img'
size="default"
src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
/>
}
/>
<Popover
position='top'
showArrow
content={
<article style={{ padding: 6 }}>
This is a card.
</article>
}
>
<IconInfoCircle style={{ color: 'var(--semi-color-primary)' }}/>
</Popover>
</Card>
</>
);
}
Cover
You can use the cover property to set the cover.
import React from 'react';
import { Card } from '@douyinfe/semi-ui';
function Demo() {
const { Meta } = Card;
return (
<Card
style={{ maxWidth: 300 }}
cover={
<img
alt="example"
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg"
/>
}
>
<Meta title="Card cover" />
</Card>
);
}
Border and line
You can use bordered to set whether the card has an outer border, the default is true. At the same time, you can also use headerLine to set whether the content area and title area have borders, and footerLine to set whether the content area and footer area have borders.
import React from 'react';
import { Card } from '@douyinfe/semi-ui';
function Demo() {
return (
<div
style={{
display: 'inline-block',
padding: 20,
backgroundColor: 'var(--semi-color-fill-0)'
}}
>
<Card
style={{ maxWidth: 360 }}
bordered={false}
headerLine={true}
title='Semi Design'
>
Semi Design is a design system developed and maintained by IES-FE & IES-UED. The design system includes a design language and a set of reusable front-end components, helping designers and developers to more easily create high-quality, consistent user experience, design-compliant Web applications.
</Card>
</div>
);
}
Shadows
You can use shadows to set the timing of the shadow display. Optional: hover (show shadow when hover), always (show shadow always), if this property is not set, there will be no shadow.
You can use the loading property of Card to set whether to display placeholder elements in the card content area. When it is true, the placeholder elements will be displayed, and vice versa.
import React, { useState } from 'react';
import { Card, Switch } from '@douyinfe/semi-ui';
function Demo() {
const [loading, setLoading] = useState(true);
const { Meta } = Card;
return (
<>
<Switch onChange={ v => setLoading(!v) } />
<br />
<br />
<Card
style={{ maxWidth: 360 }}
loading={ loading }
>
<Meta
title="Semi Design"
description="Semi Design is a design system developed and maintained by IES-FE & IES-UED."
/>
</Card>
</>
);
}
With Skeleton
The loading property of Card can only set the preloading effect of the content area. If you want to set the preloading of other parts, or customize a richer preloading effect, you can combine it with the Skeleton component.