Card

A card is a container that groups content and actions about a single topic, and can optionally be selected.

FluentUI Svelte

5h ago · About us - Overview

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

A card is built out of the following components:

Card: The root component. It creates all the state, provides context to its parts and handles the selection.
CardPreview: The media shown at one edge of the card, with an optional logo overlaid on it.
CardHeader: The title of the card, with an optional image, description and action.
CardFooter: The actions shown at the bottom of the card.

Usage

<script>
	import { Card, CardPreview, CardHeader, CardFooter, Button } from 'fluentui-svelte';
</script>

{#snippet footerActions()}
	<Button>Like</Button>
	<Button appearance="standard">Share</Button>
{/snippet}

<Card orientation="vertical">
	<CardPreview logoSrc="/logo.png">
		<img src="/preview.png" alt="Preview" />
	</CardPreview>
	<CardHeader title="FluentUI Svelte" description="5h ago · About us - Overview" />
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<CardFooter action={footerActions} />
</Card>

Appearance

A card can have its background and borders styled for greater emphasis or to be subtle.

View Code

<Card appearance="filled">Filled</Card>
<Card appearance="outlined">Outlined</Card>
<Card appearance="subtle">Subtle</Card>

Filled

Outlined

Subtle

Orientation

A card lays its parts out horizontally by default. Set orientation to vertical to stack them instead.

View Code

<Card orientation="horizontal">
  <CardPreview logoSrc="/logo.png">
    <img src="/preview.png" alt="Preview" />
  </CardPreview>
  <CardHeader title="Horizontal" description="The default orientation" />
</Card>

<Card orientation="vertical">
  <CardPreview logoSrc="/logo.png">
    <img src="/preview.png" alt="Preview" />
  </CardPreview>
  <CardHeader title="Vertical" description="Stacks every part" />
</Card>

Horizontal

The default orientation

Vertical

Stacks every part

Selection

A selectable card toggles its selection when clicked anywhere, and reports it through onSelectionChange. Set showFloatingAction to float a checkbox over the top right corner. A card cannot be selectable and a link at the same time.

View Code

<script>
  let selected = $state(false);
</script>

<Card selectable showFloatingAction bind:selected onSelectionChange={(id, selected) => console.log(id, selected)}>
  <CardHeader title="Selectable card" description={selected ? 'Selected' : 'Not selected'} />
</Card>

Selectable card

Not selected

Header

The header takes a title, and optionally an image, a description and an action. A string title renders inside a heading; a snippet or a component receives the id the floating checkbox is labelled by. The action is not available on selectable cards.

View Code

{#snippet title(attrs)}
  <h4 class="body" {...attrs}><b>FluentUI Svelte</b> mentioned you</h4>
{/snippet}

{#snippet action()}
  <Button appearance="subtle" aria-label="More actions"><MoreHorizontalRegular width="1em" height="1em" /></Button>
{/snippet}

<Card>
  <CardHeader image="/logo.png" {title} description="5h ago · About us - Overview" {action} />
</Card>

FluentUI Svelte mentioned you

5h ago · About us - Overview

Preview

The preview holds the media of the card and rounds the corners it sits against. The logoSrc prop overlays a logo on the bottom left corner.

View Code

<Card orientation="vertical">
  <CardPreview logoSrc="/logo.png">
    <img src="/preview.png" alt="Preview" />
  </CardPreview>
</Card>

Footer

The footer renders the actions of the card at the bottom, spread across the available width.

View Code

{#snippet action()}
  <Button>Like</Button>
  <Button appearance="standard">Share</Button>
{/snippet}

<Card orientation="vertical">
  <CardHeader title="FluentUI Svelte" description="5h ago · About us - Overview" />
  <CardFooter {action} />
</Card>

FluentUI Svelte

5h ago · About us - Overview

Component Props (Card)

Name	Type	Default	Description
`ref` bindable	`CardElementDOMType[Tag]`		The DOM reference of the card element.
`as`	`'div'` \| `'article'` \| `'section'` \| `'a'`	`'div'`	The DOM element to render.
`orientation`	`'horizontal'` \| `'vertical'`	`'horizontal'`	The axis the card lays its parts out on.
`selectable`	`boolean`	`false`	Lets the user select the card by clicking anywhere on it.
`showFloatingAction`	`boolean`	`false`	Floats the selection checkbox over the top right corner of the card.
`id`	`string`		The id of the card element. Falls back to a generated one.
`selected` bindable	`boolean`	`false`	Whether the card is selected. Only available on selectable cards.
`disabled`	`boolean`	`false`	Disables the user interaction.
`appearance`	`'filled'` \| `'outlined'` \| `'subtle'`	`'filled'`	A card can have its background and borders styled for greater emphasis or to be subtle.
`onSelectionChange`	`(id: string, selected: boolean) => void`		Called with the id of the card whenever its selection changes.
HTML Attributes

Component Props (CardPreview)

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement`		The DOM reference of the preview element.
`logoSrc`	`string`		The URL of the logo overlaid on the bottom left corner of the preview.
`logoAlt`	`string`	`''`	The alternative text of the logo. Empty by default, which marks the logo as decorative.
`children`	`Snippet`		The media to preview, usually an image.
`HTMLAttributes<HTMLDivElement>` without `children`

Component Props (CardHeader)

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement`		The DOM reference of the header element.
`title`	`Snippet` \| `Component` \| `string`		The title of the card. A snippet or a component receives the id the floating checkbox is labelled by.
`image`	`Snippet` \| `Component` \| `string`		The image rendered before the title. A string is used as the `src` of an `<img>`.
`imageAlt`	`string`	`''`	The alternative text of a string image. Empty by default, which marks the image as decorative.
`description`	`Snippet` \| `Component` \| `string`		A second line of text below the title.
`action`	`Snippet` \| `Component`		The action rendered at the end of the header. Not available on selectable cards.
`HTMLAttributes<HTMLDivElement>` without `children`, `title`

Component Props (CardFooter)

Name	Type	Description
`ref` bindable	`HTMLDivElement`	The DOM reference of the footer element.
`action`	`Snippet` \| `Component`	The actions rendered inside the footer. Not available on selectable cards.
`HTMLAttributes<HTMLDivElement>` without `children`