DiviGrid · List Grid for Divi 5
List Grid: menus, teams, timelines and schedules in one module
Every row has an image or icon, a title, a description and a badge. Add a connecting line, shapes behind icons, hover effects, and swap the order of the parts.
Image or icon
A photo, or an icon on a circle, square or diamond.
Media
Connector line
Join the rows into a timeline.
Line
Any order
Badge first, image last: you choose.
Order
Hover effects
Focus one row, or slide an overlay over it.
Hover
Use case 01 · Restaurants
Slurp Lane noodle bar
Broth simmered for eighteen hours. Hover a bowl and the rest of the menu steps back.
Tonkotsu ramen
Pork bone broth, soft egg, pak choi, chilli oil.
£13
Red miso noodles
Spicy miso, minced pork, spring onion, corn.
£12
Dumpling soup
Six pork dumplings in a clear ginger broth.
£10
Cold sesame noodles
Buckwheat noodles, cucumber, sesame dressing.
£9
Pumpkin laksa
Coconut, roast pumpkin, lime, crispy shallots.
£11
Salted edamame
A bowl to share while you wait.
£4
Round 88 px images · price as the badge · “focus item” hover dims the other rows · last row uses an icon on a circle shape
Use case 02 · SaaS roadmaps
Where Tally is heading this year
Every quarter we post what shipped, what is in progress and what is next. The line joins the rows into a timeline.
Connector line on the left · icons in outlined circle shapes · status as the badge, aligned to the top
Shared invoices
Send one invoice from two accounts and split the payment.
Shipped · Q1
Bank feeds for 40 countries
Transactions arrive every hour, tagged by category.
Shipped · Q2
Receipt scanning
Snap a receipt and Tally finds the matching payment.
In progress
Year-end pack
One download with everything your accountant asks for.
Planned · Q4
Use case 03 · Teams
Who to ask at Brightfold
Six people, six jobs. Click “Say hi” to send them a message.
Two List Grid modules side by side · each row is a card that turns lilac on hover · the badge is a link
Welcome and kit list
What to buy, and what you can skip.
6 min
Mixing greens that look real
Three paints, twenty greens.
18 min
Wet on wet skies
Let the paper do the work.
22 min
Light and shadow
Where to leave the paper white.
20 min
Your first full painting
A harbour scene, step by step.
45 min
Use case 04 · Online courses
Watercolour for beginners
Five lessons, under two hours in all. Each lesson has its own colour, so the list reads like a map.
Icons on diamond shapes, one colour per item · connector between them · length as the badge
Use case 05 · Careers pages
Open roles at Northbeam
Remote-first, four-day week. Hover a role to focus it.
Rows with a bottom line only · icons on rounded square shapes · “Apply” badge is a link · rows stack on phones
Use case 06 · Pricing pages
What you get with Sketchpad
Two lists, two looks. New features carry a badge.
Free
£0 for ever
3 boards
Unlimited pages on each.
Share by link
View-only links for anyone.
PNG export
Up to 2x size.
Community help
Forum answers within a day.
Pro
£8 a month
Unlimited boards
And folders to keep them tidy.
Live cursors
See who is drawing where.
New
SVG + PDF export
Print-ready files.
Version history
Go back 90 days.
New
Use case 07 · Travel
Five days, five villages
A slow walking trip from the hills to the sea. Hover a day: a green panel slides over it.
Tea terraces
Walk the ridge above the terraces before the mist lifts. Night in a farm guesthouse.
Day 1
Upper valley
A long, easy path down the river to the old mill village.
Day 2
Market town
Rest day. Saturday market, then the bell tower at sunset.
Day 3
Lake cabins
Swim, row, or do nothing at all. Dinner is smoked fish.
Day 4
The harbour
Last walk along the cliffs into the painted harbour.
Day 5
Content order changed: badge first, then text, image last · overlay hover “swipe” · each row stacks on phones
Use case 08 · Conferences
Saturday at Makers Day
The talks run back to back in one hall. Time on the left, topic icon on the right.
Badge moved to the front as the time · icon moved to the end · diagonal overlay on hover
Use case 09 · Apps
Pocket Garden does the remembering
Six features in two lists. Hover one: the colour closes in from the corners.
Icon on a pale square with rounded corners · overlay hover “corners” with its own title and text colours
Use case 10 · Recipes
Brown butter banana bread
Everything you need, lined up with the amounts on the right. No images, no icons: just clean rows.
1 loaf
20 min prep
60 min bake
Text-only rows with the amount as a badge · a thin line under each row
Ingredients
Butter
115 g
Very ripe bananas
3 large
Light brown sugar
150 g
Eggs
2
Plain flour
200 g
Bicarbonate of soda
1 tsp
Salt
½ tsp
Dark chocolate, chopped
80 g
Divi List Grid Design - 01
Divi List Grid Design - 02
Vestibulum auctor
Donec nec justo eget felis facilisis fertum Aliquam porttitor.
Nunc dignissim
Donec nec justo eget felis facilisis fertum Aliquam porttitor.
Integer vitae risus
Donec nec justo eget felis facilisis fertum Aliquam porttitor.
Praesent placerat
Donec nec justo eget felis facilisis fertum Aliquam porttitor.
Donec quis dui
Donec nec justo eget felis facilisis fertum Aliquam porttitor.
Fusce pellentesque
Donec nec justo eget felis facilisis fertum Aliquam porttitor.
Divi List Grid Design - 03
Divi List Grid Design - 04
Here Are Some Useful Features
Morbi in sem quis
Donec nec justo eget felis facilisis porttitor mauris sit amet orci porttitor mauris sit.
01
Donec nec justo
Donec nec justo eget felis facilisis porttitor mauris sit amet orci porttitor mauris sit.
02
Praesent dapibus
Donec nec justo eget felis facilisis porttitor mauris sit amet orci porttitor mauris sit.
03
Donec consectetuer
Donec nec justo eget felis facilisis porttitor mauris sit amet orci porttitor mauris sit.
04
Divi List Grid Design - 05
Vestibulum auctor
Your content goes here. Edit or remove this text inline or in the module Content settings.
01
Nunc dignissim
Your content goes here. Edit or remove this text inline or in the module Content settings.
02
Integer vitae risus
Your content goes here. Edit or remove this text inline or in the module Content settings.
03
Praesent placerat
Your content goes here. Edit or remove this text inline or in the module Content settings.
04
Donec quis dui
Your content goes here. Edit or remove this text inline or in the module Content settings.
01
Fusce pellentesque
Your content goes here. Edit or remove this text inline or in the module Content settings.
02
Vestibulum auctor
Your content goes here. Edit or remove this text inline or in the module Content settings.
03
Nunc dignissim
Your content goes here. Edit or remove this text inline or in the module Content settings.
04
Divi List Grid Design - 06
Fusce pellentesque
Your content goes here. Edit or remove this text inline or in the module Content settings.
01
Praesent placerat
Your content goes here. Edit or remove this text inline or in the module Content settings.
02
Donec quis dui
Your content goes here. Edit or remove this text inline or in the module Content settings.
03
Integer vitae risus
Your content goes here. Edit or remove this text inline or in the module Content settings.
04
Sed egestas ante
Your content goes here. Edit or remove this text inline or in the module Content settings.
01
Morbi purus libero
Your content goes here. Edit or remove this text inline or in the module Content settings.
02
Praesent elementum
Your content goes here. Edit or remove this text inline or in the module Content settings.
03
Suspendisse mauris
Your content goes here. Edit or remove this text inline or in the module Content settings.
04
Divi List Grid Design - 07
Morbi interdum
Your content goes here. Edit or remove this text inline or in the module Content settings.
01
Lectus pulvinar
Your content goes here. Edit or remove this text inline or in the module Content settings.
02
Pellentesque egestas
Your content goes here. Edit or remove this text inline or in the module Content settings.
03
Pellensque fentum
Your content goes here. Edit or remove this text inline or in the module Content settings.
01
Nam nulla quam
Your content goes here. Edit or remove this text inline or in the module Content settings.
02
Consectetuer ligula
Your content goes here. Edit or remove this text inline or in the module Content settings.
03
Divi List Grid Design - 08
Consectetuer ligula
Your content goes here. Edit or remove this text inline or in the module Content settings.
01
Phasellus ultrices
Your content goes here. Edit or remove this text inline or in the module Content settings.
02
Morbi interdum
Your content goes here. Edit or remove this text inline or in the module Content settings.
03
Adipiscing varius
Your content goes here. Edit or remove this text inline or in the module Content settings.
01
Vestibulum volutpat
Your content goes here. Edit or remove this text inline or in the module Content settings.
02
Faucibus adipiscing
Your content goes here. Edit or remove this text inline or in the module Content settings.
03
Divi List Grid Design - 09
Christina Rinaldi
Your content goes here. Edit or remove this text inline or in the module Content settings.
CEO
James Robert
Your content goes here. Edit or remove this text inline or in the module Content settings.
CEO
Mariya Graywind
Your content goes here. Edit or remove this text inline or in the module Content settings.
CEO
Alex Freeman
Your content goes here. Edit or remove this text inline or in the module Content settings.
CEO
William Smith
Your content goes here. Edit or remove this text inline or in the module Content settings.
CEO
Darrel Wilson
Your content goes here. Edit or remove this text inline or in the module Content settings.
CEO
Divi List Grid Design - 10
Fucibus adipising
Your content goes here. Edit or remove this text inline or in the module Content settings.
01
Nam nulla quam
Your content goes here. Edit or remove this text inline or in the module Content settings.
02
Pelsque fermetum
Your content goes here. Edit or remove this text inline or in the module Content settings.
03
Aliquam erat
Your content goes here. Edit or remove this text inline or in the module Content settings.
01
Tortor egestas
Your content goes here. Edit or remove this text inline or in the module Content settings.
02
Cras consequat
Your content goes here. Edit or remove this text inline or in the module Content settings.
03
Divi List Grid Design - 11
Mariya Graywind
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Alex Freeman
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
William Smith
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Darrel Wilson
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Christina Rinaldi
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
James Robert
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Divi List Grid Design - 12
Darrel Wilson
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Chirstina Rinaldi
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Games Robert
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Mariya Graywind
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Alex Freeman
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
William Smith
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Divi List Grid Design - 13
Phasellus lacinia
Your content goes here. Edit or remove this text inline or in the module Content settings.
Facilisis libero
Your content goes here. Edit or remove this text inline or in the module Content settings.
Suspendisse urna
Your content goes here. Edit or remove this text inline or in the module Content settings.
Curabitur gravida
Your content goes here. Edit or remove this text inline or in the module Content settings.
Donec nec justo
Your content goes here. Edit or remove this text inline or in the module Content settings.
Aenean dignissim
Your content goes here. Edit or remove this text inline or in the module Content settings.
Nascetur ridiculus
Your content goes here. Edit or remove this text inline or in the module Content settings.
Quisque fermentum
Your content goes here. Edit or remove this text inline or in the module Content settings.
Divi List Grid Design - 14
Quisque fermentum
Your content goes here. Edit or remove this text inline or in the module Content settings.
Nascetur ridiculus
Your content goes here. Edit or remove this text inline or in the module Content settings.
Gravida convallis
Your content goes here. Edit or remove this text inline or in the module Content settings.
Cras consequat
Your content goes here. Edit or remove this text inline or in the module Content settings.
Pellentesque odio
Your content goes here. Edit or remove this text inline or in the module Content settings.
Aenean dignissim
Your content goes here. Edit or remove this text inline or in the module Content settings.
Suspendisse urna
Your content goes here. Edit or remove this text inline or in the module Content settings.
Nullam malesuada
Your content goes here. Edit or remove this text inline or in the module Content settings.
Divi List Grid Design - 15
Aenean dignissim
Your content goes here. Edit or remove this text inline or in the module Content settings.
Volutpat mattis
Your content goes here. Edit or remove this text inline or in the module Content settings.
Vivamus imperdiet
Your content goes here. Edit or remove this text inline or in the module Content settings.
Gravida convallis
Your content goes here. Edit or remove this text inline or in the module Content settings.
Vivamus imperdiet
Your content goes here. Edit or remove this text inline or in the module Content settings.
Gravida convallis
Your content goes here. Edit or remove this text inline or in the module Content settings.
Aenean dignissim
Your content goes here. Edit or remove this text inline or in the module Content settings.
Volutpat mattis
Your content goes here. Edit or remove this text inline or in the module Content settings.
Divi List Grid Design - 16
Divi List Grid Design - 17
Divi List Grid Design - 18
Morbi interdum
Donec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci Aenean.
01
Etiam pellentesque
Donec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci Aenean.
02
Sed adipiscing
Donec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci Aenean.
03
Phasellus ultrices
Donec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci Aenean.
01
Aliquam quam
Donec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci Aenean.
02
Facilisis auctor
Donec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci Aenean.
03
Divi List Grid Design - 19
Suspendise mauris
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
01
Adipiscing varius
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
02
Gravida vitae
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
03
Quisque lectus
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
04
Facilisis luctus
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
06
Aenean dignissim
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
06
Aliquam porttitor
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
07
Cras consequat
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
08
Etiam dignissim
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
09
Divi List Grid Design - 20
Aenean dignissim
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
01
Placerat ornare
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
02
Etiam dignissim
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
03
Quisque fermentum
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
04
Nascetur ridiculus
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
06
Integer sagittis
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
06
Suspendisse urna
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
07
Malesuada erat
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
08
Volutpat mattis
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
09
Divi List Grid Design - 21
Aenean dignissim
Donec nec justo felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
01
Placerat ornare
Donec nec justo felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
02
Cras consequat
Donec nec justo felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
03
Quisque feentum
Donec nec justo felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
04
Elentum imperdiet
Donec nec justo felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
05
Cras consequat
Donec nec justo felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
06
Divi List Grid Design - 22
Aliquam porttitor
Donec nec justo felis facilisis fermentum.
01
Vivamus ultrices
Donec nec justo felis facilisis fermentum.
02
Imperdiet nibh
Donec nec justo felis facilisis fermentum.
03
Taciti sociosqu
Donec nec justo felis facilisis fermentum.
04
Gravida tristique
Donec nec justo felis facilisis fermentum.
05
Volutpat mattis
Donec nec justo felis facilisis fermentum.
06
Divi List Grid Design - 23
Christina Rinaldi
Donec nec justo eget facilisis fermentum Aliquam porttitor mauris sit amet orci Aenean dignissim felis.
"
James Richardson
Donec nec justo eget facilisis fermentum Aliquam porttitor mauris sit amet orci Aenean dignissim felis.
"
Alex Freeman
Donec nec justo eget facilisis fermentum Aliquam porttitor mauris sit amet orci Aenean dignissim felis.
"
Mariya Graywind
Donec nec justo eget facilisis fermentum Aliquam porttitor mauris sit amet orci Aenean dignissim felis.
"
Divi List Grid Design - 24
Suspendisse laoreet
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
natoque penatibus
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Vivamus imperdiet
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Fusce accumsan
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Curabitur gravida
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Etiam dignissim
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Every list on this page is one module
List Grid comes with DiviGrid, together with all our other Divi modules.