shadcn.io is not affiliated with official shadcn/ui
Left-Heavy Press Strip Hero Block for React
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 Base 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.
Related
- “Pro
Split Quote Panel Hero
TestimonialsA reverse split hero that opens with a customer quote: a tinted panel on the start side in three ruled bands (quote, author, two results), and the headline and a Shine Button at the end.
- “Pro
Left-Heavy Single Testimonial Hero
TestimonialsA split hero for a release management tool: copy and two calls to action beside one customer quote in a raised card in a card, with the customer's name, role and a before and after of their result.
- Pro
Split Layout Testimonial Card Hero
TestimonialsA split hero for month-end close software: the pitch, a Shine Button and an outline button beside a customer's five-star testimonial in a card in a card, with the two results it names.
- “Pro
Testimonials Rotating Hero
TestimonialsA reverse split hero with a card that shows one customer quote at a time in a hairline frame, a pause button and a dot per quote, beside an announcement pill, a headline, a Shine Button and an outline action.
- Pro
Left-Aligned Social Proof Bar Hero
Logos and social proofA compact start-aligned hero closed by a three-cell social proof bar on its own rule: an avatar stack with the user count, a five-star rating with the review count and a compliance mark.
- Pro
Logo Marquee Hero
Logos and social proofA compact hero for a support platform: copy and two calls to action, then two bands across the column: a strip of customer logos that scrolls on its own with a pause button, and a row of three stats.