Quote - National Design System

A semantic quotation block for surfacing attributed content with decorative icon marks, an optional title, and persona-based attribution.

Quote Builder

Toggle optional parts to build the layout you need. Use the default background for standalone surface cards, or transparent to embed inside an existing section.

The Power of Design
A well-crafted design system transforms how teams build products, creating consistency that users feel without necessarily seeing.

Ahmed Al-Harbi Head of Design

Built-in Features

Spec-correct Semantic Markup

Rendered with <figure>, <blockquote>, <figcaption>, and <cite> as recommended by the HTML Living Standard for a quoted excerpt with attribution.

Icon-based Quote Marks

Opening and closing marks render as SVG mask images via CSS ::before and ::after, keeping them out of the accessibility tree and never blocking text selection.

RTL and LTR Adaptive

Quote marks automatically swap corners and mirror orientation between Arabic RTL and English LTR using CSS logical properties and transform-only overrides. No additional markup is required.

Dark Mode Adaptive

The mark color resolves through --text-primary-sa-flag, a semantic token that automatically shifts to a lighter green in dark themes without any component-level overrides.

Persona Integration

The author block embeds Persona at the nds-sm size tier, inheriting all persona token overrides and dark-mode behavior automatically.

CSS Token Overrides

Twelve scoped custom properties expose every visual dimension: background, border, radius, padding, mark size, mark color, title and body typography, and text colors. Set any on the .nds-quote element to restyle without touching SCSS.

Usage Guidelines

Best Practices

Use Quote to surface a single attributed statement that reinforces a point on the page: testimonials, editorial highlights, research findings, or policy citations.
Place Quote in a content section alongside related body text rather than in isolation. The component draws attention to a specific claim, so surrounding context helps readers evaluate it.
Always include the cite attribute on <blockquote> when the source has a URL. This does not render visually but signals provenance to search engines and assistive tools.
Use the transparent variant when embedding inside a colored section or over a tinted background. Use the default variant (white card surface) when the quote sits on a neutral page background and needs its own visual boundary.
Keep the title short: one to six words that frame the quotation. If you cannot summarize the quote in a few words, omit the title rather than writing a long heading.
Omit the author block when the source is a document, publication, or anonymous. Attributing to a name without a face or context can feel misleading. Use the title field to name the source instead.
Do not use Quote for system feedback, inline help text, or UI copy. For those cases, use Alert or a plain paragraph instead.
Avoid stacking multiple Quote blocks consecutively. If you need to display several testimonials, consider a slider or a grid of compact cards rather than a vertical list of full-sized quotes.
The persona inside the author block uses nds-sm size by default. Do not replace it with a larger persona tier as it will visually overpower the quotation.

Modifier Classes

Class	Description
`nds-transparent`	Removes the card background and border. Use when embedding the quote over an existing colored or textured surface.

CSS Custom Properties

Property	Default	Description
`--quote-background-default`	`--background-card`	Card surface color in the default variant.
`--quote-border`	`--border-default`	Border color around the card.
`--quote-radius`	`--radius-lg`	Corner radius of the card.
`--quote-padding`	`--spacing-2xl`	Inner padding on all sides. Also controls how far the marks bleed toward the card edges.
`--quote-mark-color`	`--text-primary-sa-flag`	Fill color of the opening and closing icon marks.
`--quote-mark-size`	`48px`	Width and height of each icon mark.
`--quote-title-FS`	`--typo-display-xs-FS`	Font size of the title paragraph.
`--quote-title-LH`	`--typo-display-xs-LH`	Line height of the title paragraph.
`--quote-title-color`	`--text-default`	Text color of the title.
`--quote-text-FS`	`--typo-text-xl-FS`	Font size of the quotation body.
`--quote-text-LH`	`--typo-text-xl-LH`	Line height of the quotation body.
`--quote-text-color`	`--text-primary-paragraph`	Text color of the quotation body.