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

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 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 title 2

This card has supporting text below as a natural lead-in to additional content.

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`