Blockquote

Blockquote utilities help you present quotations, testimonials, citations, pull quotes, and highlighted excerpts with clean spacing, readable typography, and consistent visual rhythm.

FrontAlign provides semantic blockquote styling, citation footer support, utility-class usage, and automatic dark mode compatibility — all with pure CSS and no runtime dependency.

Quick reference

Class	Purpose	Common use
`blockquote`	Applies blockquote styling to any element.	Testimonials, custom quote wrappers, non-semantic containers.
`is-boxed`	Applies the boxed blockquote style to a native blockquote element.	Semantic quotations, article quotes, documentation callouts.
`blockquote-footer`	Displays citation, author, or source information.	Quote authors, product reviews, editorial notes.

Usage

There are two ways to apply blockquote styling, depending on whether the content is a true quotation or a custom layout block.

Semantic quote

Use a native blockquote element with the blockquote class whenever the content is an actual quotation. This is the preferred approach — it carries proper meaning for assistive technologies and search engines.

<blockquote class="blockquote">
  Simplicity is the ultimate sophistication.

  <footer class="blockquote-footer">
    Leonardo da Vinci
  </footer>
</blockquote>

Simplicity is the ultimate sophistication.
Leonardo da Vinci

Boxed quote

Add is-boxed to a blockquote to wrap the quote in a padded, bordered surface. Use it when a quotation needs to stand apart from surrounding text — documentation callouts, important notes, or highlighted principles.

<blockquote class="blockquote is-boxed">
  Always prefer semantic HTML when possible.

  <footer class="blockquote-footer">
    FrontAlign Documentation
  </footer>
</blockquote>

Always prefer semantic HTML when possible.
FrontAlign Documentation

Utility class on a custom element

Apply the same styling to non-blockquote elements with the blockquote utility class. Reach for this when you need a div-based wrapper instead of native quote semantics — testimonial cards and layout blocks are typical cases.

<div class="blockquote">
  FrontAlign provides structure without sacrificing flexibility.

  <div class="blockquote-footer">
    FrontAlign Philosophy
  </div>
</div>

FrontAlign provides structure without sacrificing flexibility.

Footer and citation

blockquote-footer displays the quote's source, author, role, or citation. FrontAlign automatically prepends an em dash, so you only need to provide the name:

<footer class="blockquote-footer">
  Steve Jobs
</footer>

renders as:

— Steve Jobs

Composing with other utilities

Blockquote classes are designed to combine with FrontAlign's border, shadow, radius, and transition utilities for stronger visual emphasis.

<!-- Stronger separation -->
<blockquote class="blockquote is-boxed border-primary">
  Important statement
</blockquote>

<!-- Featured surface -->
<blockquote class="blockquote is-boxed shadow rounded-3">
  Build interfaces with structure, speed, and freedom.

  <footer class="blockquote-footer">
    FrontAlign
  </footer>
</blockquote>

<!-- Interactive testimonial card -->
<blockquote class="blockquote is-boxed transition-all hover:shadow-large">
  Interactive testimonial
</blockquote>

Important statement

Build interfaces with structure, speed, and freedom.
FrontAlign

Real-world examples

Customer review

<blockquote class="blockquote is-boxed">
  The developer experience is outstanding.

  <footer class="blockquote-footer">
    Product Review
  </footer>
</blockquote>

The developer experience is outstanding.
Product Review

Team culture

<blockquote class="blockquote is-boxed">
  Ship small. Improve continuously.

  <footer class="blockquote-footer">
    Engineering Team
  </footer>
</blockquote>

Ship small. Improve continuously.
Engineering Team

Article excerpt

<article>
  <p>Modern design systems require consistency and flexibility.</p>

  <blockquote class="blockquote is-boxed">
    Great products are built by reducing complexity, not adding more of it.

    <footer class="blockquote-footer">
      Product Design Principle
    </footer>
  </blockquote>

  <p>This approach keeps interfaces maintainable over time.</p>
</article>

Modern design systems require consistency and flexibility.

Great products are built by reducing complexity, not adding more of it.
Product Design Principle

This approach keeps interfaces maintainable over time.

Choosing the right pattern

Pattern	Recommended class	Best for
Semantic quote	`blockquote`	Actual quoted content using native HTML meaning.
Boxed callout	`blockquote is-boxed`	Documentation notes, principles, and highlighted excerpts.
Custom wrapper	`blockquote` on a `div`	Testimonials or layout blocks where a div-based wrapper is needed.
Citation	`blockquote-footer`	Author names, roles, review sources, and editorial references.
Featured quote	`blockquote is-boxed shadow rounded-3`	Pull quotes, marketing quotes, and premium highlighted excerpts.

Accessibility

Use the semantic <blockquote> element whenever content represents an actual quotation, and reserve the utility class for layout-driven cases where a div wrapper is required. This distinction keeps page structure meaningful for screen readers and search engines without limiting visual flexibility.

Best practices

Use a semantic <blockquote> for real quotations; reach for the utility class only on custom wrappers.
Always include a source with blockquote-footer when one is available.
Reserve is-boxed for content that should visually stand apart, such as callouts and pull quotes.
Keep quotes concise — blockquotes are for emphasis, not long-form text.
Combine with shadow, border-*, and rounded-* utilities for featured or marketing content.
Rely on the built-in dark mode styles instead of creating separate variants.