Card

  • Article

fluent-card

The fluent-card is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.

Setup

import {
    provideFluentDesignSystem,
    fluentCard
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentCard()
    );

Example

FluentCard

The <FluentCard> component is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.

<FluentCard> wraps the <fluent-card> element, a web component implementation of a card leveraging the Fluent UI design system.

Usage

@using Microsoft.Fast.Components.FluentUI
<style>
    fluent-card {
        --card-width: 500px;
        --card-height: auto;
    }

    .card-padding {
        padding: 20px;
    }
</style>

<FluentCard class="card-padding">
    <FluentSkeleton style="border-radius: 4px; width: 50px; height: 50px;" Shape="Shape.Circle"></FluentSkeleton>
    <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect"></FluentSkeleton>
    <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect"></FluentSkeleton>
    <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect"></FluentSkeleton>
</FluentCard>

Example

See the component in action with implementation examples at the Blazor demo site.