Skip to main content

Quote block

What is the Quote block for?

Sometimes one sentence carries more than a whole paragraph. Use Quote when the wording itself matters: a line from an interview, article or conversation, or a memorable principle of your own. Supporting copy can add brief context, but it should not take over the role of the quotation.

The sense of scale comes from content width and inner spacing, rather than a separate size switch.

How prominent should the quote be?

Content width and inner spacing together determine whether it feels like a quick inline highlight or a major visual pause.

Compact — Reading + Tight

Good inside an article or longer page when you want one sentence to stand out without interrupting the reading rhythm.

Spacious — Wide + Spacious

Useful for a stronger brand statement or a visual pause between sections. It gives the sentence more air and emphasis.

Full band — Full

A rarer, stronger treatment. Use it when the quote should stop the page rhythm for a moment.

Three layouts, with an author

  • Beside: the quote in the wider column with its author under it, the supporting text beside it. This is the default, and the quote can sit on the left or the right.
  • Centred: quote, author and text stacked on the centre line.
  • Card: the quote and its author's portrait on a card, the text beside it.

The author's name and role (company, job title or town) have fields of their own and appear under the quote. With Portrait on, their photo shows beside the name; on the card, their initials when there is no photo. If you typed quotation marks around the quote yourself, the block does not double them. There is an example of each layout below.

“Visitors do not arrive to read everything. They arrive to make a decision faster.”

Compact highlighted quote, Beside layout. Pull out a short line from longer content when it can summarise the point on its own.

Do not start from an empty editor.

Spacious brand statement, Centred layout. A short, memorable principle can benefit from more space so it becomes a genuine visual pause.

After the first version, we no longer had to imagine what the site could be — we could discuss what was worth changing.
Eva Kovacsa made-up author for this example

Card layout, full width. This is demonstration copy with a made-up author, not a real customer quotation. Without a photo, the card shows the author's initials. On a live site, use an exact, approved line; to present several endorsements as trust-building proof, use the Testimonials block instead.

Quote, Callout box or Single testimonial? Use Quote when the exact wording matters. Use the Callout box for your own rule, warning or summary. If you want structured trust evidence with a person's name and role, use the Single testimonial block.

What makes a quote work?

The strongest quotations are not long. They are precise, credible and still true in context.

The wording matters

Do not pull out an arbitrary sentence. Choose one whose phrasing is worth preserving.

Short

One or two sentences usually has more impact than quoting a whole paragraph.

True in context

Do not shorten a quote in a way that changes or obscures the original meaning.

Credible source

When quoting someone else, make the source clear and use only an accurate, approved line.

What can you configure in the Quote block?

Beyond the words themselves, you can tune the layout, the author, width, background and spacing.

Layout

Beside, Centred or Card. In Beside and Card the quote, or the card, can sit on the left or the right.

Author and portrait

The author's name and role go under the quote, not into the supporting text. With Portrait on, their photo appears too; on the Card layout, their initials when there is no photo.

Content width

Choose Reading, Wide or Full to control how dominant the quotation feels on the page.

Background and width →

Use Default, Custom or Dark backgrounds. The section can stay in the content column, extend full width, or take both background and content edge to edge.

Inner spacing

Section inner spacing and custom padding determine how much room the quotation and supporting copy receive.

Quotation marks

The quotation marks take the block's accent colour. If you typed quotation marks around the quote yourself, the block does not double them.

GIVE THE SENTENCE WEIGHT

If one thought needs to be remembered, give it its own space.

Adjust the quote's layout, author and background so it fits the rhythm of the page without overpowering it.