Blockquote

Overview

Blockquote displays quoted content with semantic structure and visual emphasis. It is used for testimonials, customer feedback, editorial quotes, documentation excerpts, case-study highlights, changelog notes, analyst notes, and highlighted statements across Byteion dashboards, landing pages, admin documentation, ecommerce back offices, ERP/POS workflows, and starter kits. Blockquote is a pure CSS/Tailwind pattern built on the semantic <blockquote> element with Byteion typography and spacing tokens.

Why this exists

Without a shared Blockquote pattern, quoted content becomes inconsistent: random border colours, mismatched spacing, fake card styles, weak attribution, and poor dark-mode contrast. Some pages use border-l-4 border-gray-300, others wrap quotes in fake cards or alerts, and attribution often disappears on dark themes. Blockquote gives every quoted statement a consistent visual rhythm, trustworthy attribution pattern, and proper semantic markup that screen readers can identify.

Mental model

• Paragraph explains normal content — standard body copy for descriptions, documentation, and settings.
• Blockquote highlights someone else's words or a quoted statement — a visually distinct text block with a left border accent, usually italicised.
• Attribution tells users where the quote came from — a <figcaption> with the source name, role, and optional avatar.
• Composition with other primitives — testimonial patterns compose Blockquote with Avatar, Text, Badge, or Card for richer layouts.

Blockquote vs Paragraph vs Alert

• Paragraph — normal body copy and prose. Use for descriptions, documentation, settings copy, and long-form reading.
• Blockquote — quoted content from a person or source. Use for testimonials, editorial quotes, documentation excerpts, and case-study highlights.
• Alert — system-generated messages about status, warnings, or errors. Use for success confirmations, error notifications, and informational system feedback.

Blockquote is not a replacement for Alert. If the content is a system message — not a quotation — use Alert. If the content is a normal body paragraph, use Paragraph.

When to use

• Customer testimonials — featured quotes from satisfied users on landing pages and marketing sections
• Quoted user feedback — real feedback from customer interviews, surveys, or support conversations
• Case-study highlights — key results or quotes from case studies and success stories
• Documentation excerpts — quoted passages from external references, standards, or specifications
• Article and editorial quotes — pull quotes in blog posts, changelogs, and release notes
• Changelog or release-note highlights — standout items or user-facing summaries in product updates
• Dashboard analyst notes — annotated observations or quoted metrics in admin reports
• Landing-page social proof sections — testimonial grids and highlight quotes for marketing credibility

When not to use

• Do not use Blockquote for normal body paragraphs — reserve it for content that is actually quoted from a source
• Do not use it only for decoration — a left border accent is not a reason to use <blockquote> on non-quoted text
• Do not use it as an Alert, Callout, Badge, or Card replacement — each of those components serves a different communicative purpose
• Do not use it for fake or unverified testimonials — attribution must match a real source; invented quotes erode trust
• Do not put very long quotes inside cramped cards or table cells — quotes need breathing room; use a full-width section or modal for long excerpts
• Do not omit attribution when the source matters — if the quote comes from a specific person or document, include the source

Basic example

A simple editorial blockquote with a left border accent and italicised text:

<blockquote class="border-l-4 border-primary pl-6 py-2">
  <p class="text-base italic text-foreground leading-relaxed">
    "Design is not just what it looks like and feels like. Design is
    how it works. A solid design system bridges visual aesthetics
    and robust engineering."
  </p>
</blockquote>

Attribution

When a quote has a source, wrap the blockquote in a <figure> element and use <figcaption> for the attribution. This preserves the semantic relationship between the quote and its source:

<figure>
  <blockquote class="border-l-4 border-primary pl-6 py-2">
    <p class="text-base italic text-foreground leading-relaxed">
      "Byteion helped us reduce our dashboard build time from weeks
      to days."
    </p>
  </blockquote>
  <figcaption class="mt-3 pl-6 flex items-center gap-3">
    <div class="flex h-9 w-9 items-center justify-center rounded-full
                bg-primary/10 text-sm font-semibold text-primary">AK</div>
    <div>
      <div class="text-sm font-semibold text-foreground">Alex Kim</div>
      <div class="text-xs text-muted-foreground">CTO, Meridian Labs</div>
    </div>
  </figcaption>
</figure>

Usage patterns

