Card

Anatomy

Card, card header, card body, card footer. Cards are raised off the surface and must be bordered and contain drop shadow.

Variants

Elevated

<div class="card shadow-sm rounded-3">
  <div class="card-body">
    body
  </div>
</div>

<BCard class="shadow-sm rounded-3">
  body
</BCard>

Filled

More details about Panel can be reviewed in the corresponding documentation.

<div class="card border-0 bg-body-tertiary rounded-3">
  <div class="card-body">
    body
  </div>
</div>

<BCard class="bg-body-tertiary rounded-3" border-variant="0">
  body
</BCard>

Options

Header

<div class="card shadow-sm rounded-3">
  <div class="bg-transparent card-header">
    header
  </div>
  <div class="card-body">
    body
  </div>
</div>

<BCard class="shadow-sm rounded-3" header-bg-variant="transparent">
  <template #header>
    header
  </template>
  body
</BCard>

Footer

<div class="card">
  <div class="bg-transparent card-header">
    header
  </div>
  <div class="card-body">
    body
  </div>
</div>

<BCard header-bg-variant="transparent">
  asdfasdfasdf
  <template #footer>
    footer
  </template>
</BCard>

Usage

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati facilis, ipsum dignissimos quibusdam consectetur dolores soluta nemo placeat totam dolorem suscipit est sunt eum, debitis exercitationem voluptate ducimus repellat necessitatibus?

Accessibility

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati facilis, ipsum dignissimos quibusdam consectetur dolores soluta nemo placeat totam dolorem suscipit est sunt eum, debitis exercitationem voluptate ducimus repellat necessitatibus?

Implementation

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati facilis, ipsum dignissimos quibusdam consectetur dolores soluta nemo placeat totam dolorem suscipit est sunt eum, debitis exercitationem voluptate ducimus repellat necessitatibus?

Body

Body + Header

Body + Header Action

this is a card w/ html as heading action

Body + Heading Tabs

asdkfjalskdj