Featured Quote Dark Variant Logos Block for React

The quote is three strings in QUOTE: before, key and after. The marker goes on key, so move words between the three to mark a different phrase. The marker's colour is MARKER, a tint of the foreground; leave it as it is and the stroke stays monochrome and readable in every preset, light or dark.

The block never forces a dark panel: it follows your theme, light on a light page and dark on a dark one. What the slug's dark twin kept is the structure: a tinted shell with a raised panel inside it, which reads as a distinct, premium object in either mode. A forced-dark panel would turn white in a dark theme and fight the page.

The shell fades up once when the page loads, the poster a moment after it, and the highlighter stroke draws across the marked phrase half a second later, in a little over a second. With reduced motion the transitions are off and the stroke is simply there.

Yes. The quote is a figure holding a blockquote and a figcaption, and the marker is a background, not a different element, so a screen reader reads the quote as one sentence. The block's h2 is visible only to screen readers ("Ormsby County Libraries runs on Hollowell"). The curly quotation marks sit inside a bdi element so a right-to-left page keeps them in order. The icons and the avatar are decorative and hidden from assistive technology.

Yes. The shell is a tint of the muted colour and the panel uses the card colour, a hairline border and a faint shadow, so nothing is a fixed colour. The page's primary colour is not used, so the block never competes with the call to action elsewhere on the page.

The shell comes first at the full width of the column with smaller padding, the quote steps down from text-3xl to text-2xl, and the poster follows under it with no divider. Nothing scrolls sideways at 320 pixels.