Blockquote

Pull-quote styling for the native <blockquote> element (and a .blockquote class fallback). Adds an indent, a tinted accent rail, and an optional .blockquote-footer that auto-prepends an em-dash for attribution.

Live

Default blockquote with attribution footer

Live

First, solve the problem. Then, write the code.

John Johnson

HTML

<blockquote>
<p style="margin: 0 0 0.5rem;">First, solve the problem. Then, write the code.</p>
<footer class="blockquote-footer">John Johnson</footer>
</blockquote>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'typography-blockquote')
);

Playground

.blockquote class on a non-semantic element

Live

A pull-quote rendered on a <div> when the markup context forbids <blockquote>.

HTML

<div class="blockquote">
<p style="margin: 0 0 0.5rem;">A pull-quote rendered on a <code>&lt;div&gt;</code> when the markup context forbids <code>&lt;blockquote&gt;</code>.</p>
<p class="blockquote-footer" style="margin: 0;">Internal style guide</p>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'typography-blockquote')
);

Playground

Quote without attribution

Live

No footer, no em-dash. The accent rail still anchors the quote against body copy.

HTML

<blockquote>
<p style="margin: 0;">No footer, no em-dash. The accent rail still anchors the quote against body copy.</p>
</blockquote>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'typography-blockquote')
);

Playground

Markup

<!-- Selector targets the tag AND a class fallback. -->
<blockquote>
  <p>A long quote, lightly indented with a tinted accent rail.</p>
  <footer class="blockquote-footer">Ada Lovelace, <cite>Notes</cite></footer>
</blockquote>

<!-- Works on any element via .blockquote when you can't use <blockquote>. -->
<div class="blockquote">
  <p>Same styling, non-semantic carrier.</p>
  <p class="blockquote-footer">Anonymous</p>
</div>

Variables

Variable	Default	Notes
`$selector`	`'blockquote, .blockquote'`	Targets the tag and the class fallback.
`$footer-selector`	`'.blockquote-footer'`	Attribution line nested inside the quote.
`$padding-inline-start`	`1rem`	Logical inline-start indent.
`$border-inline-start`	`4px solid color-mix(in srgb, currentColor 30%, transparent)`	Accent rail tinted at 30% of `currentColor` so it reads as accent, not slab.
`$font-size`	`1.125rem`	Slightly larger than body copy.
`$footer-font-size`	`0.875rem`	Attribution sits below body size.
`$footer-color-mix`	`70%`	Footer mixes `currentColor` at 70% into transparent so it de-emphasises while staying AA-legible.

Override example

@use '@adnap/krysalicss/typography/blockquote' with (
  $padding-inline-start: 1.5rem,
  $font-size: 1.25rem,
  $footer-color-mix: 60%,
);

Tokens consumed

None — this module has no runtime --kc-* tokens. Both the accent rail and the footer use color-mix against currentColor, so they re-tint automatically when the surrounding theme's foreground changes. The em-dash (— ) is injected via ::before { content: '— '; } on .blockquote-footer.