Card

Cards provide a flexible content container that you can use to display a variety of content using contextual background colors, headers and footers.

Basic Example

By default, cards fill in the full width of their parent element, however this can be customized via styling. Cards also support a large variety of content including images, links, text and more. Make sure to check out all the examples below.

Card header

Lorem Ipsum

Lorem ipsum dolor sit amet.

Card footer

import React from "react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardImg,
  CardBody,
  CardFooter,
  Button
} from "shards-react";

export default function BasicCardExample() {
  return (
    <Card style={{ maxWidth: "300px" }}>
      <CardHeader>Card header</CardHeader>
      <CardImg src="https://place-hold.it/300x200" />
      <CardBody>
        <CardTitle>Lorem Ipsum</CardTitle>
        <p>Lorem ipsum dolor sit amet.</p>
        <Button>Read more &rarr;</Button>
      </CardBody>
      <CardFooter>Card footer</CardFooter>
    </Card>
  );
}

Card Body

The core building block of a card is the CardBody. You can use it whenever you'd like to add a padded section within a card.

Nunc quis nisl ac justo elementum sagittis in quis justo.

import React from 'react'
import { Card, CardBody } from 'shards-react'

export default function CardBodyExample() {
  return (
    <Card>
      <CardBody>
        Nunc quis nisl ac justo elementum sagittis in quis justo.
      </CardBody>
    </Card>
  )
}

Card Body Title and Subtitle

You can display a title and subtitle for your card using the CardTitle and CardSubtitle components.

Card Title

Card subtitle

Nunc quis nisl ac justo elementum sagittis in quis justo.

import React from "react";
import { Card, CardBody, CardTitle, CardSubtitle } from "shards-react";

export default function CardBodyTitleSubtitleExample() {
  return (
    <Card>
      <CardBody>
        <CardTitle>Card Title</CardTitle>
        <CardSubtitle>Card subtitle</CardSubtitle>
        Nunc quis nisl ac justo elementum sagittis in quis justo.
      </CardBody>
    </Card>
  );
}

Card Image

Using the CardImg component you can place a responsive image either on top of bottom of the card using the top or bottom props.

This is the body of the card.

import React from "react";
import { Container, Row, Col, Card, CardBody, CardImg } from "shards-react";

export default function CardBodyExample() {
  return (
    <Container>
      <Row>
        <Col>
          <Card>
            <CardImg top src="https://place-hold.it/300x200" />
            <CardBody>
              <p>This is the body of the card.</p>
            </CardBody>
          </Card>
        </Col>

        <Col>
          <Card>
            <CardBody>
              <p>This is the body of the card.</p>
            </CardBody>
            <CardImg bottom src="https://place-hold.it/300x200" />
          </Card>
        </Col>
      </Row>
    </Container>
  );
}

Props

The following props are available for the Card component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
theme	The theme color.	`String`	-	No
outline	Whether it is outline, or not.	`Bool`	-	No
tag	The component tag.	`FuncString`	`"div"`	No
small	Whether the card is small, or not.	`Bool`	-	No
innerRef	The inner ref.	`StringObjectFunc`	-	No

Subcomponents

The following subcomponents are available for the Card component.

<CardBody/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
children	The children nodes.	`Array[Node]Node`	-	No
tag	The component tag.	`FuncString`	`"div"`	No

<CardColumns/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The component tag type.	`FuncString`	`"div"`	No

<CardDeck/>

Prop	Description	Type	Default	Required
tag	The component tag type.	`FuncString`	`"div"`	No
className	The class name.	`String`	-	No

<CardFooter/>

Prop	Description	Type	Default	Required
tag	The component tag type.	`FuncString`	`"div"`	No
className	The class name.	`String`	-	No

<CardGroup/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The component tag type.	`FuncString`	`"div"`	No

<CardHeader/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The component tag type.	`FuncString`	`"div"`	No

<CardImg/>

Prop	Description	Type	Default	Required
top	Whether the image is positioned at the top of the card, or not.	`Bool`	-	No
bottom	Whether the image is positioned at the bottom of the card, or not.	`Bool`	-	No
className	The class name.	`String`	-	No
tag	The component's tag type.	`FuncString`	`"img"`	No

<CardImgOverlay/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The component's tag type.	`FuncString`	`"div"`	No

<CardLink/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The component's tag type.	`FuncString`	`"a"`	No
innerRef	The inner ref.	`ObjectFuncString`	-	No

<CardSubtitle/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The component's tag type.	`FuncString`	`"h6"`	No

<CardText/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The tag type.	`FuncString`	`"p"`	No

<CardTitle/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
tag	The component's tag type.	`FuncString`	`"h5"`	No