Blockquote

the Blockquote-element dient zur display from Zitaten or hervorgehobenen Textabschnitten. it ist a wichtiges typografisches element, the Zitate visuell vom Haupttext absetzt.

Installation

the Blockquote-element ist Teil the Casoon UI Library.

# Installation the gesamten Bibliothek
npm install @casoon/ui-lib

Import

/* Import aller UI-elements */
@import '@casoon/ui-lib/ui.css';

/* or only the Typography-Components */
@import '@casoon/ui-lib/typography.css';

Basic Usage

<blockquote>
  Dies ist a Zitat or a hervorgehobener Textabschnitt.
</blockquote>

Dies ist a Zitat or a hervorgehobener Textabschnitt.

Variants

Standard-Blockquote

the einfachste Form des Blockquote-Elements with linkem Randbalken.

<blockquote>
  design ist not only, how it aussieht and oneself anfuhlt. design ist, how it funktioniert.
</blockquote>

design ist not only, how it aussieht and oneself anfuhlt. design ist, how it funktioniert.

with Quellenangabe

Fuge a Quellenangabe with dem <cite>-element hinzu.

<blockquote>
  design ist not only, how it aussieht and oneself anfuhlt. design ist, how it funktioniert.
  <cite>Steve Jobs</cite>
</blockquote>

design ist not only, how it aussieht and oneself anfuhlt. design ist, how it funktioniert. Steve Jobs

Pull-Quote

a hervorgehobenes Zitat with grosserer font and zentrierter alignment.

<blockquote class="pull-quote">
  Kreativitat ist, errors to erlauben. Kunst ist to wissen, welche one behalten soll.
</blockquote>

Kreativitat ist, errors to erlauben. Kunst ist to wissen, welche one behalten soll.

Im Content-area

within eines Content-Bereichs erhalt the Blockquote einen leicht anderen style.

<div class="content">
  <p>Einleitender Text...</p>
  
  <blockquote>
    a Zitat within eines Content-Bereichs hat einen leicht grauen background and einen farbigen Randbalken.
  </blockquote>
  
  <p>Fortfuhrender Text...</p>
</div>

Einleitender Text...

<blockquote style="background-color: #f9fafb; border-left: 4px solid #3b82f6; font-style: italic; margin: 1.5em 0; padding: 1em 1.5em;">
  a Zitat within eines Content-Bereichs hat einen leicht grauen background and einen farbigen Randbalken.
</blockquote>

<p style="margin-bottom: 1em;">Fortfuhrender Text...</p>

Anpassung

the Blockquote-element kann over CSS Variables angepasst become:

:root {
  /* Standard-Blockquote */
  --blockquote-border-color: var(--color-gray-200);
  --blockquote-border-width: 4px;
  --blockquote-color: var(--color-gray-700);
  --blockquote-font-size: var(--font-size-lg);
  --blockquote-padding-left: var(--space-4);
  --blockquote-margin-bottom: var(--space-6);
  
  /* Quellenangabe */
  --blockquote-cite-color: var(--color-gray-600);
  --blockquote-cite-font-size: var(--font-size-sm);
  --blockquote-cite-margin-top: var(--space-2);
  
  /* Pull-Quote */
  --pull-quote-color: var(--color-primary);
  --pull-quote-font-size: var(--font-size-2xl);
  --pull-quote-padding: var(--space-6) var(--space-8);
  --pull-quote-margin: var(--space-8) 0;
}

Accessibility

• Verwende the <blockquote>-element for Zitate, not only for visuelle Gestaltung
• Achte on ausreichenden Kontrast between Text and background
• if moglich, gib with <cite> the Quelle des Zitats on
• Stelle sicher, that the Schriftgrosse and the line-height good lesbar sind

Browser-Kompatibilitat

the Blockquote-element ist with allen modernen Browsern kompatibel.

function	Chrome	Firefox	Safari	Edge
Grundlegende Funktionalitat	✅	✅	✅	✅
CSS Styling	✅	✅	✅	✅
CSS Variables	49+	31+	9.1+	15+