shadcn.io is not affiliated with official shadcn/ui
Perk Wallet About Block for React
An about section for a wellness-benefits company: eight perks in shared hairlines, each with a yearly amount, and a heading that is their sum.
Installation
Overview
A perk wallet for React with Base UI, written for Wellbound, a fictional wellness-benefits company. A centred heading states what the perks are worth in a year, and that figure is the sum of the eight cells under it. Each cell is a name, one sentence, a category badge and the yearly amount, in shared hairlines that run from rail to rail: four across on a wide screen, two on a phone. There are no icons. The band ends the block, so it does not draw a second rule above the next block. The page's rails and top rule come from the Guides spine. It's built from Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For a careers page that would rather show the money than a list of benefit names. The amounts are example data for one person.
FAQ
How do I change the perks?
The perks are PERKS at the top of the file. Each has a name, a detail, a kind (the badge) and an amount in dollars per year. Add or remove rows freely: the grid, the badge and the heading's total are drawn from the array. Keep an even count if you want every row full at two and four columns.
Where does the heading's total come from?
TOTAL is the sum of every perk's amount, and both the heading and each cell format that number with the same dollars helper. Change an amount and the heading changes with it. The sentence under the heading calls the figures example data.
How is it read by a screen reader?
The heading is the section's only h2. The cells are a list, and the list is named with the count and the total. Each perk's name is an h3, the category is a badge, and the amount is text after the sentence. The lines are drawn by a layer hidden from assistive technology.
How does it fit on a phone?
The grid is two columns from the narrowest width and four from lg. Names and sentences wrap inside the cell, and the badge sits under the name so it does not compete with it for width. Nothing scrolls sideways at 320 pixels.
Related
- Pro
Benefits About
CareersA payroll company's own benefits, switched by office: four columns for Health, Money, Time and Growth, with the wording swapping in place and a row of figures underneath.
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Day Track Hiring Process
CareersA hiring process section for an applicant tracking company's own about page: five stages drawn to scale over fourteen days, five cells saying what to expect at each, and a promise to reply within two days.
- Pro
Settings Panel Work Style
Culture and valuesA working-agreements section drawn as a settings panel: six agreements as rows with a drawn switch, the state in words and a line on why, in a tinted frame beside the title.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
Guarantee Certificate About
Principles and processA home-warranty guarantee drawn as a certificate: a seal in SVG above the title, three promises with ticks, the fine print behind a disclosure that stays in the page, and a Shine Button to start a claim, in a card in card.