Card:

```jsx 
const Lib = require('../index');
   ;<div>
       <Card>
         <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
         <Lib.CardBody>
           <Lib.CardTitle>Card title</Lib.CardTitle>
           <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
           <Lib.CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</Lib.CardText>
         </Lib.CardBody>
       </Card>
     </div>
```

Content Types

```jsx 
const Lib = require('../index');
<div>
      <Card>
        <Lib.CardBody>
          <Lib.CardTitle>Card title</Lib.CardTitle>
          <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
        </Lib.CardBody>
        <img width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
        <Lib.CardBody>
          <Lib.CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</Lib.CardText>
          <Lib.CardLink href="#">Card Link</Lib.CardLink>
          <Lib.CardLink href="#">Another Link</Lib.CardLink>
        </Lib.CardBody>
      </Card>
    </div>
```



Text alignment

```jsx 
const Lib = require('../index');
  <div>
      <Card body>
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button>Go somewhere</Lib.Button>
      </Card>
      <Card body className="text-center">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button>Go somewhere</Lib.Button>
      </Card>
      <Card body className="text-right">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button>Go somewhere</Lib.Button>
      </Card>
    </div>
```

Header and Footer


```jsx 
const Lib = require('../index');
<div>
      <Card>
        <Lib.CardHeader>Header</Lib.CardHeader>
        <Lib.CardBody>
          <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
          <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
          <Lib.Button>Go somewhere</Lib.Button>
        </Lib.CardBody>
        <Lib.CardFooter>Footer</Lib.CardFooter>
      </Card>

      <Card>
        <Lib.CardHeader tag="h3">Featured</Lib.CardHeader>
        <Lib.CardBody>
          <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
          <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
          <Lib.Button>Go somewhere</Lib.Button>
        </Lib.CardBody>
        <Lib.CardFooter className="text-muted">Footer</Lib.CardFooter>
      </Card>
    </div>
```

Image caps

```jsx 
const Lib = require('../index');
  <div>
      <Card>
        <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
        <Lib.CardBody>
          <Lib.CardTitle>Card Title</Lib.CardTitle>
          <Lib.CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</Lib.CardText>
          <Lib.CardText>
            <small className="text-muted">Last updated 3 mins ago</small>
          </Lib.CardText>
        </Lib.CardBody>
      </Card>
      <Card>
        <Lib.CardBody>
          <Lib.CardTitle>Card Title</Lib.CardTitle>
          <Lib.CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</Lib.CardText>
          <Lib.CardText>
            <small className="text-muted">Last updated 3 mins ago</small>
          </Lib.CardText>
        </Lib.CardBody>
        <Lib.CardImg bottom width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap" />
      </Card>
    </div>
```


Image overlays


```jsx 
const Lib = require('../index');
    <div>
      <Card inverse>
        <Lib.CardImg width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97270&w=318&h=270&bg=333333&txtclr=666666" alt="Card image cap" />
        <Lib.CardImgOverlay>
          <Lib.CardTitle>Card Title</Lib.CardTitle>
          <Lib.CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</Lib.CardText>
          <Lib.CardText>
            <small className="text-muted">Last updated 3 mins ago</small>
          </Lib.CardText>
        </Lib.CardImgOverlay>
      </Card>
    </div>
```

Background variants

```jsx 
const Lib = require('../index');
 <div>
      <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button>Button</Lib.Button>
      </Card>
      <Card body inverse color="primary">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
      <Card body inverse color="success">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
      <Card body inverse color="info">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
      <Card body inverse color="warning">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
      <Card body inverse color="danger">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
    </div>
```


Outline variants

```jsx 
const Lib = require('../index');
 <div>
      <Card body outline color="secondary">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button>Button</Lib.Button>
      </Card>
      <Card body outline color="primary">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
      <Card body outline color="success">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
      <Card body outline color="info">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
      <Card body outline color="warning">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
      <Card body outline color="danger">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
    </div>
```


Groups

```jsx 
const Lib = require('../index');
 <Lib.CardGroup>
      <Card>
        <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
        <Lib.CardBody>
          <Lib.CardTitle>Card title</Lib.CardTitle>
          <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
          <Lib.CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</Lib.CardText>
          <Lib.Button>Button</Lib.Button>
        </Lib.CardBody>
      </Card>
      <Card>
        <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
        <Lib.CardBody>
          <Lib.CardTitle>Card title</Lib.CardTitle>
          <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
          <Lib.CardText>This card has supporting text below as a natural lead-in to additional content.</Lib.CardText>
          <Lib.Button>Button</Lib.Button>
        </Lib.CardBody>
      </Card>
      <Card>
        <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
        <Lib.CardBody>
          <Lib.CardTitle>Card title</Lib.CardTitle>
          <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
          <Lib.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.</Lib.CardText>
          <Lib.Button>Button</Lib.Button>
        </Lib.CardBody>
      </Card>
    </Lib.CardGroup>
```


Decks

```jsx 
const Lib = require('../index');
    <Lib.CardDeck>
      <Card>
        <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
        <Lib.CardBody>
          <Lib.CardTitle>Card title</Lib.CardTitle>
          <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
          <Lib.CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</Lib.CardText>
          <Lib.Button>Button</Lib.Button>
        </Lib.CardBody>
      </Card>
      <Card>
        <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
        <Lib.CardBody>
          <Lib.CardTitle>Card title</Lib.CardTitle>
          <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
          <Lib.CardText>This card has supporting text below as a natural lead-in to additional content.</Lib.CardText>
          <Lib.Button>Button</Lib.Button>
        </Lib.CardBody>
      </Card>
      <Card>
        <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
        <Lib.CardBody>
          <Lib.CardTitle>Card title</Lib.CardTitle>
          <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
          <Lib.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.</Lib.CardText>
          <Lib.Button>Button</Lib.Button>
        </Lib.CardBody>
      </Card>
    </Lib.CardDeck>
```


Columns

```jsx 
const Lib = require('../index');
 ;<Lib.CardColumns>
      <Card>
        <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
        <Lib.CardBody>
          <Lib.CardTitle>Card title</Lib.CardTitle>
          <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
          <Lib.CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</Lib.CardText>
          <Lib.Button>Button</Lib.Button>
        </Lib.CardBody>
      </Card>
      <Card>
        <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
      </Card>
      <Card>
        <Lib.CardBody>
          <Lib.CardTitle>Card title</Lib.CardTitle>
          <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
          <Lib.CardText>This card has supporting text below as a natural lead-in to additional content.</Lib.CardText>
          <Lib.Button>Button</Lib.Button>
        </Lib.CardBody>
      </Card>
      <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button>Button</Lib.Button>
      </Card>
      <Card>
        <Lib.CardImg top width="100%" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=256%C3%97180&w=256&h=180" alt="Card image cap" />
        <Lib.CardBody>
          <Lib.CardTitle>Card title</Lib.CardTitle>
          <Lib.CardSubtitle>Card subtitle</Lib.CardSubtitle>
          <Lib.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.</Lib.CardText>
          <Lib.Button>Button</Lib.Button>
        </Lib.CardBody>
      </Card>
      <Card body inverse color="primary">
        <Lib.CardTitle>Special Title Treatment</Lib.CardTitle>
        <Lib.CardText>With supporting text below as a natural lead-in to additional content.</Lib.CardText>
        <Lib.Button color="secondary">Button</Lib.Button>
      </Card>
    </Lib.CardColumns>
```