01 · Grid, 3 per row, icons on top, linked cards
Intro text sits above the cards. Icon position: top. Every card links somewhere; hover lifts it.
02 · Grid, 3 per row, icons left, centred intro
This intro is centred (Centre the intro text).
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
03 · Grid, 4 per row, icons centred, light background
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
Card 4
Editors can change every option on this block from the pencil icon.
04 · Grid, 2 per row, images above, eyebrow + checklist, large titles
Card 1
Short supporting copy that explains the card in a sentence.
- Fast to set up
- Editable by the client
- Mobile friendly
Card 2
A little more text here, to show how cards of uneven length line up in a row.
- Fast to set up
- Editable by the client
- Mobile friendly
05 · Grid, 3 per row, image style landscape 4:2, zoom on hover off
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
06 · Grid, 4 per row, portrait 3:4 images, small titles, zoom on hover
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
Card 4
Editors can change every option on this block from the pencil icon.
08 · Statistics, 4 per row, primary (brand) background
Big numbers. Uses the Statistic field; colour follows the theme brand variable.
Years of experience
Happy clients
Satisfaction
Support
09 · Numbered steps, 4 per row, secondary background
Get in touch
Short supporting copy that explains the card in a sentence.
Plan
A little more text here, to show how cards of uneven length line up in a row.
Build
Cards stretch to the tallest in the row, so the grid stays tidy.
Launch
Editors can change every option on this block from the pencil icon.
10 · Grid, 5 per row, grey, plus-box corner icon
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
Card 4
Editors can change every option on this block from the pencil icon.
Card 5
Body text supports links, bold and lists from the editor toolbar.
11 · Per-card colour overrides (dark / primary / none / white text)
Dark override
Short supporting copy that explains the card in a sentence.
Primary override
A little more text here, to show how cards of uneven length line up in a row.
No background
Cards stretch to the tallest in the row, so the grid stays tidy.
Secondary override
Editors can change every option on this block from the pencil icon.
12 · Vertical list (image beside text)
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
13 · Vertical list — big
Card 1
Short supporting copy that explains the card in a sentence.
- Point one
- Point two
Card 2
A little more text here, to show how cards of uneven length line up in a row.
- Point one
- Point two
14 · Carousel, 3 visible, repeatable scroll ON
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
Card 4
Editors can change every option on this block from the pencil icon.
Card 5
Body text supports links, bold and lists from the editor toolbar.
Card 6
Short supporting copy that explains the card in a sentence.
Card 7
A little more text here, to show how cards of uneven length line up in a row.
15 · Carousel, 4 visible, repeatable scroll OFF, icons
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
Card 4
Editors can change every option on this block from the pencil icon.
Card 5
Body text supports links, bold and lists from the editor toolbar.
Card 6
Short supporting copy that explains the card in a sentence.
16 · Grid on desktop, carousel on mobile only
Resize the window below 768px to see this turn into a swipeable carousel.
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
17 · Paging — Load More button (3 then more)
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
Card 4
Editors can change every option on this block from the pencil icon.
Card 5
Body text supports links, bold and lists from the editor toolbar.
Card 6
Short supporting copy that explains the card in a sentence.
Card 7
A little more text here, to show how cards of uneven length line up in a row.
Card 8
Cards stretch to the tallest in the row, so the grid stays tidy.
18 · Paging — infinite scroll (4 per row, 4 then more)
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
Card 4
Editors can change every option on this block from the pencil icon.
Card 5
Body text supports links, bold and lists from the editor toolbar.
Card 6
Short supporting copy that explains the card in a sentence.
Card 7
A little more text here, to show how cards of uneven length line up in a row.
Card 8
Cards stretch to the tallest in the row, so the grid stays tidy.
Card 9
Editors can change every option on this block from the pencil icon.
Card 10
Body text supports links, bold and lists from the editor toolbar.
19 · Paging — numbered pages (3 per page)
Card 1
Short supporting copy that explains the card in a sentence.
Card 2
A little more text here, to show how cards of uneven length line up in a row.
Card 3
Cards stretch to the tallest in the row, so the grid stays tidy.
Card 4
Editors can change every option on this block from the pencil icon.
Card 5
Body text supports links, bold and lists from the editor toolbar.
Card 6
Short supporting copy that explains the card in a sentence.
Card 7
A little more text here, to show how cards of uneven length line up in a row.
Card 8
Cards stretch to the tallest in the row, so the grid stays tidy.
Card 9
Editors can change every option on this block from the pencil icon.
