Cards are one of the components of Bootstrap that is used for storing flexible and extensible content in a container with multiple options and styling variants. Cards had replaced the old panels that were present in Bootstrap 3. It is a container where you need to store the contents that can be placed at the header, footer, and even along with various background colors. To add cards, you require markup and custom styling.  Additionally, Cards have sizing options and can be used at the time you need to display some contents.

Cards are a supportive element in Bootstrap 5, it can take in several forms of content like images, text, links, and a list of groups. In cards, a body can be built and inserted into a card with the method .card-body class. You can store titles, links, and images inside the card and add them near the tag. For instance, you can use .card-title along with <h> tags, and .card-links along with <a>. These elements can be added and aligned properly. 

For example,

<div class="card" style="height: 14em;">

  <div class="card-body">

    <h3 class="card-title">Card title</h3>

    <h4 class="card-subtile">Card subtitle</h4>

    <p class="card-text">Display the contents in paragraph </p>

    <a href="#" class="card-link">Adding a Card link</a>

    <a href="#" class="card-link">Added another link</a>

  </div>

</div>

In cards, you can even place images using the src along with .card-image at the top and adding texts below the image. A list of groups can be appended and included inside the card. 

For example,

<div class="card" style="height: 14em;">

  <div class="card-body">

    <h3 class="card-title">Card title</h3>

    <h4 class="card-subtile">Card subtitle</h4>

    <p class="card-text">Display the contents in paragraph </p>

    <a href="#" class="card-link">Adding a Card link</a>

    <a href="#" class="card-link">Added another link</a>

  </div>

</div>


  <ul class="list-group list-group-flush">

    <li class="list-group-item">item 1</li>

    <li class="list-group-item">item 2</li>

     </ul>

  <div class="card-body">

     <a href="#" class="card-link">Adding a Card link</a>

    <a href="#" class="card-link">Added another link</a>

  </div>

</div>

read moreBootstrap5 cardexamples