A reusable hover lift card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hover Lift Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card"><h2>Project overview</h2><p>A focused summary card with restrained hover feedback.</p><a href="#details">View details</a></article>
</body>
</html>
A reusable product card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card"><div role="img" aria-label="Abstract product scene" class="ui-card__image"></div><h2>Desk organiser</h2><p>Modular storage for a tidy workspace.</p><div class="ui-card__row"><strong>£24</strong><button type="button">Add to basket</button></div></article>
</body>
</html>
A reusable profile card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Profile Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card"><div class="ui-card__row"><div><h2>Alex Morgan</h2><p>Frontend engineer</p></div><span aria-label="Available">● Available</span></div><a href="#profile">View profile</a></article>
</body>
</html>
A reusable article card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Article Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card"><p>CSS · 8 min read</p><h2>Build resilient layout systems</h2><p>Practical techniques for flexible, content-aware interfaces.</p><a href="#article">Read article</a></article>
</body>
</html>
A reusable stats card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stats Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card"><p>Completed tasks</p><strong class="ui-card__metric">48</strong><p><span aria-hidden="true">↑</span> 12% from last week</p></article>
</body>
</html>
A reusable glass card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glass Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card ui-card--glass"><h2>Clear hierarchy</h2><p>A translucent surface used over a calm decorative background.</p><a href="#learn">Learn more</a></article>
</body>
</html>
A reusable gradient border card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gradient Border Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card ui-card--gradient"><h2>Design tokens</h2><p>Keep colour, spacing and type decisions consistent.</p><a href="#tokens">Explore tokens</a></article>
</body>
</html>
A reusable feature card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Feature Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card"><span aria-hidden="true">⚡</span><h2>Fast by default</h2><p>Ship a small, dependency-free pattern that adapts to its container.</p></article>
</body>
</html>
A reusable image reveal card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Reveal Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card"><div role="img" aria-label="Abstract blue geometric illustration" class="ui-card__image"></div><h2>Creative systems</h2><p>Reveal supporting artwork without hiding essential content.</p><a href="#story">View story</a></article>
</body>
</html>
A reusable action card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Action Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card"><h2>Invite collaborators</h2><p>Share this workspace with people on your team.</p><div class="ui-card__row"><button type="button">Invite people</button><a href="#later">Not now</a></div></article>
</body>
</html>
A reusable horizontal card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card ui-card--horizontal"><div><h2>Release notes</h2><p>Review the latest product improvements.</p></div><a href="#release">Read update</a></article>
</body>
</html>
A reusable dashboard card with a distinct content hierarchy and responsive layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article class="ui-card"><div class="ui-card__row"><p>Monthly usage</p><button type="button" aria-label="Open monthly usage options">•••</button></div><strong class="ui-card__metric">7,842</strong><p>Across 16 active projects</p></article>
</body>
</html>