Pull quote, Conduction Design System

PullQuote · editorial emphasis for long-form prose

Orange-knvb left border, cobalt-50 fill, italic cobalt body. Use to lift one or two load-bearing sentences out of a long-form opinion piece or product page. The hero variant adds an eyebrow hex bullet and removes italics for a citable position statement. Attribution slot is optional.

Default · pull-out from body copy

You buy a suite. You use a workspace. You inhabit a platform.

With attribution · cite line

Nextcloud-as-platform is true today in every structural sense that matters. The only thing missing is for the company, the ecosystem, and the buyers to all describe it that way out loud.
Ruben van der Linde, CTO Conduction

Hero variant · eyebrow hex + citable position

The thesis
Tomorrow's functionality will not be built by vendors. It will be built by users with AI. In that world, scale wins.
Ruben van der Linde, CTO Conduction

Compact · sidebar pull-out

The naming preceded the platform reality by years. The naming was load-bearing.

Mount in MDX as <PullQuote/>

Editorial emphasis for long-form prose. Use sparingly: one to three per page, on the sentences that carry the argument. Pair with the hero variant for a single citable position near the top of an opinion piece.

Import & example

import {PullQuote} from '@conduction/docusaurus-preset/components'; <PullQuote> You buy a suite. You use a workspace. You inhabit a platform. </PullQuote> <PullQuote attribution="Ruben van der Linde" role="CTO Conduction" > Nextcloud-as-platform is true today in every structural sense that matters. </PullQuote> <PullQuote variant="hero" eyebrow="The thesis" attribution="Ruben van der Linde" role="CTO Conduction" > Tomorrow's functionality will not be built by vendors. It will be built by users with AI. In that world, scale wins. </PullQuote>

Props

children ReactNode — the quote body

attribution string — name of the speaker (renders above role)

role string — role / affiliation, shown after the name

variant "default" | "hero" | "compact"

eyebrow string — hero-variant only, small label above the quote

className string