shadcn.io is not affiliated with official shadcn/ui
Centered Story About Block for React
A founding story told as one centred long read: a heading and byline, a first paragraph with a drop cap, a pull quote on a band ruled rail to rail, then the rest in a readable column ending on a closing line and a link.
Installation
Overview
A founding story for React with Base UI, written for Claymoor, a fictional ceramics marketplace. A centred heading and a byline (an avatar, the founder's name and "3 min read") open a max-w-2xl reading column. The first paragraph opens with a drop cap from the catalog's Drop Cap Text, inked in once; after it a pull quote sits on a band ruled from rail to rail with + marks on its corners, then two more paragraphs, a closing line and a text link end the block on content. The paragraphs stay start-aligned, even in a centred block, because long lines read better that way. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Avatar and Drop Cap Text, with a CSS entrance and your theme's tokens for every colour. For about pages and launch notes where the story, not a diagram, is the content.
FAQ
How do I change the story?
The first paragraph is OPENING at the top of the file, the rest are STORY, the last line is CLOSING and the quote is plain text in the band. The drop cap is the paragraph's own first letter, set by Drop Cap Text, so the text stays whole for screen readers, search and copying. Keep the opening to a few sentences: the cap sinks three lines into it.
Why is there no year or date?
A story that says "In 2019" is out of date in a decade, and the date adds little to a reader. The story counts in events (a cracked mug, a spare room, the first order) and the byline says how long it takes to read. If you want a date, put it in a time element with a dateTime attribute.
How is it read by a screen reader?
The heading is the section's h2. The quote is a figure with a blockquote and the author in its figcaption; the avatar is decoration, because the founder's name is in the text next to it. The story is plain paragraphs, so reading order is the order on the page.
How does it fit on a phone?
The heading steps down to text-3xl and the byline wraps to two lines if it must. The reading column keeps its side padding, the quote band becomes a rail-to-rail band with smaller type, and the drop cap sinks into three lines of the narrower paragraph. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the text, the cap and the link's arrow all follow the direction.
Related
- Pro
Founder Letter with Margin Notes About
Company storyA founder letter for a document-signing company, set on a sheet with margin notes that line up beside each paragraph and fold under it on a narrow screen.
- Pro
Chaptered Origin Story About
Company storyA company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.
- Pro
Large Quote About
StatementsThe first memo of a notes app: the sentence that explains why the company exists set large with a phrase marked, beside a drawing of the memo it came from in a hairline frame, with a divider between them.
- Pro
Statement With Rule Log About
StatementsA statement for a calendar app beside its rule applied: five proposals in a ruled log, each with the minutes a week it saves or costs, and a Shipped or Cut verdict computed from that number.
- Pro
Mission About
StatementsA mission statement for a home-care scheduling company: the mission in large type beside one supporting sentence, three pillars that each carry the figure they are checked by, and a founding line in relative time.
- Pro
Editorial Testimonial
One big quoteA magazine-style testimonial: a compact header with a Shine Button, then one long quote in two serif columns that open with a drop cap, on a page framed by hairline corners with + marks, with an em-dash byline and the publication it appeared in.