Skip to content
Mika Berglund edited this page Feb 28, 2020 · 2 revisions

Card Component

The Card component is a flexible container with lots of variants.

Inheritance

Card : BootstrapComponentBase

Parameters

Name Type Description
BodyTemplate RenderFragment Allows you to customize the body of the Card. The body contains the Title, Subtitle, Text and Links.
Footer string Specifies a footer for the Card.
FooterTemplate RenderFragment<string> Allows you to customize the rendering of the footer. Consider also using the CardFooter component when customizing the footer.
Header string The header of the Card.
HeaderTemplate RenderFragment<string> Allows you to customize how the header is rendered. The context of the template is a string contining the value specified in Header.
ImagePosition CardImagePosition Specifies how the image is positioned in the card.
ImageUrl string The URL, either absolute or relative, to the image to show in the Card. The image is automatically scaled to fit into the card.
ImageTemplate RenderFragment<string> Allows you to customize how the image is rendered. The context of the template is a string containing the URL specified in ImageUrl. Also consider using the CardImage component.
Links IEnumerable<ILink> A collection of links to show in the card. Each link can be customized by specifying a template on LinkTemplate.
LinkTemplate RenderFragment<ILink> Allows you to customize how links are displayed in the card. The context for the template is the ILink implementation that represents the link to display by the template.
LinkSectionTemplate RenderFragment<IEnumerable<ILink>> Allows you to customize how the links section is rendered in the Card.
Subtitle string The subtitle for the card.
SubtitleTemplate RenderFragment<string> Allows you to customize how the subitle is rendered. The context for the template is a string containing the subtitle specified on the Subtitle property.
Text string Defines the text to be shown in the Card. Each line in the text will be rendered as a separate Paragraph.
TextTemplate RenderFragment<string> Allows you to customize how the text is rendered. The context for the template is a string containing the text specified in Text.
Title string The title of the Card.
TitleTemplate RenderFragment<string> Allows you to customize how the title is rendered. The context for the template is a string containing the title specified in Title. Consider also using the CardTitle component.

Related Components

The following components are typically used with a Card.

Examples

These code samples show you how you use the Card component.

Basic Cards

With a few parameters you get up and running with cards.

@code {
    // Create a collection of links to be used
    // on cards.
    IEnumerable<ILink> links = new[]
    {
        new Link { Text = "Cards", Url = "cards" },
        new Link { Text = "Alerts", Url = "alerts" },
        new Link { Text = "Modals", Url = "modals" },
    }
}

<Card Title="Simple Card" Subtitle="How to use the Card component" Text="This is a sample of a very simple usage of the Card component." />

<Card Title="Simple Card" Subtitle="Sample card usage" Text="This is a simple card with a few links added to the bottom of the card." Links="this.links" />

<Card Title="Link Card" Text="Cards are stretched link containers by default, so the entire card will be a link.">
    <LinkSectionTemplate>
        <Anchor IsStretched="true" Url="./" OpenInNewTab="true">Click me!</Anchor>
    </LinkSectionTemplate>
</Card>

Using Images

The sample code below shows you how you can add images to your cards.

@code {
    string imageUrl = "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=640";
}

<Card Title="Card with Image" Text="This card shows how to use images with cards." ImageUrl="@imageUrl" />

<Card Title="Card with Image" Text="This card shows how to set the image at the bottom of the card." ImageUrl="@imageUrl" ImagePosition="CardImagePosition.Bottom" />

<Card TextColor="NamedColor.White" BackgroundColor="NamedColor.Dark" Title="Image Overlay" Text="This card demonstrates how to use overlays on an image." ImageUrl="@imageUrl" ImagePosition="CardImagePosition.Overlay"></Card>

Customizing with Templates

Shows you how to use the various template parameters for more advanced customization of cards.

<Card Header="Another Card" Text="Here is a card with custom content with the help of template parameters.">
    <HeaderTemplate>
        <CardHeader>
            <Heading TextColor="NamedColor.Success" Level="HeadingLevel.H1">@context</Heading>
        </CardHeader>
    </HeaderTemplate>
     <TitleTemplate>
        <Heading Level="HeadingLevel.H3" class="card-title" TextColor="NamedColor.Primary"><b>Custom Titles</b></Heading>
    </TitleTemplate>
    <SubtitleTemplate>
        <Heading Level="HeadingLevel.H4" class="card-subtitle" TextColor="NamedColor.Secondary"><em>Custom subtitle</em></Heading>
    </SubtitleTemplate>
</Card>

<Card Header="Custom Body">
    <Blockquote>
        <p>People often say that motivation doesn't last. Well, neither does bathing &mdash; that's why we recommend it daily.</p>
        <footer class="blockquote-footer">Zig Ziglar</footer>
    </Blockquote>
</Card>

Text Alignment

The text in the cards can be aligned.

<Card TextAlignment="TextAlignment.Left" Title="Text Alignment, Left" Text="This card demonstrates how to align text to the left." />

<Card TextAlignment="TextAlignment.Center" Title="Text Alignment, Center" Text="This card demonstrates how to center align text." />

<Card TextAlignment="TextAlignment.Right" Title="Text Alignment, Right" Text="This card demonstrates how to align text to the right." />

Colouring

Cards can be coloured too.

<Card BackgroundColor="NamedColor.Primary" TextColor="NamedColor.White" Title="Primary background" />

<Card BorderColor="NamedColor.Danger" Title="Danger border" />

Card Groups

Card groups are useful if you want to make the cards align better. For instance, the header and footer of the cards in a group will align automatically.

<CardGroup>
    <Card Title="Card title #1" Text="Short text."></Card>
    <Card Title="Card title #2" Text="A bit longer text, just to fill up the space more than in the previous card. This is to demonstrate how cards align in a group." Footer="Footer #2"></Card>
    <Card Title="Card title #3" Footer="Footer #3"></Card>
</CardGroup>

Card Decks

Card decks make cards align just as in groups, but they are not attached to oneanother.

<CardGroup Type="CardGroupType.Deck">
    <!-- Put your cards here. -->
</CardGroup>

Card Columns

Cards can be arranged in columns too. Cards in columns are ordered from top to bottom and left to right. The default column count is 3, but you can change the number by customizing the Bootstrap CSS. Consult the documentation for details.

<CardGroup Type="CardGroupType.Columns">
    <!-- Put your cards here. -->
</CardGroup>
You can’t perform that action at this time.