Content

Praise and excerpt

Quoted praise with who said it, and a passage from a book with its source.

Examples

Praise (Unresolved)Open “Praise (Unresolved)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

Excerpt (Unresolved)Open “Excerpt (Unresolved)” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

When to use it

Book and product pages. Text only: no photos, no stars.

Live: Unresolved.

Anatomy

Praise: .praise > figure > blockquote + figcaption; a lead quote larger (.praise-lead).
Credit: Name in 500, one line of credentials in secondary ink.
Excerpt: .excerpt-src (italic source) then .excerpt paragraphs under a 1px rule.

Behaviour

Phone, tablet, desktop: Lead quote 24/34 to 32/44.
Motion: None.

Accessibility

blockquote inside figure with figcaption.

Words

Quotes in curly quotes, translated faithfully if the original is in another language; name plus one line of credentials.

Code

Classes: .praise .praise-lead .excerpt .excerpt-src .pull. Styles in site/assets/css/site.css.

<div class="praise">
<figure class="praise-lead">
<blockquote><p>“This book doesn’t tell you what to do. It teaches you how to see.”</p></blockquote>
<figcaption>Dominik Schweizer<span>Product and business executive</span></figcaption>
</figure>
<figure>
<blockquote><p>“Niklaus knows the difference between stopping on purpose and stalling by default. So many leadership teams need that distinction more than they need another framework.”</p></blockquote>
<figcaption>Nick Wright<span>Founder, Go Slow to Go Fast</span></figcaption>
</figure>
</div>