Card

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

How it works

A card is a flexible and extensible content container. It includes slots or components for header, body and footer.

With slots example

The x-card component has three slots: header, body and footer. Find below a basic example which show also how to pass props to each slot.

Card header

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

Card footer

Card header with class .fw-bold

Card body with class .bg-light.

Card footer with class .bg-white

<x-card>
  <x-slot name="header">Card header</x-slot>
  <x-slot name="body">
    Some quick example text to build on the card title and make up the bulk of
    the card's content
  </x-slot>
  <x-slot name="footer">Card footer</x-slot>
</x-card>

<!-- With props passed to slots -->

<x-card>
  <x-slot name="header" class="fw-bold">Card header with class <code>.fw-bold</code></x-slot>
  <x-slot name="body" class="bg-light">
    Card body with class <code>.bg-light</code>.
  </x-slot>
  <x-slot name="footer" class="bg-white">Card footer with class <code>.bg-white</code></x-slot>
</x-card>

<div class="card">
  <div class="card-header">
    Card header
  </div>

  <div class="card-body">
    Some quick example text to build on the card title and make up the bulk of the card's content
  </div>

  <div class="card-footer">
    Card footer
  </div>
</div>

<hr class="invisible">

<div class="card">
  <div class="card-header fw-bold">
    Card header with class <code>.fw-bold</code>
  </div>

  <div class="card-body bg-light">
    Card body with class <code>.bg-light</code>.
  </div>

  <div class="card-footer bg-white">
    Card footer with class <code>.bg-white</code>
  </div>
</div>

With components example

Sometimes you need more flexibility in your card content, or simple you prefer to use a different syntax (I am one of this). In this case you can use the components x-card.header, x-card.body and x-card.footer. If you are not using this components, you can disable them via config as explained here.

Card header

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

Card footer

<x-card>
  <x-card.header class="fw-bold">Card header</x-card.header>
  <x-card.body>
    Some quick example text to build on the card title and make up the bulk of the card's content.
  </x-card.body>
  <x-card.footer class="bg-white">Card footer</x-card.footer>
</x-card>

<div class="card">
  <div class="card-header fw-bold">
    Card header
  </div>

  <div class="card-body">
    Some quick example text to build on the card title and make up the bulk of the card's content.
  </div>

  <div class="card-footer bg-white">
    Card footer
  </div>
</div>

Using main slot example

If you need to add some content outside card body then you can add such content as direct child of x-card component like below example.

Card body content

<x-card class="w-50">
  <img src="https://picsum.photos/id/0/600/250" class="card-img-top">
  <x-slot name="body">Card body content</x-slot>
</x-card>

<div class="card w-50">
  <img src="https://picsum.photos/id/0/600/250"
       class="card-img-top">
  <div class="card-body">
    Card body content
  </div>
</div>

Card group example

Use x-card.group component to render cards as a single, attached element with equal width and height columns.

This is my card body

<x-card.group>
  <x-card>
    <img src="https://picsum.photos/id/0/600/250" class="card-img-top">
    <x-slot name="body">
      This is my card body
    </x-slot>
  </x-card>
  <x-card>
    <img src="https://picsum.photos/id/0/600/250" class="card-img-top">
    <x-slot name="body">
      This is my card body
    </x-slot>
  </x-card>
  <x-card>
    <img src="https://picsum.photos/id/0/600/250" class="card-img-top">
    <x-slot name="body">
      This is my card body
    </x-slot>
  </x-card>
</x-card.group>

<div class="card-group">
  <div class="card">
    <img src="https://picsum.photos/id/0/600/250"
         class="card-img-top">
    <div class="card-body">
      This is my card body
    </div>
  </div>

  <div class="card">
    <img src="https://picsum.photos/id/0/600/250"
         class="card-img-top">
    <div class="card-body">
      This is my card body
    </div>
  </div>

  <div class="card">
    <img src="https://picsum.photos/id/0/600/250"
         class="card-img-top">
    <div class="card-body">
      This is my card body
    </div>
  </div>
</div>