Card Sets Listing Grid

Responsive listing component that allows a user to set the number of columns that best render content and layout.

Component Properties

Section Properties

Text / Background Color Theme [COLOR_THEME]

Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:

Section Modifier [MODIFIER]

Optionally add an overall modifier class to the component.

Section Vertical Spacing [SPACING]

Optional: Adds top and bottom padding to section.

none
No spacing applied to element
.sec-spacing
Adds top and bottom spacing to section
.sec-spacing-sm
Adds a small amount top and bottom spacing to section
.sec-spacing-lg
Adds a large amount top and bottom spacing to section

Container Modifier [CONTAINER]

Use .container-fluid for a full width container, spanning the entire width of the viewport

.container
Standard width section contrainer. Container width snaps to width at breakpoints.
.container-xxl
Standard width section contrainer. Container has fluid until it reaches it's maximum width
.container-fluid
Full width section contrainer. Container runs from edge to egde of the viewport

Grid Properties

Row Justification [ROW_JUSTIFY]

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main x-axis.

.justify-content-start
Pack columns from the left
.justify-content-end
Pack columns from the right
.justify-content-center
Pack columns around the center.

Column widths [ROW_COLS] [ROW_COLS_MD] [ROW_COLS_XL]

Set the width of the content column for desktop vieports.

.row-cols-[1-3]
[ROW_COLS] Sets number of columns to show at the smallest screen size.
.row-cols-md-[1-6]
[ROW_COLS_MD] Sets number of columns to show at the $md breakpoint
.row-cols-xl-[1-10]
[ROW_COLS_XL] Sets number of columns to show at the $xl breakpoint

Grid Spacing [GRID_GAP_X] [GRID_GAP_Y]

Gutters are the padding between your columns, used to responsively space and align content in the grid system.

.gx-[0-5]
[GRID_GAP_X] Provides horizontal gap between columns. Default is 3.
.gy-[0-5]
[GRID_GAP_Y] Provides vertical gap between columns. Default is 3.
Article Listing Template
<section class="lst-grid-sec [COLOR_THEME] [SPACING] [MODIFIER]">
  <div class="[CONTAINER]">
    <div class="row">
      <!-- Optional section heading -->
      <div class="col-12 sec-heading">
        <[HEADING_LVL]>
          [HEADONG_TEXT]
        </[HEADING_LVL]>
      </div>
      <!-- List Grid -->
      <div class="col-12">
        <div class="lst-grid row [ROW_COLS] [ROW_COLS_MD] [ROW_COLS_XL] [ROW_JUSTIFY] [GRID_GAP_X] [GRID_GAP_Y]">
          <div class="col">
            ...
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Base/Standard Card List Example

View in new window
View in new window for full preview
<section class="lst-grid-sec sec-spacing">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 sec-heading">
        <h2>
          Article Section Title
        </h2>
      </div>
      <div class="col-12">
        <div class="lst-grid row gy-3 gx-3 justify-content-center row-cols-1 row-cols-md-3 row-cols-xl-4">
          <!-- BEGIN: Column Loop -->
          <div class="col">
 <div class="card">
  <img
  srcset="../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
  src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
  alt="Image description"
  class="card-img-top img-ar3-2">

  <div class="card-body">
        <h3 class="card-title">Title text</h3>
        <p class="card-text">Card Text Lorem ipsum dolor, sit amet consectetur, adipisicing elit.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Card button</a>

  </div>
</div>
          </div>
          <div class="col">
 <div class="card">
  <img
  srcset="../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
  src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
  alt="Image description"
  class="card-img-top img-ar3-2">

  <div class="card-body">
        <h3 class="card-title">Title text</h3>
        <p class="card-text">Card Text Lorem ipsum dolor, sit amet consectetur, adipisicing elit.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Card button</a>

  </div>
</div>
          </div>
          <div class="col">
 <div class="card">
  <img
  srcset="../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
  src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
  alt="Image description"
  class="card-img-top img-ar3-2">

  <div class="card-body">
        <h3 class="card-title">Title text</h3>
        <p class="card-text">Card Text Lorem ipsum dolor, sit amet consectetur, adipisicing elit.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Card button</a>

  </div>
