Card

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.

• CardBody
• CardContent
• CardFooter
• CardGroup
• CardHeader
• CardImage
• CardLink
• CardSubtitle
• CardText
• CardTitle

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>