Card

Basic With Image

<c-bs-card>
  <c-bs-card-img src="https://placehold.net/600x400.png" alt="Card image" position="top" />
  <c-bs-card-body>
    <c-bs-card-title>Card title</c-bs-card-title>
    <c-bs-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</c-bs-card-text>
    <c-bs-button href="#">Go somewhere</c-bs-button>
  </c-bs-card-body>
</c-bs-card>

Preview:

Card image
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere 
<c-bs-card text_align="center">
  <c-bs-card-header>Featured</c-bs-card-header>
  <c-bs-card-body>
    <c-bs-card-title>Special title treatment</c-bs-card-title>
    <c-bs-card-text>With supporting text below as a natural lead-in to additional content.</c-bs-card-text>
    <a href="#" class="btn btn-primary" role="button">Go somewhere</a>
  </c-bs-card-body>
  <c-bs-card-footer>2 days ago</c-bs-card-footer>
</c-bs-card>

Preview:

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago

With Image Cap

<c-bs-card>
  <c-bs-card-img src="https://placehold.net/600x400.png" alt="Card image" position="top" />
  <c-bs-card-body>
    <c-bs-card-title>Card title</c-bs-card-title>
    <c-bs-card-text>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</c-bs-card-text>
    <c-bs-card-text>
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </c-bs-card-text>
  </c-bs-card-body>
</c-bs-card>

Preview:

Card image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Body Only

<c-bs-card>
  <c-bs-card-body>This is some text within a card body.</c-bs-card-body>
</c-bs-card>

Preview:

This is some text within a card body. 
<c-bs-card>
  <c-bs-card-body>
    <c-bs-card-title>Card title</c-bs-card-title>
    <c-bs-card-subtitle>Card subtitle</c-bs-card-subtitle>
    <c-bs-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</c-bs-card-text>
    <c-bs-card-link href="#">Card link</c-bs-card-link>
    <c-bs-card-link href="#">Another link</c-bs-card-link>
  </c-bs-card-body>
</c-bs-card>

Preview:

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

With Image Bottom

<c-bs-card>
  <c-bs-card-body>
    <c-bs-card-title>Card title</c-bs-card-title>
    <c-bs-card-text>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</c-bs-card-text>
    <c-bs-card-text>
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </c-bs-card-text>
  </c-bs-card-body>
  <c-bs-card-img src="https://placehold.net/600x400.png" alt="Card image" position="bottom" />
</c-bs-card>

Preview:

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image

Bg Primary

<c-bs-card bg="primary" c-attrs='{"class": "mb-3", "style": "max-width: 18rem;"}'>
  <c-bs-card-header>Header</c-bs-card-header>
  <c-bs-card-body>
    <c-bs-card-title>Primary card title</c-bs-card-title>
    <c-bs-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</c-bs-card-text>
  </c-bs-card-body>
</c-bs-card>

Preview:

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Bg Secondary

<c-bs-card bg="secondary" c-attrs='{"class": "mb-3", "style": "max-width: 18rem;"}'>
  <c-bs-card-header>Header</c-bs-card-header>
  <c-bs-card-body>
    <c-bs-card-title>Secondary card title</c-bs-card-title>
    <c-bs-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</c-bs-card-text>
  </c-bs-card-body>
</c-bs-card>

Preview:

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Bg Success

<c-bs-card bg="success" c-attrs='{"class": "mb-3", "style": "max-width: 18rem;"}'>
  <c-bs-card-header>Header</c-bs-card-header>
  <c-bs-card-body>
    <c-bs-card-title>Success card title</c-bs-card-title>
    <c-bs-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</c-bs-card-text>
  </c-bs-card-body>
</c-bs-card>

Preview:

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Bg Danger

<c-bs-card bg="danger" c-attrs='{"class": "mb-3", "style": "max-width: 18rem;"}'>
  <c-bs-card-header>Header</c-bs-card-header>
  <c-bs-card-body>
    <c-bs-card-title>Danger card title</c-bs-card-title>
    <c-bs-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</c-bs-card-text>
  </c-bs-card-body>
</c-bs-card>

Preview:

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Border Primary

<c-bs-card border="primary" c-attrs='{"class": "mb-3", "style": "max-width: 18rem;"}'>
  <c-bs-card-header>Header</c-bs-card-header>
  <c-bs-card-body>
    <c-bs-card-title>Primary card title</c-bs-card-title>
    <c-bs-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</c-bs-card-text>
  </c-bs-card-body>
</c-bs-card>

Preview:

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Text Align Center

<c-bs-card text_align="center" c-attrs='{"class": "mb-3", "style": "width: 18rem;"}'>
  <c-bs-card-body>
    <c-bs-card-title>Special title treatment</c-bs-card-title>
    <c-bs-card-text>With supporting text below as a natural lead-in to additional content.</c-bs-card-text>
    <c-bs-button href="#">Go somewhere</c-bs-button>
  </c-bs-card-body>
</c-bs-card>

Preview:

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Text Align End

<c-bs-card text_align="end">
  <c-bs-card-body>
    <c-bs-card-title>Special title treatment</c-bs-card-title>
    <c-bs-card-text>With supporting text below as a natural lead-in to additional content.</c-bs-card-text>
    <c-bs-button href="#">Go somewhere</c-bs-button>
  </c-bs-card-body>
</c-bs-card>

Preview:

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere