Cards are utilized in sections that showcase lists of items. Luxize modified bootstrap card components to better fit the overall luxize design.

<div class="item card card--top card--size-sm">

  <div class="card-cover">
    <figure class="card-img">
      <img src="/path/to/image" alt="" class="img-fluid" loading="lazy">
    </figure>
  </div>
  <!-- /.card-cover -->

  <div class="card-body"> 
    <div class="item-category">...</div>
    <h3 class="item-title card-title">...</h3>
    <p>...</p>
    <div class="item-meta">...</div>
  </div>
  <!-- /.card-body -->

</div>
<!-- /.card -->

Preview:

Changing the class name from .card--top into .card--end will give the card different image position. Another class to chenge image position: .card--start, .card--bottom

<div class="item card card--end card--size-sm">
  ...
</div>
<!-- /.card -->

Preview:

You can also use card with background image. Here's the code

<div class="item card card--bg card--size-sm">
  <figure class="card-cover position-relative">
    <figure class="card-img">
      <img src="/path/to/image" alt="" class="bg-img" loading="lazy">
    </figure>
  </figure>
  <!-- /.card-cover -->
  
  <div class="card-body"> 
    <div class="item-category">...</div>
    <h3 class="item-title card-title">...</h3>
    <p>...</p>
    <div class="item-meta">...</div>
  </div>
  <!-- /.card-body -->

</div>
<!-- /.card -->

Preview:

Luxize Card Options

• .card--cover-expand will cause the card cover to expand beyond the dimensions of the card.
• .card--cover-expandx to only expand cover horizontally.
• .card--cover-expandy to only expand cover vertically.
• .card--cover-expandt to only expand cover towards the top.
• .card--cover-expandb to only expand cover towards the bottom.