Grid Of Core Values
A grid of cards, each naming one core value with an icon and a short line of detail. Use it to lay out the principles behind your work at a glance.
A grid of cards, each naming one core value with an icon and a short line of detail. Use it to lay out the principles behind your work at a glance.
Search blocks by description or jump to a page.
Grid Of Core Values opens with a centered heading and a short supporting sentence, then flows into a three-column card grid. Each card holds a tinted icon square, a value name in a bold heading, and one line of description. The demo ships nine values covering topics like integrity, collaboration, and sustainability, filling the grid with three even rows.
The header copy and each card are fully independent. You can rewrite any title or description, swap the icons, or change the number of cards to match your actual principles. The grid reflows to two columns on tablet and a single column on mobile without any extra configuration.
This layout suits an "about" or "company culture" page where you need to communicate guiding principles at a glance rather than in prose. For a fintech or banking product this is a natural fit on a trust or compliance page, where naming values like integrity and transparency side by side reassures prospective customers before they hand over financial data. The card grid is more scannable than a narrative block when visitors are evaluating whether your stated values match their own, and it is more compact than a pillar layout when you have more than four or five items.
A natural flow around it on a Portfolio page:
Before
After
Each card is a self-contained unit, so the grid accepts a wide range of value sets beyond the defaults:
Tip: nine cards fill three clean rows at the default three-column layout. Sticking to multiples of three keeps the grid balanced on desktop without a trailing partial row.