Cards
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 frameworksBeginner
Loading…
A centred team member card with an avatar, role, short bio and social links.
<article class="profile-card">
<img class="profile-card__avatar" src="/your-image.jpg" alt="" width="80" height="80" />
<h3 class="profile-card__name">Amara Okafor</h3>
<p class="profile-card__role">Principal Designer</p>
<p class="profile-card__bio">
Twelve years spent turning sprawling product surfaces into design systems teams actually keep using.
</p>
<ul class="profile-card__socials">
<li>
<a class="profile-card__social" href="#">
<svg class="profile-card__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M18.9 2H22l-7.1 8.1L23 22h-6.6l-5.2-6.8L5.3 22H2.2l7.6-8.7L1.7 2h6.8l4.7 6.2L18.9 2Zm-1.1 18h1.7L7.3 3.8H5.4L17.8 20Z" />
</svg>
<span class="profile-card__sr">Amara on X</span>
</a>
</li>
<li>
<a class="profile-card__social" href="#">
<svg class="profile-card__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95C21.6 8.75 22 11.1 22 14.2V21h-4v-6c0-1.4-.03-3.2-2-3.2s-2.3 1.5-2.3 3.1V21h-4V9Z" />
</svg>
<span class="profile-card__sr">Amara on LinkedIn</span>
</a>
</li>
<li>
<a class="profile-card__social" href="#">
<svg class="profile-card__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.51-4.94.01-1.09.4-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02a9.6 9.6 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.37.2 2.39.1 2.64.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z" />
</svg>
<span class="profile-card__sr">Amara on GitHub</span>
</a>
</li>
</ul>
</article>| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | - | Name of the person shown as the heading. |
rolerequired | string | - | Job title shown beneath the name. |
biorequired | string | - | Short biography paragraph. |
avatarSrcrequired | string | - | Image URL for the avatar. |
socials | ProfileSocial[] | [] | Social profile links rendered as icons. |
className | string | - | Additional classes merged onto the root element. |
The avatar is decorative (`alt=""`) because the heading beside it already names the person - give it real alt text only if it carries information the name does not. Each social link keeps an `sr-only` name like "Amara on GitHub"; three identical "Link" entries in a screen reader's list is the failure mode to avoid. Swap `SOCIAL_PATHS` for your own icon set and the layout is unchanged.