</div>
          </div>
          <div class="col">
 <div class="card">
  <img
  srcset="../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
  src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
  alt="Image description"
  class="card-img-top img-ar3-2">

  <div class="card-body">
        <h3 class="card-title">Title text</h3>
        <p class="card-text">Card Text Lorem ipsum dolor, sit amet consectetur, adipisicing elit.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Card button</a>

  </div>
</div>
          </div>
          <div class="col">
 <div class="card">
  <img
  srcset="../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
  src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
  alt="Image description"
  class="card-img-top img-ar3-2">

  <div class="card-body">
        <h3 class="card-title">Title text</h3>
        <p class="card-text">Card Text Lorem ipsum dolor, sit amet consectetur, adipisicing elit.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Card button</a>

  </div>
</div>
          </div>
          <div class="col">
 <div class="card">
  <img
  srcset="../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
  sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
  src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
  alt="Image description"
  class="card-img-top img-ar3-2">

  <div class="card-body">
        <h3 class="card-title">Title text</h3>
        <p class="card-text">Card Text Lorem ipsum dolor, sit amet consectetur, adipisicing elit.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Card button</a>

  </div>
</div>
          </div>
          <!-- END: Column Loop -->
        </div>
      </div>
    </div>
  </div>
</section>

Article Listing Example

View in new window
View in new window for full preview
<section class="lst-grid-sec sec-spacing">
  <div class="container-xxl">
    <div class="row">
      <div class="col-12">
        <div class="lst-grid row gy-3 gx-3 row-cols-1 row-cols-md-2 row-cols-xl-3">
          <!-- BEGIN: Column Loop -->
          <div class="col">
     <div class="card dyn-crd-atv">
      <img
      srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
      alt="Image description"
      class="card-img-top img-ar8-5">

      <div class="card-body">
        <h3 class="card-title">Article Title</h3>
        <p class="card-date">Month 00, 2024</p>
        <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
      </div>
    </div>
          </div>
          <div class="col">
     <div class="card dyn-crd-atv">
      <img
      srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
      alt="Image description"
      class="card-img-top img-ar8-5">

      <div class="card-body">
        <h3 class="card-title">Article Title</h3>
        <p class="card-date">Month 00, 2024</p>
        <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
      </div>
    </div>
          </div>
          <div class="col">
     <div class="card dyn-crd-atv">
      <img
      srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
      alt="Image description"
      class="card-img-top img-ar8-5">

      <div class="card-body">
        <h3 class="card-title">Article Title</h3>
        <p class="card-date">Month 00, 2024</p>
        <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
      </div>
    </div>
          </div>
          <div class="col">
     <div class="card dyn-crd-atv">
      <img
      srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
      alt="Image description"
      class="card-img-top img-ar8-5">

      <div class="card-body">
        <h3 class="card-title">Article Title</h3>
        <p class="card-date">Month 00, 2024</p>
        <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
      </div>
    </div>
          </div>
          <div class="col">
     <div class="card dyn-crd-atv">
      <img
      srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
      alt="Image description"
      class="card-img-top img-ar8-5">

      <div class="card-body">
        <h3 class="card-title">Article Title</h3>
        <p class="card-date">Month 00, 2024</p>
        <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
      </div>
    </div>
          </div>
          <div class="col">
     <div class="card dyn-crd-atv">
      <img
      srcset="../../../../assets/img//fpo/fpo-8-5@md.jpg 960w, ../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
      alt="Image description"
      class="card-img-top img-ar8-5">

      <div class="card-body">
        <h3 class="card-title">Article Title</h3>
        <p class="card-date">Month 00, 2024</p>
        <p class="card-text">Suscipit unde repellendus tenetur porro reprehenderit, modi ex distinctio neque repellat dolorem perspiciatis dolorum ab. Excepturi atque unde perspiciatis, maiores dolorem mollitia, harum facere cupiditate autem sapiente itaque dignissimos quasi.</p>
        <a href="#" class="btn btn-outline-primary stretched-link">Read More</a>
      </div>
    </div>
          </div>
          <!-- END: Column Loop -->
        </div>
      </div>
    </div>
  </div>
</section>

Events Listing Example

