Card Grids
If you need to have more than one card on a section, the Auto Card Grid and the Auto OUX Card Grid Snippets hold an HTML list of cards on a grid style. To add new cards, just create new list (
<li>
) items, and a new card will be created.
-
Card Title
Card copy.
-
Card Title
Card copy.
-
Card Title
Card copy.
-
Card Title
Card copy.
-
Auto Card Grid
<!-- Start - Auto Card Grid -->
<ul class="o-card-grid o-auto-grid">
<li class="c-card">
<div class="c-card__content">
<!-- Start - Card Content -->
<h3 class="c-card__title"> Card Title</h3>
<p class="c-card__copy"> Card copy.</p>
<!-- End - Card Content -->
</div>
</li>
</ul>
<!-- End - Auto Card Grid -->
-
Auto OUX Card Grid
<!-- Start - Auto Card Grid -->
<ul class="o-card-grid o-auto-grid">
<li class="oux-card">
<!-- Start - Card Content -->
<h3>Card Title</h3>
<p>Card copy.</p>
<!-- End - Card Content -->
</li>
</ul>
<!-- End - Auto Card Grid -->
Fixed Cards Grid
-
Card Title
Card copy.
-
Card Title
Card copy.
<!-- Start - Fixed Card Grid -->
<ul class="o-card-grid o-fixed-grid o-fixed-grid--two-up">
<li class="c-card">
<div class="c-card__content">
<!-- Start - Card Content -->
<h3>Card Title</h3>
<p>Card copy.</p>
<!-- End - Card Content -->
</div>
</li>
<li class="c-card">
<div class="c-card__content">
<!-- Start - Card Content -->
<h3>Card Title</h3>
<p>Card copy.</p>
<!-- End - Card Content -->
</div>
</li>
</ul>
<!-- End - Fixed Card Grid -->
Changing the Fixed Grid
We can change the number of fixed elements in the same row by changing the number on the class. To build a fixed element, we need to define the following classes on the
<ul>
tag:
-
Card Title
Card copy.
-
Card Title
Card copy.
-
Card Title
Card copy.
-
Card Title
Card copy.
-
<!-- Start - Auto Fixed Card Grid -->
<ul class="o-card-grid o-fixed-grid o-fixed-grid--one-up">
<li class="c-card">
<div class="c-card__content">
<!-- Start - Card Content -->
<!-- End - Card Content -->
</div>
</li>
</ul>
<!-- End - Fixed Card Grid -->
-
<!-- Start - Auto Fixed Card Grid -->
<ul class="o-card-grid o-fixed-grid o-fixed-grid--two-up">
<li class="c-card">
<div class="c-card__content">
<!-- Start - Card Content -->
<!-- End - Card Content -->
</div>
</li>
</ul>
<!-- End - Fixed Card Grid -->
-
<!-- Start - Auto Fixed Card Grid -->
<ul class="o-card-grid o-fixed-grid o-fixed-grid--three-up">
<li class="c-card">
<div class="c-card__content">
<!-- Start - Card Content -->
<!-- End - Card Content -->
</div>
</li>
</ul>
<!-- End - Fixed Card Grid -->
-
<!-- Start - Auto Fixed Card Grid -->
<ul class="o-card-grid o-fixed-grid o-fixed-grid--four-up">
<li class="c-card">
<div class="c-card__content">
<!-- Start - Card Content -->
<!-- End - Card Content -->
</div>
</li>
</ul>
<!-- End - Fixed Card Grid -->
-
<!-- Start - Auto Fixed Card Grid -->
<ul class="o-card-grid o-fixed-grid o-fixed-grid--five-up">
<li class="c-card">
<div class="c-card__content">
<!-- Start - Card Content -->
<!-- End - Card Content -->
</div>
</li>
</ul>
<!-- End - Fixed Card Grid -->
-
If we have an Auto element and we want to change it to be a Fixed one, we can change the classes on the
<ul>tag:
Auto Grid:<ul class="o-unstyled-list o-auto-grid">
Fixed Grid:<ul class="o-fixed-grid o-fixed-grid--two-up">
Auto Card:<ul class="o-card-grid o-auto-grid">
Fixed Card:<ul class="o-card-grid o-fixed-grid o-fixed-grid--two-up">
As we can see, we can make changes on all the Cards and Grids snippets by changing the keywords on the classes of these elements.