33 lines
1.8 KiB
Markdown
33 lines
1.8 KiB
Markdown
|
## 09 · Quote-Led
|
|||
|
|
|
|||
|
|
The hero is a pull-quote with attribution. The headline is borrowed credibility, not the brand's voice. The page leads with social proof.
|
|||
|
|
|
|||
|
|
- **Heading:** italic display setting a customer's quote (36–60 px), with attribution below in small caps.
|
|||
|
|
- **Body:** continues with additional testimonials, case studies, or a quiet feature list.
|
|||
|
|
- **Divider:** centered quote-mark glyph or an em-rule between testimonials.
|
|||
|
|
- **Button:** typographic link beneath the attribution ("Read the full case study →").
|
|||
|
|
- **Image:** small avatar or company logo by the attribution; otherwise none.
|
|||
|
|
- **Reveal:** none in fold; below-fold may stagger.
|
|||
|
|
|
|||
|
|
Reach for it for B2B products with strong customer voices, agency case-study pages, fundraising sites, anywhere "people like me use this" is the unlock.
|
|||
|
|
|
|||
|
|
Avoid for new products without real testimonials. Fake quotes destroy trust on inspection.
|
|||
|
|
|
|||
|
|
Reference: many B2B SaaS landings, agency homepages, university development pages.
|
|||
|
|
|
|||
|
|
**Sample opening lines** (imitate the *specificity* — quote-led pages let someone else say it, then attribute):
|
|||
|
|
> *"I started listening on a long bus ride. By the third episode I'd missed my stop, and I didn't mind."* — Tide (test 01) — story-shaped, attributed to a listener
|
|||
|
|
> *"Restraint, repeated, becomes a signature."* — Hallmark Atelier — short, philosophical, signed by the studio
|
|||
|
|
> *"It told me the span that regressed, the deploy that caused it, and the engineer to ask. We rolled back in eight minutes."* — Tracejam-style — names the outcome with a number
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<section class="quote-hero">
|
|||
|
|
<blockquote class="display-italic">"…"</blockquote>
|
|||
|
|
<p class="attribution">— Name, Title, Company</p>
|
|||
|
|
<a class="link">Read the case →</a>
|
|||
|
|
</section>
|
|||
|
|
<section class="more-quotes">…</section>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|