shadcn.io is not affiliated with official shadcn/ui
Left-Heavy Press Strip Hero Block for Radix UI
A compact hero for a code review tool: copy and two calls to action, then a band across the column of four press quotes in cells that share their dividers, a row to swipe on a phone.
Installation
Overview
A compact hero with a band of press quotes, for React with Radix UI. Between solid rails, an announcement link, a medium-weight headline, a subtitle, a ShineButton as the one primary action and an outline Button sit aligned to the start. Under them, a "Featured in" band runs across the column with + marks where its rules meet the rails: four quotes in cells that share their dividers, each a figure with a blockquote under its outlet's name, which links to the article. Below md the band is a row to swipe, each quote 85% wide so the next one peeks in. The copy fades up once on load with CSS transitions; nothing moves for visitors who ask for reduced motion. Made for products that have earned media coverage, launches with third-party endorsements, and brands whose strongest trust signal is what others wrote about them.
FAQ
How do I put in my own press coverage?
Edit the PRESS_QUOTES array at the top of the file: each entry is an outlet, its quote and an href. The outlets and quotes in the block are fictional samples, so replace them with real coverage you have permission to quote, word for word, and point each href at the article. Keep each quote to one or two sentences; four fill the band on desktop, and the same four are the swipe row on a phone.
Can each quote link to the original article?
They already do. The outlet's name in each caption is a link inside a cite: set its href to the article. A visible link lets readers check the quote, which makes it more persuasive, and it gives the swipe row on a phone something to focus with the keyboard. Add a cite attribute with the article's URL to the blockquote as well if you want machines to see it.
How do I show the outlets' logos instead of their names?
Replace the text inside each cite with the outlet's logo, an img whose alt is the outlet's name or an inline svg with role="img" and an aria-label, at about h-4. Use one-colour versions in currentColor so they follow light and dark mode, and check that you are allowed to use the outlet's logo for promotion.
Is the press strip accessible?
Yes. The headline is the page's one h1, and "Featured in" is an h2 over a list of four quotes. Each is a figure with a blockquote and a figcaption holding the outlet in a cite, so assistive technology knows who said what. On screen the outlet's name sits above its quote through CSS order; in the markup the quotation comes first, then its caption. The swipe row on a phone holds links, so it can be scrolled with the keyboard.
When should I use a press strip instead of a logo marquee?
Use this press strip when you have a few strong pull quotes and want visitors to read the words, not only recognise the names. A logo marquee shows how many outlets or customers you have at a glance, but says nothing about what they thought. Four quotes that name a specific benefit usually do more than a dozen logos.
How does the layout change on smaller screens?
Below the md breakpoint the band becomes a row you swipe: each quote takes 85% of the width and snaps into place, so the next one shows at the edge as a hint. Both calls to action stay on the first screen above it, the headline wraps, balanced, at text-4xl, and nothing else scrolls sideways down to 320px.