Catalog Page Example¶
A complete product catalog page with gradient hero and responsive product grid.
Live Preview¶
Complete HTML¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalog — Acme Corp</title>
<link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Cabin', sans-serif;
background: #F1F1F1;
min-height: 100vh;
}
/* Hero */
.catalog-hero {
background: linear-gradient(73deg, #6E96FF 20%, #5C0390 100%);
padding: 24px 32px;
color: white;
margin-bottom: 24px;
}
.catalog-hero__inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 16px;
}
.catalog-hero__logo {
width: 56px;
height: 56px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}
.catalog-hero__label { font-size: 12px; opacity: 0.8; margin-bottom: 2px; }
.catalog-hero__name { font-size: 24px; font-weight: 700; color: white; }
/* Container */
.catalog-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px 48px;
}
@media (min-width: 768px) { .catalog-container { padding: 0 24px 48px; } }
@media (min-width: 1024px) { .catalog-container { padding: 0 32px 48px; } }
/* Grid */
.catalog-grid {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1280px) { .catalog-grid { grid-template-columns: repeat(4, 1fr); } }
/* Product card */
.product-card {
background: #FAFAFA;
border-radius: 10px;
padding: 20px;
transition: all 0.3s ease;
cursor: pointer;
}
.product-card:hover {
background: #FFFFFF;
box-shadow: 0 8px 16px -4px rgba(10, 10, 10, 0.1);
transform: translateY(-2px);
}
.product-card__period { font-size: 12px; color: #999; margin-bottom: 4px; }
.product-card__name { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 4px; }
.product-card__price { font-size: 22px; font-weight: 700; color: #6E96FF; margin-bottom: 12px; }
.product-card__suffix { font-size: 12px; font-weight: 400; color: #999; }
.product-card__btn {
width: 100%;
height: 36px;
background: #EBF0FF;
color: #6E96FF;
border: none;
border-radius: 8px;
font-family: 'Cabin', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.product-card__btn:hover { background: #d4e0ff; }
</style>
</head>
<body>
<!-- Hero -->
<div class="catalog-hero">
<div class="catalog-hero__inner">
<div class="catalog-hero__logo">🏢</div>
<div>
<p class="catalog-hero__label">Payment catalog</p>
<h1 class="catalog-hero__name">Acme Corp</h1>
</div>
</div>
</div>
<!-- Products -->
<div class="catalog-container">
<div class="catalog-grid">
<div class="product-card">
<p class="product-card__period">Monthly</p>
<p class="product-card__name">Basic Plan</p>
<p class="product-card__price">$9.99<span class="product-card__suffix">/mo</span></p>
<button class="product-card__btn">Select</button>
</div>
<div class="product-card">
<p class="product-card__period">Monthly</p>
<p class="product-card__name">Pro Plan</p>
<p class="product-card__price">$29.99<span class="product-card__suffix">/mo</span></p>
<button class="product-card__btn">Select</button>
</div>
<div class="product-card">
<p class="product-card__period">Monthly</p>
<p class="product-card__name">Enterprise</p>
<p class="product-card__price">$99.99<span class="product-card__suffix">/mo</span></p>
<button class="product-card__btn">Select</button>
</div>
<div class="product-card">
<p class="product-card__period">One-time</p>
<p class="product-card__name">Setup Fee</p>
<p class="product-card__price">$99.00</p>
<button class="product-card__btn">Select</button>
</div>
<div class="product-card">
<p class="product-card__period">Annual</p>
<p class="product-card__name">Pro Annual</p>
<p class="product-card__price">$299.00<span class="product-card__suffix">/yr</span></p>
<button class="product-card__btn">Select</button>
</div>
<div class="product-card">
<p class="product-card__period">One-time</p>
<p class="product-card__name">Consultation</p>
<p class="product-card__price">$150.00</p>
<button class="product-card__btn">Select</button>
</div>
</div>
</div>
</body>
</html>