Cards

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 None
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 None
TextColor Sets the text color. TextColor None
TextOverflow Determines how the text will behave when it is larger than a parent container. TextOverflow None
TextTransform Sets the text transformation. TextTransform None
TextWeight Sets the text weight. TextWeight None

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 None
TextColor Sets the text color. TextColor None
TextOverflow Determines how the text will behave when it is larger than a parent container. TextOverflow None
TextTransform Sets the text transformation. TextTransform None
TextWeight Sets the text weight. TextWeight None

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 None
TextColor Sets the text color. TextColor None
TextOverflow Determines how the text will behave when it is larger than a parent container. TextOverflow None
TextTransform Sets the text transformation. TextTransform None
TextWeight Sets the text weight. TextWeight None

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