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>the main container.<CardHeader>optional header within a card.<CardImage>optional image within a card.<CardBody>The building block of a card.<CardTitle>required title within a card.<CardSubtitle>optional subtitle within a card.<CardText>optional text within a card.
<CardFooter>optional footer within a card.
<CardGroup>groups cards together.<CardDeck>groups cards together with equal width and height.
Examples
Default card
Use the following simple card component with a title and description.Card title
<Card> <CardBody> <CardTitle Size="HeadingSize.Is3"> 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
<Card> <CardBody> <CardTitle Size="HeadingSize.Is3"> 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.
Card title
<Card> <CardImage Source="/img/gallery/2.jpg" Alt="Placeholder image" /> <CardBody> <CardTitle Size="HeadingSize.Is3"> 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 title 1
Card title 2
Card title 3
<CardDeck> <Card> <CardImage Source="/img/gallery/2.jpg" Alt="Card image cap 3"></CardImage> <CardBody> <CardTitle Size="HeadingSize.Is5">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="HeadingSize.Is5">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="HeadingSize.Is5">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>
Styling cards
Use Classes or Styles to target the wrapper element rendered for cards inside a CardDeck.
For advanced styling of card wrappers and inner elements, see the Styling guide.
Styled wrapper
Inner styling
Self style applies to the main card element, while Wrapper targets its container.
<CardDeck> <Card Styles='@(new CardStyles { Self = "border: 2px dashed #0b7285; border-radius: 0.5rem;", Wrapper = "padding: 0.75rem; background: #f8f9fa;" })'> <CardBody> <CardTitle Size="HeadingSize.Is5">Styled wrapper</CardTitle> <CardText> Use the wrapper styles to add spacing or background around the card when it is rendered inside a deck. </CardText> </CardBody> </Card> <Card Styles='@(new CardStyles { Self = "border: 2px dashed #2f9e44; border-radius: 0.5rem;", Wrapper = "padding: 0.75rem; background: #ebfbee;" })'> <CardBody> <CardTitle Size="HeadingSize.Is5">Inner styling</CardTitle> <CardText> The <Code>Self</Code> style applies to the main card element, while <Code>Wrapper</Code> targets its container. </CardText> </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
<Card Background="Background.Success" WhiteText> <CardBody> <CardTitle Size="HeadingSize.Is3"> 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>
Best Practices
Clear Purpose
Each card should focus on one subject and establish a clear order between its title, supporting content, and actions. Card collections should remain responsive and readable; do not remove essential information merely to force every card to the same height.
Interactive Cards
Avoid placing several competing actions inside the same card. Make the primary action obvious, and use a stretched link only when the entire card represents one destination. Informative images need meaningful alternative text, while purely decorative images should use an empty alternative.
API
See the API reference for the parameters, events, methods, and related types available to the components covered on this page.