Blog: add quotes shortcode for testimonial cards

[claude]

Requested by Den Delimarsky · Slack thread

Before / After

Before: customer quotes in blog posts render as plain markdown blockquotes, a gray bar with indented text.

After: quotes render as a horizontal strip of cards in the style of the claude.com blog. The strip breaks out of the post's text column and bleeds toward the viewport edges, up to 1200px wide, centered, three cards per view on desktop. Each card shows the company logo, the quote in body type wrapped in typographic quotation marks, and a two-line attribution with the person's name in bold and their title in muted regular type on the line below, with hairline dividers between cards. Quotes can run long: text spills downward without clamping, and every attribution in the set starts on the same line, sized by the longest quote, on every carousel page. Attributions that wrap do so below that shared line. When more quotes exist than fit one view, cards narrow slightly so a slice of the next card peeks at the right edge, and arrow buttons and pagination dots appear under the strip. A lone quote renders as a pull quote that stays in the text column. The strip shrinks back to the column width on narrow screens, with one card per view and a small peek on mobile, and everything follows the blog's light and dark themes.

Usage

Nothing to install. The two shortcodes and the stylesheet ship with the blog once this merges, and Hugo picks them up automatically.

To add quotes to a post:

1. Make the post a page bundle if it is not one already: a directory with an index.md inside, for example blog/content/posts/my-post/index.md.
2. Put each company's SVG logo in that directory next to index.md. Bundle SVGs are inlined into the page, so wordmarks that use currentColor adapt to light and dark automatically.
3. Add a quotes block where the cards should appear, with one quote per card:

{{< quotes >}}
{{< quote name="Ada Person" title="CTO" company="Acme" logo="acme-logo.svg" >}}
Quote text goes here. Markdown is supported.
{{< /quote >}}
{{< /quotes >}}

Parameters on quote:

• name: the person's name, shown in bold.
• title: the person's role, shown in muted type on its own line under the name. Optional. Without it the attribution is the name alone.
• company: the company name. It labels the logo for screen readers and renders as a text wordmark when no logo is given.
• logo: filename of an SVG in the post's page bundle. A path outside the bundle still renders, but as a plain img tag that keeps its hardcoded colors in both themes. Omit it to fall back to the text wordmark.

Layout comes for free. Three cards per view on desktop, two at medium widths, one on mobile, with a slice of the next card peeking at the right edge when more quotes exist than fit. Arrow buttons and pagination dots appear only when the quotes overflow one view. A single quote renders as a full-width pull quote that stays in the text column.

How

Two Hugo shortcodes plus a stylesheet:

• blog/layouts/shortcodes/quotes.html wraps the cards in a CSS scroll-snap track and carries a small vanilla JS snippet (emitted once per page, initialized after DOMContentLoaded so every quotes block on a page gets controls) that shows the arrows and dots only when the quotes overflow one view. No dependencies added.
• blog/layouts/shortcodes/quote.html renders one card. SVG logos from the post's page bundle are inlined, so currentColor wordmarks track the theme. Non-bundle paths fall back to an img tag, and omitting logo renders the company name as a text wordmark.
• blog/assets/css/extended/quotes.css styles the cards with the blog's existing CSS variables. The breakout is symmetric negative margins on the strip, capped at min((1200px - 100%) / 2, 50vw - 50% - 32px) per side. The 32px gutter absorbs the page scrollbar that 100vw includes, so the page never gains a horizontal scrollbar. The attribution start line is pure CSS: the track defines logo, quote, and attribution rows, and each card adopts them with grid-template-rows: subgrid (Chrome and Edge 117+, Firefox 71+, Safari 16+). Browsers without subgrid fall back to the previous flex layout, where attributions align to the card bottom instead.

Reviewers can see the component rendered in this PR's earlier preview deployments or by adding the shortcode block above to any post locally.

🤖 Generated with Claude Code

https://claude.ai/code/session_01YWbYcGYDQESh3KWwpfoc4V

[github-actions]

Preview

Preview deployments for this PR have been cleaned up.