Blazorise Card component
Group related information and actions in a flexible content container.
Use the Card component for summaries, product previews, profiles, and other content that benefits from a clear visual boundary.
Structure
A Card can combine a header, image, body, and footer. Add the parts your content needs.
<Card>Contains related content and actions.<CardHeader>An optional header.<CardImage>An optional image.<CardBody>The main content area.<CardTitle>A title for the content.<CardSubtitle>An optional subtitle.<CardText>Descriptive text.
<CardFooter>An optional footer for actions or supporting information.
Wrap multiple cards in CardGroup to join them together, or CardDeck to arrange them 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" Text="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" Text="Card image cap 3" /> <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" Text="Card image cap 9" /> <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" Text="Card image cap 12" /> <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.