Skip to content

Card components #14

@eddywashere

Description

@eddywashere

Components:

  • Card
    • inverse - boolean - apply card inverse class
    • color - string - apply card color classes
    • block - boolean - apply card-block class
    • outline - boolean - apply card-outline-* class
  • CardGroup
  • CardDeck
  • CardColumns
  • CardImg
    • top - boolean - apply card-img-top class
    • bottom - boolean - apply card-img-bottom class
    • alt
    • src
  • CardImgOverlay
  • CardBlock
  • CardTitle
  • CardSubTitle
  • CardText
  • CardHeader
  • CardFooter

Example:

<Card>
  <CardHeader>Card header</CardHeader>
  <CardImg top src="path/img.png" alt="Card image cap">
  <CardImgOverlay>{cardBlockContent}</CardImgOverlay>
  <CardBlock>
    <CardTitle>Card title</CardTitle>
    <CardSubTitle>Card subtitle</CardSubTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBlock>
  <CardFooter>Card footer</CardFooter>
</Card>

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions