Building Block

Cards & Feature Sections

Icon feature grids, animated stats rows, and comparison tables — pure CSS Grid patterns that Claude deploys in a single conversation. Showcases your product clearly, adapts to any brand.

Get started — from £6.99/month All building blocks

Code Patterns

Cards & feature section patterns

Three versatile content grid patterns that work for any site type. Pure HTML and CSS — no framework dependencies, adapted to your theme by Claude.

Pattern 1 — Icon Feature Cards

A 3 or 4-column grid of feature cards, each with an icon or emoji, heading, body text, and an optional link. The most widely used content section pattern in modern websites — scannable, clear, and effective at communicating value to new visitors.

Pure CSS CSS Grid Icon Support Hover Lift
  • 3-column grid (or 4-column) collapsing to 2 at 900px and 1 at 640px
  • Icon area: emoji, inline SVG, or a 40px image — separated from the heading with consistent spacing
  • Card hover: translateY(-3px) lift + border-left accent or deepened box-shadow
  • Optional CTA link per card: styled with an arrow suffix and hover underline animation
  • Section label, heading, and intro text above the grid — all configurable
  • Light or dark background variant — tell Claude which your page needs
Prompt to use with Claude

Add a 3-column feature section to my [page]. Section heading: “[Your heading]”, intro: “[Your intro text]”. Card 1: icon 📋, heading “[Feature 1]”, body “[Description 1]”. Card 2: icon ⚡, heading “[Feature 2]”, body “[Description 2]”. Card 3: icon 🔒, heading “[Feature 3]”, body “[Description 3]”. Cards lift on hover with a box-shadow. Grid collapses to 2 columns at 900px, 1 at 640px. Brand colour: [your hex]. CSS in theme.css.

Pattern 2 — Stats / Metrics Row

A horizontal strip of 3 or 4 large numbers with labels beneath — customer count, uptime percentage, years in business, projects delivered. Optionally animates the numbers counting up from zero when the section scrolls into view using Intersection Observer.

CSS Vanilla JS Count-up Intersection Observer
  • 3 or 4 stat columns in a centred flex row with separator dots between on desktop
  • Number: large display font (3–4rem), brand colour or white depending on background
  • Label: muted smaller text directly below the number
  • Count-up animation: vanilla JS Intersection Observer triggers on first scroll-into-view
  • Animation duration configurable per stat (e.g. 2000ms with ease-out)
  • prefers-reduced-motion: numbers shown at final value immediately, no animation
  • Mobile: 2-column grid, separator dots hidden
Prompt to use with Claude

Add a stats row to my homepage with 4 metrics on a dark background strip. Stat 1: “[number]+” label “[label 1]”. Stat 2: “[number]” label “[label 2]”. Stat 3: “[number]%” label “[label 3]”. Stat 4: “[number]” label “[label 4]”. Animate the numbers counting up from 0 when they scroll into view (Intersection Observer, vanilla JS). Respect prefers-reduced-motion. CSS in theme.css, JS in main.js.

Pattern 3 — Feature Comparison Table

An HTML table comparing your product or service against alternatives or tiers. Tick and cross columns, a highlighted recommended column, striped rows, and a sticky header. Horizontally scrollable on mobile with a scroll-hint fade shadow at the right edge.

HTML Table Sticky Header Mobile Scroll Highlighted Column
  • Semantic <table> with <thead> sticky at the top of the scroll container
  • Tick (✓) and cross (✗) icons: green and red respectively via CSS class
  • Highlighted column: branded background and bold text indicating the recommended option
  • Striped rows: alternating background-color for readability at a glance
  • Mobile: table wrapped in overflow-x: auto with a right-edge fade shadow hinting at scroll
  • Accessible: scope="col" and scope="row" on all header cells
Prompt to use with Claude

Add a feature comparison table to my pricing page. Columns: [Competitor A], [Your product] (highlighted as recommended), [Competitor B]. Rows: [Feature 1: ✗ / ✓ / ✗], [Feature 2: ✓ / ✓ / ✓], [Feature 3: ✗ / ✓ / ✗], [Price: [price A] / [your price] / [price B]]. Sticky header row, alternating row colours, horizontally scrollable on mobile with a fade shadow on the right edge. CSS in theme.css.

What you get

Every cards & grid pattern includes

Adapted to your content

Tell Claude your features, stats, and comparison rows. Claude writes the HTML around your exact content — not a placeholder template you have to find-and-replace.

No CSS framework

No Bootstrap grid, no Tailwind utility classes. Pure CSS Grid and Flexbox — lighter, faster, and no specificity conflicts with your existing stylesheet.

Responsive out of the box

Every pattern collapses cleanly to mobile. Card grids stack, tables scroll, stat rows reorder — no manual breakpoint tuning required from you.

Iterable in seconds

Add a card, change a stat, swap a row. Describe the change to Claude and it updates your live page within seconds — no rebuild, no redeployment.

More building blocks

Pair cards & grids with

Combine card and grid patterns with these building blocks for a complete, converting landing page.

Testimonials

Follow your feature card grid with star-rated testimonial cards — capability first, then social proof.

View patterns →

Hero Sections

Fullscreen gradient and split-layout heroes lead naturally into a feature card section below.

View patterns →

Pricing Tables

Follow a feature comparison table with a pricing section — the most effective conversion sequence.

View patterns →

Deploy your first feature section today

From £6.99/month. First month free — no credit card required.

View pricing All building blocks