Apq/semi-design: 快速搭建美观的 React 应用。由抖音前端与 UED 团队维护。 @ fix/scss_compiler_localSCSS_support

localeCode: en-US order: 44 category: Show title: Card subTitle: Card icon: doc-card

brief: Card container can consist of titles, paragraphs, pictures, lists, and other content.

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 
              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.

import React from 'react';
import { Card, Avatar, Popover } from '@douyinfe/semi-ui';
import { IconInfoCircle } from '@douyinfe/semi-icons';

function Demo() {
  const { Meta } = Card;

  return (
    <div>
      <Card 
        shadows='hover'
        style={{ maxWidth: 360 }} 
        bodyStyle={{ 
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}
      >
        <Meta 
          title="Semi Doc" 
          avatar={
            <Avatar 
              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>
      <br/>
      <Card 
        shadows='always'
        style={{ maxWidth: 360 }} 
        bodyStyle={{ 
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}
      >
        <Meta 
          title="Semi Doc" 
          avatar={
            <Avatar 
              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>
    </div>
  );
}

Customized content

You can use Card.Meta to support more flexible content, allowing you to set title, avatar, and description.

import React from 'react';
import { Card, Avatar, Space, Button, Typography } from '@douyinfe/semi-ui';

function Demo() {
  const { Meta } = Card;
  const { Text } = Typography;

  return (
    <Card
      style={{ maxWidth: 360 }}
      title={
        <Meta 
          title="Semi Doc" 
          description="Easily manage your project icons and easily upload, update and share a series of project icons." 
          avatar={
            <Avatar 
              size="default"
              src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
            />
          }
        />
      }
      headerExtraContent={
        <Text link>
            More
        </Text>
      }
      cover={ 
        <img 
          alt="example" 
          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
        />
      }
      footerLine={ true }
      footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
      footer={
        <Space>
          <Button theme='borderless' type='primary'>Featured Case</Button>
          <Button theme='solid' type='primary'>Start</Button>
        </Space>
      }
    >
      Semi Design is a design system developed and maintained by IES-FE & IES-UED. 
    </Card>
  );
}

Inner card

Other cards can be nested inside the card.


import React from 'react';
import { Card, Typography } from '@douyinfe/semi-ui';

function Demo() {
  const { Text } = Typography;
  
  return (
    <Card title='Card title' >
      <Card 
        title='Inner Card title'
        style={{ marginBottom: 20 }}
        headerExtraContent={
          <Text link>
            More
          </Text>
        }
      >
        Inner Card content
      </Card>
      <Card 
        title='Inner Card title'
        headerExtraContent={
          <Text link>
            More
          </Text>
        }
      >
        Inner Card content
      </Card>
    </Card>
  );
}

Card in column

The system overview page is often combined with the grid.

import React from 'react';
import { Card, Row, Col } from '@douyinfe/semi-ui';

function Demo() {
  return (
    <div 
      style={{
        backgroundColor: 'var(--semi-color-fill-0)', 
        padding: 20
      }}
    >
      <Row gutter={[16,16]}>
        <Col span={8}>
          <Card title='Card Title' bordered={false} >
              Card Content
          </Card>
        </Col>
        <Col span={8}>
          <Card title='Card Title' bordered={false} >
              Card Content
          </Card>
        </Col>
        <Col span={8}>
          <Card title='Card Title' bordered={false} >
              Card Content
          </Card>
        </Col>
      </Row>
      <Row gutter={[16,16]}>
        <Col span={16}>
          <Card title='Card Title' bordered={false} >
              Card Content
          </Card>
        </Col>
        <Col span={8}>
          <Card title='Card Title' bordered={false} >
              Card Content
          </Card>
        </Col>
      </Row>
    </div>
  );
}

loading

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.

import React, { useState } from 'react';
import { Card, Switch, Skeleton, Typography, Avatar } from '@douyinfe/semi-ui';

function Demo() {
  const [loading, setLoading] = useState(true);
  const { Meta } = Card;
  const { Title, Paragraph, Image } = Skeleton;

  return (
    <>
      <Switch onChange={ v => setLoading(!v) } />
      <br />
      <br />
      <Card
        style={{ maxWidth: 360 }}
        title={
          <Meta 
            title={
              <Skeleton
                style={{width:80}}
                placeholder={<Title />}
                loading={loading}
              >
                <Typography.Title heading={5}>
                  Semi Design
                </Typography.Title>
              </Skeleton>
            } 
            description={
              <Skeleton 
                style={{width:150, marginTop: 12}} 
                placeholder={<Paragraph rows={1} />} 
                loading={loading}
              >
                  <Typography.Text>
                    Semi Design is a design system developed and maintained by IES-FE & IES-UED.
                  </Typography.Text>
              </Skeleton>
            }
            avatar={
              <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
                <Avatar 
                  size="default"
                  src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
                />
              </Skeleton>
            }
          />
        }
        headerExtraContent={
          <Skeleton style={{width: 50}} placeholder={<Paragraph rows={1} />} loading={loading}>
            <Typography.Text link>
                More
            </Typography.Text>
          </Skeleton>
        }
        cover={ 
          <Skeleton style={{maxWidth: '100%', height: 260}} placeholder={<Image />} loading={loading}>
            <img 
              alt="example" 
              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
            />
          </Skeleton> 
        }
      >
      </Card>
    </>
  );
}

With tabs

You can use the Tabs component in the card component.

import React from 'react';
import { Card, Tabs, TabPane } from '@douyinfe/semi-ui';

function demo() {
  return (
    <Card title='Card title'>
      <Tabs 
        type="line" 
        style={{
          marginTop: -20,
          marginBottom: -20
        }}
      >
        <TabPane tab="Tab 1" itemKey="1">
          <p>content1</p>
          <p>content1</p>
          <p>content1</p>
        </TabPane>
        <TabPane tab="Tab 2" itemKey="2">
          <p>content2</p>
          <p>content2</p>
          <p>content2</p>
        </TabPane>
      </Tabs>
    </Card>
  );
}

Actions

actions receives the ReactNode array, and the elements will be displayed at the bottom of the content area with a horizontal spacing of 12px.

import React from 'react';
import { Card, Rating } from '@douyinfe/semi-ui';

function Demo() {
  const { Meta } = Card;

  return (
    <Card
      style={{ maxWidth: 360 }}
      actions={[    
        <Rating size='small' defaultValue={4}/>
      ]}
      headerLine={ false }
      cover={ 
        <img 
          alt="example" 
          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg" 
        />
      }
    >
      <Meta 
        title="Semi Doc" 
        description="Easily manage your project icons and easily upload, update and share a series of project icons." 
      />
    </Card>
  );
}

Card group

Use CardGroup to present the cards in an evenly spaced arrangement.

import React, { useState } from 'react';
import { Card, CardGroup, Typography, Slider } from '@douyinfe/semi-ui';

function Demo() {
  const { Text } = Typography;
  const [ spacing, setSpacing ] = useState(12);

  return (
    <>
      <Text>Slide to adjust the card spacing</Text>
      <Slider 
        defaultValue={12}
        max={40}
        min={10}
        style={{ width:360 }}
        onChange={v=> setSpacing(v)}
      />
      <br />
      <CardGroup spacing={spacing}>
          {
            new Array(8).fill(null).map((v,idx)=>(
              <Card 
                key={idx}
                shadows='hover'
                title='Card title'
                headerLine={false}
                style={{ width:260 }}
                headerExtraContent={
                  <Text link>
                    More
                  </Text>
                }
              >
                <Text>Card content</Text>
              </Card>
            ))
          }
      </CardGroup>
    </>
  );
}

Grid card

You can use the type property of CardGroup to set the card group to a grid type.

import React from 'react';
import { Card, CardGroup, Typography } from '@douyinfe/semi-ui';

function Demo() {
  const { Text } = Typography;

  return (
    <CardGroup type='grid'>
      {
        new Array(7).fill(null).map((v,idx)=>(
          <Card 
            key={idx}
            shadows='hover'
            title='Card title'
            headerLine={false}
            style={{ width:260 }}
            headerExtraContent={
              <Text link>
                More
              </Text>
            }
          >
            <Text>Card content</Text>
          </Card>
        ))
      }     
    </CardGroup>
  );
}

API reference

Card

CardGroup

PROPERTIES	INSTRUCTIONS	TYPE	DEFAULT	VERSION
actions	Card operation group, located at the bottom of the card content area	Array	-	1.21.0
bodyStyle	Body style	CSSProperties	-	1.21.0
bordered	Whether to set the outer border of the card	boolean	true	1.21.0
className	The className of Card container	string	-	1.21.0
cover	Card cover	ReactNode	-	1.21.0
headerExtraContent	Extra content to the right of the card title	ReactNode	-	1.21.0
footer	Customize card footer	ReactNode	-	1.21.0
footerLine	Whether to set borders in the footer area and content area of the card	boolean	false	1.21.0
footerStyle	Footer style	CSSProperties	-	1.21.0
header	Custom card header, if passed in, it will override `title` and `headerExtraContent`	ReactNode	-	1.21.0
headerLine	Whether to set borders in the title area and content area of the card	boolean	true	1.21.0
headerStyle	Header style	CSSProperties	-	1.21.0
loading	Whether to set a placeholder when loading	boolean	false	1.21.0
shadows	Set the time to show the shadow. If this property is not set, there will be no shadow. Optiona: `hover`, `always`	string	-	1.21.0
style	Card style	CSSProperties	-	1.21.0
title	Card title	ReactNode	-	1.21.0

PROPERTIES	INSTRUCTIONS	TYPE	DEFAULT	VERSION
className	The className of CardGroup	string	-	1.21.0
spacing	Spacing size, support numeric value or array, `[horizontal spacing, vertical spacing]`	number \| number[]	12px	1.21.0
style	CardGroup style	CSSProperties	-	1.21.0
type	You can set the card deck to a grid type. After setting this property, the `spacing` property will be overwritten.Optional: `grid`	string	-	1.21.0

Card.Meta

|PROPERTIES |INSTRUCTIONS |TYPE |DEFAULT |VERSION| |-----------|----------------------|-------------|- |-------| |avatar |avatar |ReactNode |- |1.21.0 | |className |The className of Meta |string |- |1.21.0 | |description|description |ReactNode |- |1.21.0 | |style |Meta style |CSSProperties|- |1.21.0 | |title |title |ReactNode |- |1.21.0 |

index-en-US.md 20 KB

Permalink History Raw

brief: Card container can consist of titles, paragraphs, pictures, lists, and other content.

Demos

How to import

Basic card

Simple card

Cover

Border and line

Shadows

Customized content

Inner card

Card in column

loading

With Skeleton

With tabs

Actions

Card group

Grid card

API reference

Design Tokens

index-en-US.md 20 KB Permalink History Raw

brief: Card container can consist of titles, paragraphs, pictures, lists, and other content.

Demos

How to import

Basic card

Simple card

Cover

Border and line

Shadows

Customized content

Inner card

Card in column

loading

With Skeleton

With tabs

Actions

Card group

Grid card

API reference

Design Tokens

index-en-US.md 20 KB

Permalink History Raw