Blockquote adapts to several common layouts across Byteion products:

<!-- Documentation quote -->
<blockquote class="border-l-4 border-border pl-5 py-1">
  <p class="text-sm text-muted-foreground leading-relaxed">
    "The maximum payload size for a single API request is 10 MB."
  </p>
</blockquote>

<!-- Dashboard / admin note -->
<blockquote class="border-l-4 border-amber-500 pl-4 py-1.5 bg-amber-500/5 rounded-r-lg">
  <p class="text-sm text-foreground leading-relaxed">
    <strong>Note:</strong> Orders placed after 2:00 PM PST are processed
    on the next business day.
</p>

<!-- Testimonial card -->
<div class="rounded-xl border border-border bg-background p-5">
  <blockquote class="border-none p-0">
    <p class="text-base italic text-foreground leading-relaxed">
      "Byteion transformed how our team builds internal tools."
    </p>
  </blockquote>
  <figcaption class="mt-4 flex items-center gap-3">
    <div class="flex h-10 w-10 items-center justify-center
                rounded-full bg-muted text-sm font-semibold text-foreground">SR</div>
    <div>
      <div class="text-sm font-semibold text-foreground">Sarah Rivera</div>
      <div class="text-xs text-muted-foreground">VP of Engineering, CloudStack</div>
    </div>
  </figcaption>
</div>

Variants and composition

Blockquote exposes a single semantic HTML element. The visual variation comes from composition with Byteion tokens and companion components:

For testimonial cards, compose Blockquote with <figure>, <figcaption>, Avatar, Text, and Card to create rich quote layouts. For system messages, use Alert instead of a blockquote-style note.

Anatomy

• Blockquote element — a semantic <blockquote> tag that screen readers identify as quoted content
• Left border accent — border-l-4 with an accent colour token for visual distinction
• Quote text — italic styling to differentiate quoted text from body copy
• Optional <figure> wrapper — pairs the blockquote with its attribution
• Optional <figcaption> — source name and optional metadata (role, organisation)
• Optional Avatar — visual indicator of the source when attribution is a person

Usage guidelines

• Use Blockquote only when the content is actually quoted from a person, document, or source
• Add attribution via <figcaption> when the source matters for credibility or context
• Keep quote text readable — use text-base for editorial quotes and text-sm for compact dashboard notes
• Use the standard border-l-4 with a token colour — avoid hardcoded hex or custom border widths
• For short inline quotes inside a sentence, use <q> instead of <blockquote>
• Do not invent testimonials or use fake attribution — real quotes build trust, fake ones destroy it

Do and Don't

Accessibility

Blockquote has no keyboard behavior by itself. It renders a semantic <blockquote> element that screen readers announce as quoted content:

• Use semantic <blockquote> markup — screen readers identify and navigate blockquotes. Do not use <div> or <p> with border styling as a blockquote replacement
• Use <cite> for source URLs — when quoting from an online document, the cite attribute on <blockquote> provides the source URL to assistive technology
• Keep quote text readable — ensure adequate font size and contrast in light mode, dark mode, and branded themes
• Do not rely on border colour alone — the left border accent is a visual cue; the text itself and the <blockquote> tag carry the semantic meaning
• Links inside quotes or attribution must remain identifiable — inline links need a distinct underline or colour
• Keyboard behavior — Blockquote has no keyboard interaction by itself. Interactive children (links) manage their own focus

Customization

Blockquote styling is customized through Byteion tokens — border colour, surface or background, text colour, spacing, border radius, and shadow. The standard pattern uses border-l-4 border-primary pl-6 py-2 from the Tailwind token scale. For documentation quotes, use border-border instead of border-primary. For compact notes, add a subtle background with bg-amber-500/5 and a matching border. Avoid arbitrary one-off border widths, colours, or spacing unless intentionally extending the token system.

HTML example

<!-- Simple editorial blockquote -->
<blockquote class="border-l-4 border-primary pl-6 py-2">
  <p class="text-base italic text-foreground leading-relaxed">
    "Byteion helped us reduce our dashboard build time from weeks to days."
  </p>
</blockquote>

