Team Profiles

Three profile cards with consistent portrait proportions and visible biographies.

Open demo ↗

Alex Jordan

Creative Director

Sample biography. Replace with your team member’s experience and responsibilities.

View profile →

Morgan Riley

Design Lead

Sample biography. Replace with your team member’s experience and responsibilities.

View profile →

Taylor Smith

Developer

Sample biography. Replace with your team member’s experience and responsibilities.

View profile →

HTML source & reuse instructions

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


<div class="lab-grid three">
<article class="cp-team">
<div aria-label="Illustrative placeholder portrait" class="cp-person" role="img">
<span>
          AJ
         </span>
</div>
<h3>
         Alex Jordan
        </h3>
<p class="cp-role">
         Creative Director
        </p>
<p>
         Sample biography. Replace with your team member’s experience and responsibilities.
        </p>
<a href="/templates/team/member/">
         View profile →
        </a>
</article>
<article class="cp-team">
<div aria-label="Illustrative placeholder portrait" class="cp-person" role="img">
<span>
          MR
         </span>
</div>
<h3>
         Morgan Riley
        </h3>
<p class="cp-role">
         Design Lead
        </p>
<p>
         Sample biography. Replace with your team member’s experience and responsibilities.
        </p>
<a href="/templates/team/member/">
         View profile →
        </a>
</article>
<article class="cp-team">
<div aria-label="Illustrative placeholder portrait" class="cp-person" role="img">
<span>
          TS
         </span>
</div>
<h3>
         Taylor Smith
        </h3>
<p class="cp-role">
         Developer
        </p>
<p>
         Sample biography. Replace with your team member’s experience and responsibilities.
        </p>
<a href="/templates/team/member/">
         View profile →
        </a>
</article>
</div>