Quote Values Combo
A layout that pairs a featured quote with a list of supporting values beside it. Use it to ground your mission in a memorable statement and proof.
A layout that pairs a featured quote with a list of supporting values beside it. Use it to ground your mission in a memorable statement and proof.
Search blocks by description or jump to a page.
Quote Values Combo opens with a large centered blockquote, a quote icon above it, and an avatar row below that names the person being quoted. Below that sits a bordered card holding a short mission statement with a heading and a paragraph. The block closes with a "Guiding Values" heading above a three-column grid of cards, each card carrying a bold colored left border, a value title, and one line of supporting text.
The three zones (quote, mission card, values grid) are independent of each other. You can rewrite every line of copy, swap the avatar photo, add or remove value cards, or drop the mission card entirely without disturbing the surrounding layout. The grid reflows to two columns on tablet and one column on mobile automatically.
This block suits an "About" or "Our Practice" page for a healthcare scheduling product where trust and clarity matter from the first scroll. The combination of a personal quote and concrete values is more grounding than a plain list of principles because it ties the values to a real voice. Use it when you want a single section to carry both emotional weight and factual proof of what guides the work.
A natural flow around it on a Portfolio page:
Before
After
The frame works for any product or practice that needs to pair a defining statement with the principles behind it:
Tip: write each value title as two words or fewer so the bold left border and heading stay visually balanced across all six cards.