shadcn.io is not affiliated with official shadcn/ui
Pull Quotes and Press Kit About Block for Vue
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.
Installation
Overview
A press page for Vue with Ark 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.