Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Pull Quotes and Press Kit About Block for React

A press page for a ticketing company: three pull quotes set as headlines with the outlet in serif lettering, and a press kit of three real files that download from the page, a boilerplate with a Copy button and a press contact.

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 press page for React with Base UI, written for Stagewick, a fictional ticketing system for independent venues. The block is a split. At the start, under a short header, three pull quotes are set as headlines, each credited to its outlet in serif lettering with the kind of piece beside it. At the end, behind a divider that meets the top rule with a plus, is the press kit: a logo mark and a wordmark as SVG and a fact sheet as text, each a row with its type and size and a button that downloads a real file made in the browser; a boilerplate paragraph with a Copy button; and the press contact as an address. On a phone the quotes come first and the kit after them. It's built from Guides, Copy Button and Download Trigger, with CSS for the entrance and your theme's tokens for every colour. For about pages and press rooms that want to show coverage and hand a journalist what they need in the same place. The quotes, outlets, figures and contact are example data.

FAQ

How do I change the quotes and the kit?

The quotes are QUOTES at the top of the file: a line, the outlet and the kind of piece. The kit is KIT: each file has a title, a type, a file name, a MIME type and its data as a string, so the size shown is the size of what downloads. The boilerplate is BOILERPLATE, and the address is EMAIL plus the name beside it. To serve a binary file such as a PNG or a ZIP, replace Download Trigger with a link to the file.

Do the downloads really work?

Yes. Each button is a Download Trigger that builds the file from its string in the browser and saves it with the given name, so there is no server and no placeholder link. The logo mark and the wordmark draw in currentColor, so they take the colour of whatever page they are placed on. Replace the strings with your own marks and text.

What does the Copy button copy?

The boilerplate paragraph, exactly as shown, to the clipboard. The icon turns into a check and a polite status says "Boilerplate copied"; if the browser refuses, which happens on a page that is not served over HTTPS, it says so instead. The paragraph is written from the same facts as the fact sheet so the two never disagree.

How is it read by a screen reader?

The block has one h2. The quotes are a list of figures: each is a blockquote with its outlet as the caption. The kit, the boilerplate and the contact are three sections with an h3 each, the kit rows are a list, and each download button is named "Download Logo mark" and so on. The contact is an address element.

How does it fit on a phone?

The split stacks: the header and quotes first, then the kit under a rule from rail to rail. The download buttons stay at the end of their rows and nothing scrolls sideways at 320 pixels. In a right-to-left layout each quote is isolated so its quotation marks stay with it.

What moves, and what happens with reduced motion?

The header, the quotes and the kit fade up once on load, with CSS transitions. With reduced motion they simply appear. The block has no state of its own, so it can render on the server.

  • Pro

    Left-Heavy Press Strip Hero

    Testimonials

    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.

  • Pro

    Sortable Media Mentions About

    Press and recognition

    An index of eight press mentions for a PR tool as two-line rows, each with the masthead, the kind of piece, the day and the headline as a link, and the reach at its end; a Select sorts them by newest or by reach.

  • Pro

    Press Kit Contact

    Partners and creators

    A press desk with a press kit of three real files that download from the page beside a press form with an inquiry switch and a deadline date picker that marks a date within two days Rush.

  • Pro

    Copyable Fact Sheet About

    Press and recognition

    A company fact sheet for a patient-records tool: six facts as a two-column description list in ruled rows, beside a boilerplate paragraph written from the same facts and a Copy button that puts it on the clipboard.

  • Pro

    Brand kit tabs About

    Press and recognition

    A brand kit for a brand-kit product: tabs for the mark, the theme's own colour tokens with a copy button, a type specimen, and do and don't pairs.

  • Pro

    Tabbed Plaque Shelf Awards About

    Press and recognition

    A recognition shelf for a grant platform in two tabs: six plaques with a drawn laurel, the prize, who gave it and the year won, or six certifications with a stamped ring and when each renews.

All 150 about blocks