Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Blockquote

Styled pull-quote with optional citation for editorial emphasis.

Components Blockquote
typography static
<arc-blockquote>

Overview

Blockquote is a typographic component for presenting quotations, testimonials, and editorial callouts with visual distinction. 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 fine-grained 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 rich editorial layouts

When not to use

  • Do not use Blockquote for generic content boxes - use Callout or Card instead
  • Do not Stack multiple accent-variant blockquotes on the same page
  • Do not use overly long quotations that would be better served by 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

cite string ''
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.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy