Card Components

The Cards set includes multiple designs like image cards, profile cards, action cards, and more. These cards are perfect for showcasing content in a clean, organized way. Each variant is responsive and easy to customize with your own images, text, and styles. If you are new to blox, follow our getting started guide to add blox to your project.

Default Card

Place your title here

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

<div class="card">
  <h3 class="card-title">Place your title here</h3>
  <p class="card-text">
    Some quick example text to build on the card title and make up
    the bulk of the card’s content.
  </p>
</div>

Copy

Card with button

Place your title here

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

Read more

<div class="card">
  <h3 class="card-title">Place your title here</h3>
  <p class="card-text">
    Some quick example text to build on the card title and make up
    the bulk of the card’s content.
  </p>
  <button class="btn btn-primary">Read more</button>
</div>

Copy

Card with link

Place your title here

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

Read more

<div class="card">
  <h3 class="card-title">Place your title here</h3>
  <p class="card-text">
    Some quick example text to build on the card title and make up
    the bulk of the card’s content.
  </p>
  <button class="btn btn-link">Read more</button>
</div>

Copy

Card with image

Place your title here

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

Read more

<div class="card">
  <img
    class="card-img-top"
    src="https://media.istockphoto.com/id/1022892932/photo/hand-holding-light-bulb-against-nature-on-green-leaf-with-icons-energy-sources-for-renewable.jpg?s=612x612&w=0&k=20&c=Z8Zwgtv5o2-umMAnMn_5H-ZE62GMSUzf7zG-gHE_3UM="
    alt="test-image"
    loading="async"
  />      
  <h3 class="card-title">Place your title here</h3>
  <p class="card-text">
    Some quick example text to build on the card title and make up
    the bulk of the card’s content.
  </p>
  <button class="btn btn-primary">Read more</button>
</div>

Copy

Image selector card

Select profile image

Upload

<div class="card card-img-selector">
  <h3 class="card-title">Select profile image</h3>
  <button class="selector-button">
    <img
      class="card-placeholder-img"
      src="https://static.vecteezy.com/system/resources/previews/010/011/935/non_2x/drag-and-drop-add-upload-photo-concept-illustration-flat-design-eps10-modern-graphic-element-for-landing-page-empty-state-ui-infographic-icon-vector.jpg"
      alt="test-image"
      loading="async"
    />
  </button>

  <button class="btn btn-primary">Upload</button>
</div>

Copy

Profile card

Your name here

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

Add to friend

<div class="card card-profile">
  <img
    class="card-img-top"
    src="https://l-ldesign.com.au/2016/wp-content/uploads/2020/01/profile-pic-katie-square.jpg"
    alt="test-image"
    loading="async"
  />
  <h3 class="card-title">Your name here</h3>
  <p class="card-text">
    Some quick example text to build on the card title and make up
    the bulk of the card’s content.
  </p>
  <button class="btn btn-primary">Add to friend</button>
</div>

Copy

Small Profile card

Your name here

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

Add to friend

<div class="card card-profile">
  <img
    class="card-img-top img-sm"
    src="https://l-ldesign.com.au/2016/wp-content/uploads/2020/01/profile-pic-katie-square.jpg"
    alt="test-image"
    loading="async"
  />
  <h3 class="card-title">Your name here</h3>
  <p class="card-text">
    Some quick example text to build on the card title and make up
    the bulk of the card’s content.
  </p>
  <button class="btn btn-primary">Add to friend</button>
</div>

Copy

Action card

Delete selected

Are you sure to delete 110 images permanently?

No Yes

<div class="card card-action">
  <h3 class="card-title">Delete selected</h3>
  <p class="card-text">
    Are you sure to delete 110 images permanently?
  </p>
  <div class="card-action-button-container">
    <button class="btn btn-primary">No</button>
    <button class="btn btn-error">Yes</button>
  </div>
</div>

Copy

Outline action card

Delete selected

Are you sure to delete 110 images permanently?

No Yes

<div class="card card-action">
  <h3 class="card-title">Delete selected</h3>
  <p class="card-text">
    Are you sure to delete 110 images permanently?
  </p>
  <div class="card-action-button-container">
    <button class="btn btn-outline-secondary">No</button>
    <button class="btn btn-outline-primary">Yes</button>
  </div>
</div>

Copy

Card with header

Featured

Place your title here

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

<div class="card">
  <div class="card-header">Featured</div>
  <h3 class="card-title">Place your title here</h3>
  <p class="card-text">
    Some quick example text to build on the card title and make up
    the bulk of the card’s content.
  </p>
</div>

Copy

Card with footer

Place your title here

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

New

<div class="card">
  <h3 class="card-title">Place your title here</h3>
  <p class="card-text">
    Some quick example text to build on the card title and make up
    the bulk of the card’s content.
  </p>
  <div class="card-footer">New</div>
</div>

Copy