shadcn.io is not affiliated with official shadcn/ui
Masthead Featured Article Awards Block for React
A feature article about a newsletter platform set as a clipping: headline, byline, an excerpt with a drop cap and a link, beside a drawn masthead and a description list of publication, section, date and reading time.
Installation
Overview
A featured-article block for React with Base UI. The article's headline is the heading, with a byline under it, an excerpt set as a block quotation that opens with a drop cap, and a "Read the article" link. Beside it, in a hairline frame with + marks on its corners, the publication's masthead drawn in greyscale (its name in a serif title between double rules, an issue line and a few columns of grey type), and under the frame a description list of the publication, the section, the date and the reading time. The text comes first in the DOM and on a phone, with the masthead and the list under it; from lg they move to the start. The page's rails and top rule come from the Guides spine. It's built from Data List, Guides and your theme's tokens. The publication, the writer and the excerpt are made up for the example.
FAQ
How do I change the article?
Edit ARTICLE at the top of the file: the headline, the byline and role, the excerpt, the publication, the section, the ISO date and the reading time. Point the link at the article. The date is written out in a fixed locale and zone, so the server and the browser print the same day.
Is the masthead an image?
No. It's drawn from HTML and your theme's tokens: the publication's name in a serif face, double rules, an issue line and bars standing in for columns of type. It's hidden from assistive technology, and the publication's name is in the description list beside it. To show a real masthead, put the publication's own artwork in the frame, if its guidelines allow it.
How does the drop cap work?
It's the excerpt's first letter, styled with the first-letter pseudo-element: floated, set in a serif face and sized to three lines. The text itself is unchanged, so a screen reader reads the sentence normally.
Is the publication real?
No. The Iriswell Review, its writer and the quoted lines are made up. Quote real coverage word for word and attribute it, and link to the article you are quoting.
How do screen readers read it?
Heading, byline, then the excerpt as a block quotation and the link. The masthead is skipped, and the facts follow as a description list: publication, section, date (a time element in a bdi) and reading time. The arrow on the link is hidden from assistive technology and mirrors in a right-to-left layout.
Related
- Pro
Coverage Ledger Press Awards
Press and quotesA start-aligned header with a counted tally over a ruled ledger of press stories for a publishing CMS: each row sets the publication as its own wordmark, the headline as a link, a type badge and the date.
- Pro
Stamped Editorial Picks Awards
Press and quotesA centred header over three editor's picks for a reading app, each with a round stamp drawn in SVG, the publication, the pick's headline and a two-line pull quote in cells with overshoot lines.
- Pro
Chair's Quote Seal Awards
One featured awardOne large quotation from a prize jury's chair for a citation manager, under a heading, with the chair's name and role, beside the programme's seal drawn as a scalloped rosette in a frame.
- Pro
Featured Plaque Awards
One featured awardOne grand award for a payments platform: a large framed plaque with a laurel wreath and the year on a ribbon beside the heading, a description list of the facts and one sentence from the jury.
- Pro
Spotlight Dialog Awards
Reveal and browseA 3 by 2 grid of award tiles that each open one centred dialog with the full details, a counter and Previous and Next, with arrow keys cycling.
- “Pro
Jury Statement Awards
Press and quotesThe jury's statement for each category a legal-drafting tool won: the categories as a radio group at the start, the chosen one's statement as a large quote with its jurors' avatars at the end.