Card - Svelte - Semi Design Next

Demos

How to import

<script lang="ts">
    import { Card, CardGroup, CardMeta } from '@fibrae/semi-ui-svelte';
</script>

CardMeta is the same component as Card.Meta; either form works.

Basic card

The basic card contains the title, content and other parts.

Semi Design

Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

Code

<script lang="ts">
    import { Card, TypographyText } from '@fibrae/semi-ui-svelte';
</script>

<Card style="max-width: 360px" title="Semi Design">
    {#snippet headerExtraContent()}
        <TypographyText link>更多</TypographyText>
    {/snippet}
    Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
</Card>

Simple card

The card can only set the content area.

Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。

Semi Doc

Code

<script lang="ts">
    import { IconInfoCircle } from '@fibrae/semi-icons-svelte';
    import { Avatar, Card, CardMeta, Popover } from '@fibrae/semi-ui-svelte';

    const bodyStyle = 'display: flex; align-items: center; justify-content: space-between';
</script>

{#snippet avatar()}
    <Avatar alt="Card meta img" size="default" src="/assets/placeholder/logo.svg" />
{/snippet}
{#snippet content()}
    <article style="padding: 6px">这是一个 Card</article>
{/snippet}

<Card style="max-width: 360px">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。</Card>
<br />
<Card {bodyStyle} style="max-width: 360px">
    <CardMeta {avatar} title="Semi Doc" />
    <Popover {content} position="top" showArrow>
        <IconInfoCircle aria-label="信息" style="color: var(--semi-color-primary)" />
    </Popover>
</Card>

Cover

You can use the cover snippet to set the cover.

卡片封面

Code

<script lang="ts">
    import { Card, CardMeta } from '@fibrae/semi-ui-svelte';
</script>

{#snippet cover()}
    <img alt="example" src="/assets/root-web-sites/card-cover-docs-demo2.jpeg" />
{/snippet}

<Card {cover} style="max-width: 300px">
    <CardMeta title="卡片封面" />
</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.

Semi Design

Code

<script lang="ts">
    import { Card } from '@fibrae/semi-ui-svelte';
</script>

<div style="display: inline-block; padding: 20px; background-color: var(--semi-color-fill-0)">
    <Card bordered={false} headerLine style="max-width: 360px" title="Semi Design">Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</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.

Semi Doc

Code

<script lang="ts">
    import { IconInfoCircle } from '@fibrae/semi-icons-svelte';
    import { Avatar, Card, CardMeta, Popover } from '@fibrae/semi-ui-svelte';

    const bodyStyle = 'display: flex; align-items: center; justify-content: space-between';
</script>

{#snippet avatar()}
    <Avatar alt="Card meta img" size="default" src="/assets/placeholder/logo.svg" />
{/snippet}
{#snippet content()}
    <article style="padding: 6px">这是一个 Card</article>
{/snippet}

<div>
    <Card {bodyStyle} shadows="hover" style="max-width: 360px">
        <CardMeta {avatar} title="Semi Doc" />
        <Popover {content} position="top" showArrow>
            <IconInfoCircle aria-label="信息" style="color: var(--semi-color-primary)" />
        </Popover>
    </Card>
    <br />
    <Card {bodyStyle} shadows="always" style="max-width: 360px">
        <CardMeta {avatar} title="Semi Doc" />
        <Popover {content} position="top" showArrow>
            <IconInfoCircle aria-label="信息" style="color: var(--semi-color-primary)" />
        </Popover>
    </Card>
</div>

Customized content

You can use CardMeta to support more flexible content, allowing you to set title, avatar, and description. The last two are snippets, and title can be a string or a snippet.

Semi Doc

全面、易用、优质

Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。

Code

<script lang="ts">
    import { Avatar, Button, Card, CardMeta, Space, TypographyText } from '@fibrae/semi-ui-svelte';
</script>

{#snippet title()}
    <CardMeta title="Semi Doc">
        {#snippet description()}全面、易用、优质{/snippet}
        {#snippet avatar()}
            <Avatar alt="Card meta img" size="default" src="/assets/placeholder/logo.svg" />
        {/snippet}
    </CardMeta>
{/snippet}
{#snippet headerExtraContent()}
    <TypographyText link>More</TypographyText>
{/snippet}
{#snippet cover()}
    <img alt="example" src="/assets/root-web-sites/card-cover-docs-demo.jpeg" />
{/snippet}
{#snippet footer()}
    <Space>
        <Button theme="borderless" type="primary">精选案例</Button>
        <Button theme="solid" type="primary">开始使用</Button>
    </Space>
{/snippet}

<Card {cover} {footer} footerLine footerStyle="display: flex; justify-content: flex-end" {headerExtraContent} style="max-width: 340px" {title}>Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。</Card>

Inner card

Other cards can be nested inside the card.

Card title

Inner Card title

Inner Card content

Inner Card title

Inner Card content

Code

<script lang="ts">
    import { Card, TypographyText } from '@fibrae/semi-ui-svelte';
</script>

<Card title="Card title">
    <Card style="margin-bottom: 20px" title="Inner Card title">
        {#snippet headerExtraContent()}
            <TypographyText link>More</TypographyText>
        {/snippet}
        Inner Card content
    </Card>
    <Card title="Inner Card title">
        {#snippet headerExtraContent()}
            <TypographyText link>More</TypographyText>
        {/snippet}
        Inner Card content
    </Card>
</Card>

Card in column

The system overview page is often combined with the grid.

Card Title

Card Content

Card Title

Card Content

Card Title

Card Content

Card Title

Card Content

Card Title

Card Content

Code

<script lang="ts">
    import { Card, Col, Row } from '@fibrae/semi-ui-svelte';

    const rows = [
        [8, 8, 8],
        [16, 8],
    ];
</script>

<div style="background-color: var(--semi-color-fill-0); padding: 20px">
    {#each rows as spans, rowIndex (rowIndex)}
        <Row gutter={[16, 16]}>
            {#each spans as span, colIndex (colIndex)}
                <Col {span}>
                    <Card bordered={false} title="Card Title">Card Content</Card>
                </Col>
            {/each}
        </Row>
    {/each}
</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.

Code

<script lang="ts">
    import { Card, CardMeta, Switch } from '@fibrae/semi-ui-svelte';

    let loading = $state(true);
</script>

<Switch aria-label="显示内容" onChange={(v) => (loading = !v)} />
<br />
<br />
<Card {loading} style="max-width: 360px">
    <CardMeta title="Semi Doc">
        {#snippet description()}全面、易用、优质{/snippet}
    </CardMeta>
</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.

Code

<script lang="ts">
    import { Avatar, Card, CardMeta, Skeleton, SkeletonAvatar, SkeletonImage, SkeletonParagraph, SkeletonTitle, Switch, TypographyText, TypographyTitle } from '@fibrae/semi-ui-svelte';

    let loading = $state(true);
</script>

{#snippet title()}
    <CardMeta>
        {#snippet title()}
            <Skeleton {loading} style="width: 80px">
                {#snippet placeholder()}<SkeletonTitle />{/snippet}
                <TypographyTitle heading={5}>Semi Doc</TypographyTitle>
            </Skeleton>
        {/snippet}
        {#snippet description()}
            <Skeleton {loading} style="width: 150px; margin-top: 12px">
                {#snippet placeholder()}<SkeletonParagraph rows={1} />{/snippet}
                <TypographyText>全面、易用、优质</TypographyText>
            </Skeleton>
        {/snippet}
        {#snippet avatar()}
            <Skeleton {loading}>
                {#snippet placeholder()}<SkeletonAvatar />{/snippet}
                <Avatar alt="Card meta img" size="default" src="/assets/placeholder/logo.svg" />
            </Skeleton>
        {/snippet}
    </CardMeta>
{/snippet}
{#snippet headerExtraContent()}
    <Skeleton {loading} style="width: 50px">
        {#snippet placeholder()}<SkeletonParagraph rows={1} />{/snippet}
        <TypographyText link>More</TypographyText>
    </Skeleton>
{/snippet}
{#snippet cover()}
    <Skeleton {loading} style="max-width: 100%; height: 220px">
        {#snippet placeholder()}<SkeletonImage />{/snippet}
        <img alt="example" src="/assets/root-web-sites/card-cover-docs-demo.jpeg" />
    </Skeleton>
{/snippet}

<Switch aria-label="显示内容" onChange={(v) => (loading = !v)} />
<br />
<br />
<Card {cover} {headerExtraContent} style="max-width: 300px" {title} />

With tabs

You can use the Tabs component in the card component.

Card title

Tab 1

Tab 2

content1

Code

<script lang="ts">
    import { Card, Tabs } from '@fibrae/semi-ui-svelte';

    const tabList = [
        { itemKey: '1', tab: 'Tab 1' },
        { itemKey: '2', tab: 'Tab 2' },
    ];
</script>

<Card title="Card title">
    <Tabs style="margin-top: -20px; margin-bottom: -20px" {tabList} type="line">
        {#snippet panel({ itemKey })}
            <p>content{itemKey}</p>
            <p>content{itemKey}</p>
            <p>content{itemKey}</p>
        {/snippet}
    </Tabs>
</Card>

Actions

actions receives an array of snippets, each one is an action, displayed at the bottom of the content area with a horizontal spacing of 12px.

Semi Doc

全面、易用、优质

Code

<script lang="ts">
    import { Card, CardMeta, Rating } from '@fibrae/semi-ui-svelte';
</script>

{#snippet cover()}
    <img alt="example" src="/assets/root-web-sites/card-cover-docs-demo.jpeg" />
{/snippet}
{#snippet rating()}
    <Rating size="small" value={4} />
{/snippet}

<Card actions={[rating]} {cover} headerLine={false} style="max-width: 300px">
    <CardMeta title="Semi Doc">
        {#snippet description()}全面、易用、优质{/snippet}
    </CardMeta>
</Card>

Card group

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

滑动调节 Card 间距

10 40

Card title

Card content

Card title

Card content

Card title

Card content

Card title

Card content

Card title

Card content

Card title

Card content

Card title

Card content

Card title

Card content

Code

<script lang="ts">
    import { Card, CardGroup, Slider, TypographyText } from '@fibrae/semi-ui-svelte';

    let spacing = $state(12);
    const items = [1, 2, 3, 4, 5, 6, 7, 8];

    const onSpacingChange = (value: number | number[]) => {
        if (typeof value === 'number') spacing = value;
    };
</script>

<TypographyText id="card-group-spacing">滑动调节 Card 间距</TypographyText>
<Slider aria-labelledby="card-group-spacing" max={40} min={10} onChange={onSpacingChange} style="width: 360px" value={12} />
<br />
<CardGroup {spacing}>
    {#each items as idx (idx)}
        <Card headerLine={false} shadows="hover" style="width: 260px" title="Card title">
            {#snippet headerExtraContent()}
                <TypographyText link>More</TypographyText>
            {/snippet}
            <TypographyText>Card content</TypographyText>
        </Card>
    {/each}
</CardGroup>

Grid card

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

Card title

Card content

Card title

Card content

Card title

Card content

Card title

Card content

Card title

Card content

Card title

Card content

Card title

Card content

Code

<script lang="ts">
    import { Card, CardGroup, TypographyText } from '@fibrae/semi-ui-svelte';

    const items = [1, 2, 3, 4, 5, 6, 7];
</script>

<CardGroup type="grid">
    {#each items as idx (idx)}
        <Card headerLine={false} shadows="hover" style="width: 260px" title="Card title">
            {#snippet headerExtraContent()}
                <TypographyText link>More</TypographyText>
            {/snippet}
            <TypographyText>Card content</TypographyText>
        </Card>
    {/each}
</CardGroup>

API reference

Card

Props

Property	Description	Type	Default
actions	Actions at the bottom of the content area, spaced 12px apart; every snippet becomes one action.	`Snippet[]`	-
bodyStyle	Inline style of the content area.	`string`	-
bordered	Whether the card has an outer border.	`boolean`	`true`
children	Card content.	`Snippet`	-
cover	Card cover.	`Snippet`	-
footer	Custom footer.	`Snippet`	-
footerLine	Whether there is a border between the footer and the content area.	`boolean`	`false`
footerStyle	Inline style of the footer area.	`string`	-
header	Custom header that replaces title and headerExtraContent.	`Snippet`	-
headerExtraContent	Extra content to the right of the title.	`Snippet`	-
headerLine	Whether there is a border between the header and the content area.	`boolean`	`true`
headerStyle	Inline style of the header area.	`string`	-
loading	Whether the content area shows a loading placeholder; the root element's aria-busy is true while on.	`boolean`	`false`
shadows	When to show the shadow: hover or always. No shadow when unset.	`Shadows`	-
title	Title. A string renders as a div styled like a level-6 heading and truncated with a tooltip when too long; a snippet renders as it is.	`string \| Snippet`	-

class, style and native attributes and events (such as id, aria-*, onclick) land on the root element (div).

CardGroup

Props

Property	Description	Type	Default
align	Cross-axis alignment of the children, passed to Space: start, center, end or baseline.	`Align`	-
children	The cards to arrange.	`Snippet`	-
spacing	Spacing between cards, a number or [horizontal, vertical]; ignored when type is grid.	`number \| [number, number]`	`16`
type	Set to grid for a grid layout, which overrides spacing.	`CardGroupType`	-
vertical	Whether to lay out vertically, passed to Space.	`boolean`	`false`
wrap	Whether to wrap, passed to Space; ignored when vertical.	`boolean`	`true`

class, style and native attributes and events land on the root element of the inner Space.

Card.Meta

Props

Property	Description	Type	Default
avatar	Avatar.	`Snippet`	-
description	Description.	`Snippet`	-
title	Title, a string or a snippet.	`string \| Snippet`	-

class, style and native attributes and events (such as id, aria-*, onclick) land on the root element (div).

Accessibility

Card supports the input of aria-label or aria-labelledby to indicate the function of the Card; the root element then gets role="group" (an explicit role wins)
When Card loading, aria-busy will be turned on
A string title is styled as an h6 but rendered as a div without heading semantics, so it does not disturb the page's heading levels; pass your own heading element as title when you need one (in Vue, put it in the #title slot)
Card is a container-type component, and any elements inside the card need to follow their respective accessibility guidelines

Content Guidelines

Card title
- Card titles should be informative and focus on the most important information
- try to limit the title to 1 phrase or segment
- Card titles should be written in sentence case
- do not end with punctuation marks (except question marks)
Text
- Actionable: Use imperative sentences instead of "you can" to describe the body, which better tells the user what can be done

✅ Recommended usage	❌ Deprecated usage
Get order progress for details	You can get order progress for details

Always say the most important information first
Use "Need to" instead of "must"

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$color-card-bg-default	var(--semi-color-bg-0)	卡片背景颜色
$color-card-border	var(--semi-color-border)	卡片描边颜色
$color-card_title-text	var(--semi-color-text-0)	卡片标题文字颜色
$color-card_description-text	var(--semi-color-text-2)	卡片描述文字颜色
$color-card_extra-text	var(--semi-color-text-0)	卡片附加文字颜色
$color-card_body-text	var(--semi-color-text-1)	卡片正文文字颜色
$font-card_default-fontWeight	$font-weight-regular	卡片文字字重 - 默认
$font-card_extra-fontWeight	700	卡片文字字重 - 附加文字
$font-card_title-fontWeight	700	卡片文字字重 - 标题
$font-card_default-lineHeight	20px	卡片文字行高 - 默认
$font-card_title-lineHeight	22px	卡片文字行高 - 标题
$font-card_default-fontSize	$font-size-regular	卡片文字大小 - 默认
$font-card_extra-fontSize	$font-size-header-6	卡片文字大小 - 附加文字
$font-card_title-fontSize	$font-size-header-6	卡片文字大小 - 标题
$radius-card	var(--semi-border-radius-medium)	卡片圆角
$motion-card-transition_duration	300ms	卡片悬浮动画时长
$width-card-border	$border-thickness-control	卡片描边宽度
$shadow-card	var(--semi-shadow-elevated)	卡片阴影
$spacing-card-padding	$spacing-base-loose	卡片内边距
$spacing-card-margin	$spacing-base-loose	卡片外边距
$spacing-card_avatar-marginRight	$spacing-base-tight	卡片头像右侧外边距
$spacing-cardGroup_card-margin	-1px	卡片组外边距
$z-card_hover	1	悬浮后卡片 zindex