Skip to content
ARC UI ARC Reactive Components
Docs Components Tokens Synthesizer
v2.1.0
Getting Started Frameworks Design Tokens Theming Theme Synthesizer Accessibility Browser Support Changelog Contributing All Components App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageInfinite ScrollMarqueeScroll AreaSeparatorSkeletonSpinnerStackVirtual List Animated NumberBadgeComparisonCountdown TimerData TableDescription ListDiffKey ValueListMeterSparklineStatStepperTableTagTimelineValue Card BlockquoteCode BlockGradient TextHighlightKbdMarkdownNumber FormatProseTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerFieldsetFile UploadFormHotkeyIcon ButtonInputInput GroupLabelMulti SelectNumber InputOTP InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSliderSortable ListSwitch GroupTextareaTheme ToggleTime PickerToggle AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
Components Blockquote
typography static
<arc-blockquote>

Overview

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

  • Use Blockquote for generic content boxes - use Callout or Card instead
  • Stack multiple accent-variant blockquotes on the same page
  • Use overly long quotations that would be better served by inline text
  • Remove the cite attribute if the quote has a known author
  • 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';

<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: `
    <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>
  `,
})
export class MyComponent {}
 
import { Blockquote } from '@arclux/arc-ui-solid';

<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';

<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

Prop Type Default Description
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

Accelerated with AI. Engineered with precision.

ARC UI

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