shadcn.io is not affiliated with official shadcn/ui
Inline Headline Ticker Logos Block for React
One flowing sentence for an accessibility-audit tool with five customer wordmarks set inline between its words, in a quiet strip with no lines but the page's top rule.
Installation
Overview
An inline headline logo strip for React with Base UI. One sentence, "From Pennyroyal and Oldwick to Tarnside, Willowby and Cairnside, over 1,800 teams audit their accessibility on Lapwing", carries the block, and the customers' wordmarks are set in it between the words, each with its icon, in its own lettering: a serif italic, spaced capitals, a monospace, a heavy lowercase. Everything in the logos is sized in em, so they grow and shrink with the sentence: text-base on a phone, up to text-2xl on a desktop. The sentence is the block's one heading and wraps wherever the page needs it to, so a wordmark is never cut across two lines. The strip has no lines but the page's top rule, and no buttons. Built from Guides and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. Made for a quiet line of social proof under a hero, or between two sections that need a breath.
FAQ
How do I change the sentence and the customers?
Edit the heading in the markup: the words are plain text and each customer is a Wordmark with a Customer constant at the top of the file (PENNYROYAL, OLDWICK and so on). A customer is a name, an icon (any Lucide icon), a lettering and a mark; keep the lettering's sizes in em (text-[0.7em]) so the logo follows the sentence. The names are fictional placeholders for your own customers.
Why is a sentence the heading?
The whole sentence is the strip's message, so it is the one h2 and reads aloud as written: "From Pennyroyal and Oldwick to Tarnside, Willowby and Cairnside, over 1,800 teams audit their accessibility on Lapwing". The customers' names are real text and the icons are hidden from assistive technology. A strip like this needs no other heading.
How do I change how an icon sits beside a name?
Set the customer's mark: inline puts the icon before the name, badge knocks it out of a filled square, ring draws it inside a circle and trailing puts it after the name. All four sizes are in em, and every colour is the current text colour, so one muted colour turns the whole logo.
What happens when I hover a wordmark?
It turns from the muted text colour to the full text colour, with a short colour transition that is off under reduced motion. The wordmarks are not links, so nothing in the strip takes a Tab stop. Wrap one in a link when you have a case study to point to.
Related
- Pro
Under Hero Strip Logos
StripsA quiet strip for directly under a hero: one sentence for a job board on its own line and six open wordmarks beneath it, with no cells, no heading and no lines but the page's top rule.
- Pro
Six open wordmarks for a rowing-club rota tool in one centred row, with a short vertical tick between neighbours and no cells or heading.
- Pro
A strip of eight customer names of a design-handoff product set as type alone, each in its own typeface treatment, with no icons, cells or lines but the page's top rule.
- Pro
Compact Five Logo Strip
StripsThe quietest logo strip: one whisper line for a restaurant-reservation product and five large wordmarks in five equal columns, with no heading, no cells and no lines but the page's top rule.
- Pro
Statement Metric Hero Logos
MetricsA count written as one display-size sentence for a referral-program tool, its two figures marked by a highlighter, with one Shine Button and a tray of six customer wordmarks.
- Pro
Centered Logo Cloud Hero
Logos and social proofA compact centered hero for a planning tool: an announcement link, two calls to action and a trusted-by band across the column of eight customer wordmarks in cells that share their hairlines.