<!-- Quote with attribution and avatar initial -->
<figure>
  <blockquote class="border-l-4 border-primary pl-6 py-2">
    <p class="text-base italic text-foreground leading-relaxed">
      "The component library is comprehensive and the token system
      makes rebranding effortless."
    </p>
  </blockquote>
  <figcaption class="mt-3 pl-6 flex items-center gap-3">
    <div class="flex h-9 w-9 items-center justify-center rounded-full
                bg-primary/10 text-sm font-semibold text-primary">AK</div>
    <div>
      <div class="text-sm font-semibold text-foreground">Alex Kim</div>
      <div class="text-xs text-muted-foreground">CTO, Meridian Labs</div>
    </div>
  </figcaption>
</figure>

<!-- Documentation quote -->
<blockquote class="border-l-4 border-border pl-5 py-1">
  <p class="text-sm text-muted-foreground leading-relaxed">
    "The maximum payload size for a single API request is 10 MB."
  </p>
</blockquote>

<!-- Testimonial card -->
<div class="rounded-xl border border-border bg-background p-5">
  <blockquote class="border-none p-0">
    <p class="text-base italic text-foreground leading-relaxed">
      "Byteion transformed how our team builds internal tools."
    </p>
  </blockquote>
  <figcaption class="mt-4 flex items-center gap-3">
    <div class="flex h-10 w-10 items-center justify-center
                rounded-full bg-muted text-sm font-semibold text-foreground">SR</div>
    <div>
      <div class="text-sm font-semibold text-foreground">Sarah Rivera</div>
      <div class="text-xs text-muted-foreground">VP of Engineering, CloudStack</div>
    </div>
  </figcaption>
</div>

React example

Blockquote is a pure HTML/Tailwind pattern — there is no React component. Apply the className attributes directly on a <blockquote> element:

function EditorialQuote() {
  return (
    <blockquote className="border-l-4 border-primary pl-6 py-2">
      <p className="text-base italic text-foreground leading-relaxed">
        "Byteion helped us reduce our dashboard build time from weeks to days."
      </p>
    </blockquote>
  );
}

function QuoteWithAttribution() {
  return (
    <figure>
      <blockquote className="border-l-4 border-primary pl-6 py-2">
        <p className="text-base italic text-foreground leading-relaxed">
          "The component library is comprehensive."
        </p>
      </blockquote>
      <figcaption className="mt-3 pl-6 flex items-center gap-3">
        <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary">
          AK
        </div>
        <div>
          <div className="text-sm font-semibold text-foreground">Alex Kim</div>
          <div className="text-xs text-muted-foreground">CTO, Meridian Labs</div>
        </div>
      </figcaption>
    </figure>
  );
}

function DocQuote() {
  return (
    <blockquote className="border-l-4 border-border pl-5 py-1">
      <p className="text-sm text-muted-foreground leading-relaxed">
        "The maximum payload size for a single API request is 10 MB."
      </p>
    </blockquote>
  );
}

function TestimonialCard() {
  return (
    <div className="rounded-xl border border-border bg-background p-5">
      <blockquote className="border-none p-0">
        <p className="text-base italic text-foreground leading-relaxed">
          "Byteion transformed how our team builds internal tools."
        </p>
      </blockquote>
      <figcaption className="mt-4 flex items-center gap-3">
        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground">
          SR
        </div>
        <div>
          <div className="text-sm font-semibold text-foreground">Sarah Rivera</div>
          <div className="text-xs text-muted-foreground">VP of Engineering, CloudStack</div>
        </div>
      </figcaption>
    </div>
  );
}

Vue example

Blockquote is a pure HTML/Tailwind pattern — there is no Vue component. Apply classes directly on a <blockquote> element:

