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:

View in new window for full preview

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>