Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Featured Quote Reverse Split Logos Block for Svelte

A school group's quote on a raised card, with the school's wordmark large in a framed figure with + marks on its corners, for a school administration tool.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A reverse-split featured-quote logo block for Svelte with Ark UI. A school group's quote sits on a raised card: a quotation mark, a two-sentence blockquote, and under a hairline the person who said it, with an avatar, a name and a role. Beside it, the school's wordmark stands large in a framed figure with + marks on its corners: a ring icon, the name in heavy lowercase type, how long they've been a customer and how big they are. The quote comes first in the page's reading order, so a screen reader and a phone both start with what was said; from lg the figure sits at the start, ahead of the card, and the block reads as the mirror of the plain split. The card lifts with a ring and a shadow, so it stands out in a light theme as well as a dark one. Built from Avatar and Guides, with a CSS transition for the entrance and your theme's tokens for every colour. For a customer story with a strong name, between the features and the pricing.

FAQ

Why does the figure come second in the markup but first on screen?

The quote is the content, so it comes first for screen readers, keyboard users and phones, and the figure is the decoration around it. From lg the figure takes the first grid column with lg:col-start-1 lg:row-start-1, so the two swap places on screen without a reordered DOM. Below lg they stack in reading order: card, then figure. To put the figure at the end instead, delete those two classes.

How do I change the school and the quote?

Edit SCHOOL and QUOTE at the top of the file. SCHOOL is the name, an icon (any Lucide icon), the lettering classes for the name's type, and the two small lines under it. QUOTE is the text and the person: initials, name and role. Keep the quote to two sentences, one of them with a number in it.

Where is the heading?

The block has an h2 that is visible only to screen readers ("Larkmoor Academy runs on Pebblecreek"), because the quote and the wordmark are the heading. If you want a visible one, replace the sr-only class and move it above the grid; the block's rails and top rule stay where they are.

Why a ring and a shadow on the card?

In a light theme the card colour and the page colour are almost the same, so a card with no edge disappears. A ring in the text colour at low opacity and a soft large shadow keep it lifted in every preset, light or dark. Nothing on the card is a fixed colour.

What moves, and what happens with reduced motion?

The card and the figure fade up once when the page loads, the figure a moment after the card, with CSS transitions. With reduced motion the transitions are off and the block simply appears.

How does it fit on a phone?

The card comes first at the full width of the column, with smaller padding, and the figure follows under it. The quote steps down from text-2xl to text-xl, and the wordmark from text-5xl to text-4xl. Nothing scrolls sideways at 320 pixels.

All 100 logos blocks