Blockquote

Styled pull-quote with optional citation for editorial emphasis.

Components

Blockquote

typography

static

<arc-blockquote>

Overview

Blockquote presents quotations, testimonials, and editorial callouts. It renders a semantic `<blockquote>` element wrapped in a dark-themed container with a subtle gradient accent line across the top edge and a large decorative opening-quote glyph. The default variant displays quote text in the primary text color with an italic style, while the `accent` variant renders the quote text with a gradient fill derived from the accent token system. Both variants include an optional citation footer that appears beneath the quote in small, uppercase, accented type prefixed with an em dash. The component uses CSS parts (`blockquote`, `quote`, `cite`) for external style overrides. The top gradient line and decorative quote mark are rendered with pseudo-elements, keeping the DOM minimal and the markup semantic.

Guidelines

When to use

Use for editorial pull-quotes, testimonials, and highlighted excerpts
Provide a cite attribute when the source or author is known
Use the accent variant sparingly to highlight a single key quote on a page
Keep quote content concise: one to three sentences works best
Pair with Text and Card components for editorial layouts

When not to use

Do not use Blockquote for generic content boxes. Use an Alert (`variant="tip"`) or Card instead
Do not stack multiple accent-variant blockquotes on the same page
Do not use overly long quotations that would work better as inline text
Do not remove the cite attribute if the quote has a known author
Do not nest blockquotes inside other blockquotes

Features

Semantic <blockquote> element with optional <footer> citation
Top gradient accent line via ::before pseudo-element (no left-border pattern)
Decorative opening-quote glyph rendered with ::after pseudo-element
Two variants: default (standard text) and accent (gradient text fill)
Optional cite prop for attribution with em dash prefix and uppercase styling
CSS parts (blockquote, quote, cite) for external style overrides
Subtle rgba background tint derived from accent-primary token
`prefers-reduced-motion` support disables transitions and animations

Preview

The most dangerous phrase in the language is: we have always done it this way.

Usage

<arc-blockquote cite="Grace Hopper">
  The most dangerous phrase in the language is:
  we have always done it this way.
</arc-blockquote>

<arc-blockquote variant="accent" cite="Alan Kay">
  The best way to predict the future is to invent it.
</arc-blockquote>

import { Blockquote } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <>
      <Blockquote cite="Grace Hopper">
        The most dangerous phrase in the language is:
        we have always done it this way.
      </Blockquote>

      <Blockquote variant="accent" cite="Alan Kay">
        The best way to predict the future is to invent it.
      </Blockquote>
    </>
  );
}

<script setup>
import { Blockquote } from '@arclux/arc-ui-vue';
</script>

<template>
  <Blockquote cite="Grace Hopper">
    The most dangerous phrase in the language is:
    we have always done it this way.
  </Blockquote>

  <Blockquote variant="accent" cite="Alan Kay">
    The best way to predict the future is to invent it.
  </Blockquote>
</template>

<script>
  import { Blockquote } from '@arclux/arc-ui-svelte';
</script>

<Blockquote cite="Grace Hopper">
  The most dangerous phrase in the language is:
  we have always done it this way.
</Blockquote>

<Blockquote variant="accent" cite="Alan Kay">
  The best way to predict the future is to invent it.
</Blockquote>

import { Component } from '@angular/core';
import { Blockquote } from '@arclux/arc-ui-angular';

@Component({
  imports: [Blockquote],
  template: `
    <arc-blockquote cite="Grace Hopper">
      The most dangerous phrase in the language is:
      we have always done it this way.
    </arc-blockquote>

    <arc-blockquote variant="accent" cite="Alan Kay">
      The best way to predict the future is to invent it.
    </arc-blockquote>
  `,
})
export class MyComponent {}

import { Blockquote } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <>
      <Blockquote cite="Grace Hopper">
        The most dangerous phrase in the language is:
        we have always done it this way.
      </Blockquote>

      <Blockquote variant="accent" cite="Alan Kay">
        The best way to predict the future is to invent it.
      </Blockquote>
    </>
  );
}

import { Blockquote } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <>
      <Blockquote cite="Grace Hopper">
        The most dangerous phrase in the language is:
        we have always done it this way.
      </Blockquote>

      <Blockquote variant="accent" cite="Alan Kay">
        The best way to predict the future is to invent it.
      </Blockquote>
    </>
  );
}

API

citestring='': Citation or attribution text displayed beneath the quote with an em dash prefix
variant'default' | 'accent'='default': Visual variant. Accent applies a gradient text fill to the quote content.

Blockquote

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight