Card component

Structure

The card component comprises several elements that you can mix and match:

  • <Card>
    • <CardHeader>
    • <CardImage>
    • <CardBody>
      • <CardTitle>
      • <CardSubtitle>
      • <CardText>
    • <CardFooter>
  • <CardGroup>

Example

<Card>
    <CardImage Source="/assets/images/gallery/9.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>

Attributes

Card

Name Type Default Description
IsWhiteText boolean false Sets the white text when using the darker background.
Background Background None Sets the bar background color.

CardTitle

Name Type Default Description
Size int? null Number from 1 to 6 that defines the title size where the smaller number means larger text.

CardSubtitle

Name Type Default Description
Size int 6 Number from 1 to 6 that defines the subtitle size where the smaller number means larger text.
Name Type Default Description
Source string null Link url.
Alt string null Alternative link text.

CardImage

Name Type Default Description
Source string null Image url.
Alt string null Alternative image text.