Patterns

Card UI Designs

Cards pack image, headline, copy, and actions into one surface. One whole-card link is fine when the entire tile goes to the same URL; otherwise use separate controls.

Jump to:

Contract

Lead art stays decorative with alt="". Demo href values point at real doc routes or example paths you can rename.

Blog cards

Blog cards combine a lead image, headline, dek, and metadata for feeds and recirculation.

Blog#001

Author Name 5 min read

Optimising Business Decisions With Advanced Data Analytics

Discover how web solutions are reshaping the business landscape.

CRO May 02, 2026

Blog#002

Author Name 5 min read

Building Websites That Meet Excellence

A Strategic Framework for Content, Architecture, and Trust

Online Presence May 02, 2026

Blog#003

Day in the Life of a Solopreneur

May 02, 2026

Cory Marazzo

CEO, WCKD Marketing, Inc.

Blog card markup starter

<article class="fill-dark round-xl shadow hide-overflow">
  <a href="/blog/your-slug" class="flex flex-column text-color">
    <div class="relative">
      <img class="cover" src="media/post.webp" alt="" width="1200" height="630" />
      <div class="to-dark-bottom"></div>
    </div>
    <div class="flex flex-column gap-s pad-l">…title, dek, meta…</div>
  </a>
</article>

Profile cards

Profile cards highlight people, roles, and trust signals for teams, speakers, and service providers.

Card#001

Hello

Media cards are used to showcase a single feature or benefit of a product or service.

Meet the team

Card#002

Cory Marazzo

CEO, WCKD Marketing, Inc.

Websites
SEO
ADS
Campaigns

4.9 Rating
18/yrs Tenure
$90/hrRate

Get in touch

Card#003

Cory Marazzo

CEO, WCKD Marketing, Inc.

Websites
SEO
ADS
Campaigns

4.9 Rating
18/yrs Tenure
$90/hrRate

Get in touch

Card#004

Cory Marazzo

Through WCKD Marketing, I help companies achieve more.

Profile card markup starter

<div class="fill-light pad-xs round-xl">
  <div class="head height-20 relative">
    <div class="background-image round-xl">
      <img class="cover" src="media/banner.webp" alt="" width="1200" height="400" />
    </div>
    <div class="layer-2 pad-left align-bottom">…avatar…</div>
  </div>
  <div class="content pad-top-xl pad-l">…name, tags, stats, CTA…</div>
</div>

Feature cards

Feature cards pair media with a short benefit statement and a single follow-up action.

Card#001

Media card

Media cards are used to showcase a single feature or benefit of a product or service.

View profile

Card#002

Media card

Media cards are used to showcase a single feature or benefit of a product or service.

View profile

Media card

Media cards are used to showcase a single feature or benefit of a product or service.

View profile

Feature card markup starter

<div class="fill-light round hide-overflow">
  <div class="image">
    <img class="cover aspect-16-9" src="media/feature.webp" alt="" width="1200" height="675" />
  </div>
  <div class="pad-l">
    <h2>…</h2>
    <p class="text-s">…</p>
    <a href="/profile/demo" class="button size-xs round-s">View profile</a>
  </div>
</div>

Checklist

Prefer one destination per whole-card link; split controls when actions differ (save vs open).
Author thumbnails that repeat a name already in text can use empty alt; otherwise give a short literal description.
Facepile portraits need distinct labels; match href targets to your profile routes.

← All patterns