CardStatus

Basic Usage

CardStatus conveys the current status of Card. It is available in a few variants.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.

Unavailable

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.

Available

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.

Warning

<DemoLayout>
  <Card>
    <CardTitle>Card Title</CardTitle>
    <CardBlock>{loremIpsum}</CardBlock>
    <CardStatus variant="danger">Unavailable</CardStatus>
  </Card>
  <Card>
    <CardTitle>Card Title</CardTitle>
    <CardBlock>{loremIpsum}</CardBlock>
    <CardStatus variant="success">Available</CardStatus>
  </Card>
  <Card>
    <CardTitle>Card Title</CardTitle>
    <CardBlock>{loremIpsum}</CardBlock>
    <CardStatus variant="warning">Warning</CardStatus>
  </Card>
</DemoLayout>