View in new window
View in new window for full preview
<section class="lst-grid-sec sec-spacing">
  <div class="container-xxl">
    <div class="row">
      <div class="col-12">
        <div class="lst-grid row gy-3 gx-3 row-cols-1 row-cols-md-2 row-cols-xl-3">
          <!-- BEGIN: Column Loop -->
          <div class="col">
     <div class="card dyn-crd-etv">
      <img
      srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
      alt="Image description"
      class="card-img-top img-ar16-9">

      <div class="card-body">
        <div class="card-date-title">
          <p class="card-date">
            <span class="card-date-day">28</span>
            <span class="card-date-month">Feb</span>
          </p>
          <h3 class="card-title">Ron White At Live! Casino &amp; Hotel Maryland</h3>
        </div>
        <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus rerum architecto maxime. Tempore ea voluptatibus qui quos impedit.</p>
        <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
        <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
      </div>
    </div>
          </div>
          <div class="col">
     <div class="card dyn-crd-etv">
      <img
      srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
      alt="Image description"
      class="card-img-top img-ar16-9">

      <div class="card-body">
        <div class="card-date-title">
          <p class="card-date">
            <span class="card-date-day">28</span>
            <span class="card-date-month">Feb</span>
          </p>
          <h3 class="card-title">Ron White At Live! Casino &amp; Hotel Maryland</h3>
        </div>
        <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus rerum architecto maxime. Tempore ea voluptatibus qui quos impedit.</p>
        <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
        <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
      </div>
    </div>
          </div>
          <div class="col">
     <div class="card dyn-crd-etv">
      <img
      srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
      alt="Image description"
      class="card-img-top img-ar16-9">

      <div class="card-body">
        <div class="card-date-title">
          <p class="card-date">
            <span class="card-date-day">28</span>
            <span class="card-date-month">Feb</span>
          </p>
          <h3 class="card-title">Ron White At Live! Casino &amp; Hotel Maryland</h3>
        </div>
        <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus rerum architecto maxime. Tempore ea voluptatibus qui quos impedit.</p>
        <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
        <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
      </div>
    </div>
          </div>
          <div class="col">
     <div class="card dyn-crd-etv">
      <img
      srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
      alt="Image description"
      class="card-img-top img-ar16-9">

      <div class="card-body">
        <div class="card-date-title">
          <p class="card-date">
            <span class="card-date-day">28</span>
            <span class="card-date-month">Feb</span>
          </p>
          <h3 class="card-title">Ron White At Live! Casino &amp; Hotel Maryland</h3>
        </div>
        <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus rerum architecto maxime. Tempore ea voluptatibus qui quos impedit.</p>
        <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
        <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
      </div>
    </div>
          </div>
          <div class="col">
     <div class="card dyn-crd-etv">
      <img
      srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
      alt="Image description"
      class="card-img-top img-ar16-9">

      <div class="card-body">
        <div class="card-date-title">
          <p class="card-date">
            <span class="card-date-day">28</span>
            <span class="card-date-month">Feb</span>
          </p>
          <h3 class="card-title">Ron White At Live! Casino &amp; Hotel Maryland</h3>
        </div>
        <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus rerum architecto maxime. Tempore ea voluptatibus qui quos impedit.</p>
        <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
        <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
      </div>
    </div>
          </div>
          <div class="col">
     <div class="card dyn-crd-etv">
      <img
      srcset="../../../../assets/img//fpo/fpo-16-9@md.jpg 960w, ../../../../assets/img//fpo/fpo-16-9@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-16-9@md.jpg"
      alt="Image description"
      class="card-img-top img-ar16-9">

      <div class="card-body">
        <div class="card-date-title">
          <p class="card-date">
            <span class="card-date-day">28</span>
            <span class="card-date-month">Feb</span>
          </p>
          <h3 class="card-title">Ron White At Live! Casino &amp; Hotel Maryland</h3>
        </div>
        <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus rerum architecto maxime. Tempore ea voluptatibus qui quos impedit.</p>
        <p class="card-text">The Hall At Live! Casino <br>7002 Arundel Mills Cir. Hanover, MD <br>7:00 PM | $30.00</p>
        <a href="#" class="btn btn-primary stretched-link">Purchase Tickets</a>
      </div>
    </div>
          </div>
          <!-- END: Column Loop -->
        </div>
      </div>
    </div>
  </div>
</section>