Blazorise Card component

Blazorise cards provide a flexible and extensible content container with multiple variants and options.

The <Card> component is a versatile component that can be used for anything from a panel to a static image. The card component has numerous helper components to make markup as easy as possible.

  • <Card>
    • <CardHeader>
    • <CardImage>
    • <CardBody>
      • <CardTitle>
      • <CardSubtitle>
      • <CardText>
    • <CardFooter>
  • <CardGroup>
  • <CardDeck>

Default card

Use the following simple card component with a title and description.

Card title

This is some text within a card body. Jelly lemon drops tiramisu chocolate cake cotton candy soufflé oat cake sweet roll. Sugar plum marzipan dragée topping cheesecake chocolate bar. Danish muffin icing donut. 
<Card>
    <CardBody>
        <CardTitle Size="3">
            Card title
        </CardTitle>
        <CardText>
            This is some text within a card body. Jelly lemon drops tiramisu chocolate cake cotton candy soufflé oat cake sweet roll. Sugar plum marzipan dragée topping cheesecake chocolate bar. Danish muffin icing donut.
        </CardText>
    </CardBody>
</Card>

Card with button

Use the following example of a card element if you also want to have an action button.

Card title

This is some text within a card body. Jelly lemon drops tiramisu chocolate cake cotton candy soufflé oat cake sweet roll. Sugar plum marzipan dragée topping cheesecake chocolate bar. Danish muffin icing donut. 
<Card>
    <CardBody>
        <CardTitle Size="3">
            Card title
        </CardTitle>
        <CardText>
            This is some text within a card body. Jelly lemon drops tiramisu chocolate cake cotton candy soufflé oat cake sweet roll. Sugar plum marzipan dragée topping cheesecake chocolate bar. Danish muffin icing donut.
        </CardText>
        <Button Color="Color.Primary" Margin="Margin.Is2.FromTop">
            Read more <Icon Name="IconName.ArrowRight" />
        </Button>
    </CardBody>
</Card>

Card with image

You can use the following example of a card element with an image for blog posts, user cards, and many more.
Placeholder image

Card title

This is some text within a card body. Jelly lemon drops tiramisu chocolate cake cotton candy soufflé oat cake sweet roll. Sugar plum marzipan dragée topping cheesecake chocolate bar. Danish muffin icing donut. 
<Card>
    <CardImage Source="/img/gallery/2.jpg" Alt="Placeholder image" />
    <CardBody>
        <CardTitle Size="3">
            Card title
        </CardTitle>
        <CardText>
            This is some text within a card body. Jelly lemon drops tiramisu chocolate cake cotton candy soufflé oat cake sweet roll. Sugar plum marzipan dragée topping cheesecake chocolate bar. Danish muffin icing donut.
        </CardText>
        <Button Color="Color.Primary" Margin="Margin.Is2.FromTop">
            Read more <Icon Name="IconName.ArrowRight" />
        </Button>
    </CardBody>
</Card>

Card deck

A set of equal width and height cards that aren’t attached to one another.
Card image cap 3
Card title 1
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card image cap 9
Card title 2
This card has supporting text below as a natural lead-in to additional content.
Card image cap 12
Card title 3
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. 
<CardDeck>
    <Card>
        <CardImage Source="/img/gallery/2.jpg" Alt="Card image cap 3"></CardImage>
        <CardBody>
            <CardTitle Size="5">Card title 1</CardTitle>
            <CardText>
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
            </CardText>
            <Button Color="Color.Primary">Button</Button>
        </CardBody>
    </Card>
    <Card>
        <CardImage Source="/img/gallery/3.jpg" Alt="Card image cap 9"></CardImage>
        <CardBody>
            <CardTitle Size="5">Card title 2</CardTitle>
            <CardText>
                This card has supporting text below as a natural lead-in to additional content.
            </CardText>
            <Button Color="Color.Primary">Button</Button>
        </CardBody>
    </Card>
    <Card>
        <CardImage Source="/img/gallery/4.jpg" Alt="Card image cap 12"></CardImage>
        <CardBody>
            <CardTitle Size="5">Card title 3</CardTitle>
            <CardText>
                This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
            </CardText>
            <Button Color="Color.Primary">Button</Button>
        </CardBody>
    </Card>
</CardDeck>

Background color

If you want to make the card standout you can set its background color.

Please note, depending on the used background color you might need to adjust the text color. This can be done by setting the WhiteText parameters.

Card title

With supporting text below as a natural lead-in to additional content. 
<Card Background="Background.Success" WhiteText>
    <CardBody>
        <CardTitle Size="3">
            Card title
        </CardTitle>
        <CardText>
            With supporting text below as a natural lead-in to additional content.
        </CardText>
        <Button Color="Color.Primary" Margin="Margin.Is2.FromTop">
            Read more <Icon Name="IconName.ArrowRight" />
        </Button>
    </CardBody>
</Card>

API

Attributes

Card

Name Description Type Default
Background Sets the bar background color. Background Default
WhiteText Sets the white text when using the darker background. bool false

CardText

Name Description Type Default
Italic Italicize text if set to true. bool false
TextAlignment Sets the text alignment. TextAlignment Default
TextColor Sets the text color. TextColor Default
TextOverflow Determines how the text will behave when it is larger than a parent container. TextOverflow Default
TextTransform Sets the text transformation. TextTransform Default
TextWeight Sets the text weight. TextWeight Default

CardTitle

Name Description Type Default
Italic Italicize text if set to true. bool false
Size Number from 1 to 6 that defines the title size where the smaller number means larger text. int? null
TextAlignment Sets the text alignment. TextAlignment Default
TextColor Sets the text color. TextColor Default
TextOverflow Determines how the text will behave when it is larger than a parent container. TextOverflow Default
TextTransform Sets the text transformation. TextTransform Default
TextWeight Sets the text weight. TextWeight Default

CardSubtitle

Name Description Type Default
Italic Italicize text if set to true. bool false
Size Number from 1 to 6 that defines the subtitle size where the smaller number means larger text. int 6
TextAlignment Sets the text alignment. TextAlignment Default
TextColor Sets the text color. TextColor Default
TextOverflow Determines how the text will behave when it is larger than a parent container. TextOverflow Default
TextTransform Sets the text transformation. TextTransform Default
TextWeight Sets the text weight. TextWeight Default

CardLink

Name Description Type Default
Alt Alternative link text. string null
Source Link URL. string null

CardImage

Name Description Type Default
Alt Alternative image text. string null
Source Image URL. string null
On this page