Icon & Text

A responsive three-column feature row with adjustable icon treatments.

Open demo ↗

A flexible foundation

Create a consistent visual language across your pages.

Thoughtful details

Keep key information clear and easy to discover.

Room to grow

Add new sections without rebuilding the entire site.

HTML source & reuse instructions

Include the shared CSS and JavaScript files. Rename copied IDs and their matching references.


<div class="lab-grid three">
<article>
<span aria-hidden="true" class="cp-feature-icon">
         ✦
        </span>
<h3 class="h4">
         A flexible foundation
        </h3>
<p>
         Create a consistent visual language across your pages.
        </p>
</article>
<article>
<span aria-hidden="true" class="cp-feature-icon">
         ◎
        </span>
<h3 class="h4">
         Thoughtful details
        </h3>
<p>
         Keep key information clear and easy to discover.
        </p>
</article>
<article>
<span aria-hidden="true" class="cp-feature-icon">
         ↗
        </span>
<h3 class="h4">
         Room to grow
        </h3>
<p>
         Add new sections without rebuilding the entire site.
        </p>
</article>
</div>