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$mdbreakpoint.row-cols-xl-[1-10][ROW_COLS_XL]Sets number of columns to show at the$xlbreakpoint
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
<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">
<figure class="figure card-img-top img-ar3-2">
</figure>
<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">
<figure class="figure card-img-top img-ar3-2">
</figure>
<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">
<figure class="figure card-img-top img-ar3-2">
</figure>
<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">
<figure class="figure card-img-top img-ar3-2">
</figure>
<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">
<figure class="figure card-img-top img-ar3-2">
</figure>
<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">
<figure class="figure card-img-top img-ar3-2">
</figure>
<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
<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">
<figure class="figure card-img-top img-ar8-5">
</figure>
<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">
<figure class="figure card-img-top img-ar8-5">
</figure>
<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">
<figure class="figure card-img-top img-ar8-5">
</figure>
<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">
<figure class="figure card-img-top img-ar8-5">
</figure>
<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">
<figure class="figure card-img-top img-ar8-5">
</figure>
<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">
<figure class="figure card-img-top img-ar8-5">
</figure>
<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
<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">
<figure class="figure card-img-top img-ar16-9">
</figure>
<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 & 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">
<figure class="figure card-img-top img-ar16-9">
</figure>
<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 & 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">
<figure class="figure card-img-top img-ar16-9">
</figure>
<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 & 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">
<figure class="figure card-img-top img-ar16-9">
</figure>
<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 & 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">
<figure class="figure card-img-top img-ar16-9">
</figure>
<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 & 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">
<figure class="figure card-img-top img-ar16-9">
</figure>
<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 & 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>