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>

Card

Simple card
Placeholder image
Card title
Some quick example text to build on the card title and make up the bulk of the card's content. 
<Card Margin="Margin.Is4.OnY">
    <CardImage Source="img/gallery/7.jpg" Alt="Placeholder image">
    </CardImage>
    <CardBody>
        <CardTitle Size="5">Card title</CardTitle>
        <CardText>
            Some quick example text to build on the card title and make up the bulk of the card's content.
        </CardText>
        <Button Color="Color.Primary">Button</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>

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