shadcn.io is not affiliated with official shadcn/ui
Copywriter Sample Shelf Profile Block for Svelte
A copywriter profile as a shelf of four samples: an industry filter with counts over accordion rows, each closed row showing the lift it earned, each open row the brief, the headline before and after, the copy with its word count and the measured result.
Installation
Overview
Show what a writer's words earned, with this copywriter sample shelf profile for Svelte with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the writer: initials, name, role and place. A band holds a Toggle Group that narrows the shelf to one industry, each chip with its count. The samples are the rows of an Accordion: a landing page, an email sequence, a product page and an ad set. A closed row gives the title, the industry and the lift the sample earned, worked out from two typed rates. An open row gives the brief, the headline before and after as a labelled pair, the sample copy with a word count counted from the text, and the measured result in one sentence that says it is an example. One row is always open. An unseen copy of the whole shelf holds the panel's height, so choosing an industry, or opening a longer sample, never moves anything under it. A polite line says what is showing. It's built from Accordion, Toggle Group, Badge, Avatar and Guides, with a CSS entrance only. The writer and her samples are invented, and so are the figures. For a writers' network, a portfolio page or any profile that proves its work with a result.
FAQ
How do I fill it with my samples?
Edit SAMPLES. Each has a title, an industry, a brief, the headline before and after, the sample copy, what the rate measures, the rate before and after in percent and how long the test ran. The lift in the closed row, the word count under the copy and the sentence with the result are worked out from those, so nothing is typed twice. Add an industry to INDUSTRIES and its chip and count appear.
Are the results real?
No. The rates and the tests are typed examples, and every open row says so: "Example figures, not a real campaign". Replace them with your own measured results, and keep the sentence that names the test and how long it ran, so a lift is never read without its source.
What does the industry filter do?
It narrows the shelf to the samples in one industry and the count on each chip stays true. The open row stays open when it is still on the shelf; when it is not, the first sample that is shown opens, because one row is always open. The height of the shelf is held by an unseen copy of every row and the longest panel, so the page below never jumps.
Is it accessible?
Each sample is a heading with a button that opens its panel, and the open row cannot be closed, so the page never loses its place. The before and after headlines carry the words Before and After, not only a weight or a border. The status line is a polite live region present from the start and says the result of every choice.