HTML Cards

This layout lets you set up a multi-column layout using flexbox grid.

Cards Four Across User

some heading for this card

Nullam dictum felis eu pede mollis pretium. Integer tinciduntNullam dictum felis eu pede mollis pretium. Integer tincidunt stuff here

some heading for this card maybe its kinda long

Nullam dictum felis eu pede mollis pretium. Integer tincidunt

some heading for this card

Nullam dictum felis eu pede mollis pretium. Integer tinciduntNullam dictum felis eu pede.

some heading for this card

Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Copy Code Grid CSS

<!-- add classes to control wrapper: cg-layout cg-cards col4 -->
<div class="card bdr"><a href="/"><img src="https://via.placeholder.com/400x200" alt="image alt" class="img-responsive" caption="false" /></a>
<section>
<h3>some heading for this card</h3>
<div class="card-desc">
<p>Nullam dictum felis eu pede mollis pretium. Integer tinciduntNullam dictum felis eu pede mollis pretium. Integer tincidunt <a href="/">stuff here</a></p>
</div>
</section>
</div>
<!-- end card -->
<div class="card bdr"><a href="/"><img src="https://via.placeholder.com/400x200" alt="image alt" class="img-responsive" /></a>
<section>
<h3>some heading for this card maybe its kinda long</h3>
<div class="card-desc">
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt</p>
</div>
</section>
</div>
<!-- end card -->
<div class="card bdr"><a href="/"><img src="https://via.placeholder.com/400x200" alt="image alt" class="img-responsive" /></a>
<section>
<h3>some heading for this card</h3>
<div class="card-desc">
<p>Nullam dictum felis eu pede mollis pretium. Integer tinciduntNullam dictum felis eu pede.</p>
</div>
</section>
</div>
<!-- end card -->
<div class="card bdr"><a href="/"><img src="https://via.placeholder.com/400x200" alt="image alt" class="img-responsive" /></a>
<section>
<h3>some heading for this card</h3>
<div class="card-desc">
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</div>
</section>
</div>
<!-- end card -->
<!-- add classes to control wrapper: cg-layout cg-cards col4 -->

Cards Three Across Centered

some heading for this card maybe its kinda long

Nullam dictum felis eu pede mollis pretium. Integer tincidunt

some heading for this card

Nullam dictum felis eu pede mollis pretium. Integer tinciduntNullam dictum felis eu pede.

some heading for this card

Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

copy code Grid CSS

<!-- add classes to control wrapper: cg-layout cg-cards col4 centered t-center -->
<div class="card bdr"><a href="/"><img src="https://via.placeholder.com/400x300" alt="image alt" class="img-responsive"></a>
<section>
<h3>some heading for this card maybe its kinda long</h3>
<div class="card-desc">
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt</p>
</div>
</section>
</div>
<!-- end card -->
<div class="card bdr"><a href="/"><img src="https://via.placeholder.com/400x300" alt="image alt" class="img-responsive"></a>
<section>
<h3>some heading for this card</h3>
<div class="card-desc">
<p>Nullam dictum felis eu pede mollis pretium. Integer tinciduntNullam dictum felis eu pede.</p>
</div>
</section>
</div>
<!-- end card -->
<div class="card bdr"><a href="/"><img src="https://via.placeholder.com/400x300" alt="image alt" class="img-responsive"></a>
<section>
<h3>some heading for this card</h3>
<div class="card-desc">
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</div>
</section>
</div>
<!-- end card -->
<!-- add classes to control wrapper: cg-layout cg-cards col4 centered t-center -->

Cards Three Across

some heading for this card

Nullam dictum felis eu pede mollis pretium. Integer tinciduntNullam dictum felis eu pede mollis pretium. Integer tincidunt stuff here

some heading for this card maybe its kinda long

Nullam dictum felis eu pede mollis pretium. Integer tincidunt

some heading for this card

Nullam dictum felis eu pede mollis pretium. Integer tinciduntNullam dictum felis eu pede.

copy code Grid CSS

<!-- add classes to control wrapper: cg-layout cg-cards col3 -->
<div class="card bdr"><a href="/"><img src="https://via.placeholder.com/400x300" alt="image alt" class="img-responsive"></a>
<section>
<h3>some heading for this card maybe its kinda long</h3>
<div class="card-desc">
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt</p>
</div>
</section>
</div>
<!-- end card -->
<div class="card bdr"><a href="/"><img src="https://via.placeholder.com/400x300" alt="image alt" class="img-responsive"></a>
<section>
<h3>some heading for this card</h3>
<div class="card-desc">
<p>Nullam dictum felis eu pede mollis pretium. Integer tinciduntNullam dictum felis eu pede.</p>
</div>
</section>
</div>
<!-- end card -->
<div class="card bdr"><a href="/"><img src="https://via.placeholder.com/400x300" alt="image alt" class="img-responsive"></a>
<section>
<h3>some heading for this card</h3>
<div class="card-desc">
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</div>
</section>
</div>
<!-- end card -->
<!-- add classes to control wrapper: cg-layout cg-cards col3 -->

svgs bg

HTML Cards

Cards Four Across User

some heading for this card

some heading for this card maybe its kinda long

some heading for this card

some heading for this card

Cards Three Across Centered

some heading for this card maybe its kinda long

some heading for this card

some heading for this card

Cards Three Across

some heading for this card

some heading for this card maybe its kinda long

some heading for this card

cg-grid