<template>
  <!-- Editorial quote -->
  <blockquote class="border-l-4 border-primary pl-6 py-2">
    <p class="text-base italic text-foreground leading-relaxed">
      "Byteion helped us reduce our dashboard build time from weeks to days."
    </p>
  </blockquote>

  <!-- Quote with attribution -->
  <figure>
    <blockquote class="border-l-4 border-primary pl-6 py-2">
      <p class="text-base italic text-foreground leading-relaxed">
        "The component library is comprehensive."
      </p>
    </blockquote>
    <figcaption class="mt-3 pl-6 flex items-center gap-3">
      <div class="flex h-9 w-9 items-center justify-center rounded-full
                  bg-primary/10 text-sm font-semibold text-primary">AK</div>
      <div>
        <div class="text-sm font-semibold text-foreground">Alex Kim</div>
        <div class="text-xs text-muted-foreground">CTO, Meridian Labs</div>
      </div>
    </figcaption>
  </figure>

  <!-- Testimonial card -->
  <div class="rounded-xl border border-border bg-background p-5">
    <blockquote class="border-none p-0">
      <p class="text-base italic text-foreground leading-relaxed">
        "Byteion transformed how our team builds internal tools."
      </p>
    </blockquote>
    <figcaption class="mt-4 flex items-center gap-3">
      <div class="flex h-10 w-10 items-center justify-center
                  rounded-full bg-muted text-sm font-semibold text-foreground">SR</div>
      <div>
        <div class="text-sm font-semibold text-foreground">Sarah Rivera</div>
        <div class="text-xs text-muted-foreground">VP of Engineering, CloudStack</div>
      </div>
    </figcaption>
  </div>
</template>

API Reference

Blockquote uses the standard HTML <blockquote> element with Byteion typography tokens applied via Tailwind utility classes. There is no component, no props, and no JavaScript import:

React and Vue projects use the same approach: a plain <blockquote> element with Byteion Tailwind classes. No import needed.

Developer tips

• Use Blockquote only when the content is actually quoted — if it is not a direct quote from a person or source, use Paragraph or Alert instead
• Keep attribution close to the quote — always place <figcaption> immediately after the blockquote inside a <figure> wrapper
• Use <cite> when source metadata is available — the cite attribute on <blockquote> provides the source URL to screen readers
• Test long quotes and translated content — quotes in German or Russian may be significantly longer than the English version; ensure they wrap gracefully
• Test testimonial cards in grid layouts — when composing a testimonial grid, ensure cards have equal height and consistent spacing
• Keep dark mode contrast strong — verify border colours and text contrast against dark backgrounds

Common mistakes

• Using Blockquote for decorative paragraphs — applying border-l-4 to a <p> for visual effect does not make it a quote; use Paragraph with a custom border if decoration is the only goal
• Missing attribution for testimonials — a testimonial without a name or source looks anonymous and reduces credibility
• Fake or unverified testimonials — never invent quotes or attribution; real quotes build trust, fake ones damage product reputation
• Overlong quotes in small cards — long quotes need horizontal space; card testimonial grids should limit quote length or use a consistent truncation pattern
• Hardcoded border colours — using border-[#somehex] instead of border-primary breaks dark-mode and branded theme switching
• Using Blockquote instead of Alert for system messages — system warnings, errors, and confirmations belong in Alert, not in a styled blockquote

Production usage tips

• Verify testimonial attribution before publishing — confirm that quoted names, roles, and organisations are accurate and have consent
• Test quote wrapping on mobile — verify blockquote reflow at 375 px without overflow or awkward line breaks
• Test dark mode and branded themes — border-primary adapts automatically; hardcoded colours do not
• Check grid alignment for testimonial layouts — testimonial cards in a grid should have equal-height containers and consistent padding
• Keep React and Vue output aligned with the core markup — all frameworks use the same <blockquote> + Tailwind classes

Premium examples

Pro patterns available in Byteion Pro:

• Testimonial grid with avatars and roles — a responsive grid of testimonial cards, each with a blockquote, avatar initial, name, and role attribution
• Case-study quote section — a featured quote from a case study with the source photo, logo, and key metrics alongside the blockquote
• Customer feedback card — a compact feedback card with a short blockquote, star rating, and customer metadata for NPS or survey results
• Documentation quote or citation block — a reference blockquote with border-border styling, source citation link, and optional page number
• Analyst note block for dashboards — a compact highlighted note with amber left border, icon, and timestamp for operational dashboards
• Landing-page social proof section — a full-width testimonial section with logo bar, featured quote, and a grid of micro-testimonials with attribution

Related components

• Paragraph — standard body copy for non-quoted prose, descriptions, and documentation
• Text — inline labels, captions, metadata, helper text, inline code, and keyboard shortcuts
• Alert — system-generated feedback messages, distinct from quoted content
• Card — surface container that wraps testimonial blockquotes with avatar and attribution
• Badge — compact status labels that can accompany attribution metadata

API Reference

Related components

Pair this component with adjacent Byteion primitives from the same workflow: form controls for data entry, feedback components for validation, and layout primitives for spacing.

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX