shadcn.io is not affiliated with official shadcn/ui
City Cards About Block for React
A snap row of tall city cards for a coworking company, with the city in large type, when the house opened, how many desks it holds, and whether it is hiring.
Installation
Overview
A row of city cards for React with Base UI, written for Hubfold, a fictional coworking company. A start-aligned header names the houses, the desks and how many are hiring, with previous and next buttons and a counter. Under it, a ruled band holds tall cards: the country, the city in large type, a one-line note, when the house opened ("Year 1", counted from the first house), the desks and a hiring line. Three cards fit from lg, two from md, and one with the next card peeking on a phone. The arrows, a drag and the arrow keys move the row; it wraps, it never advances by itself, and a card off the page leaves the tab order. Desk totals and the hiring count are computed from the houses. The page's rails and top rule come from the Guides spine. It's built from Carousel, Button, Status and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should show where a company keeps a room. The houses are example data.
FAQ
How do I change the houses?
The houses are HOUSES at the top of the file. Each has a city, a country, a note, an opened such as "Year 3", a desks count and a hiring flag. The header's city count, desk total and hiring count are derived from that array, and the counter reads "1–3 of 6" from how many cards fit. Add or remove houses freely.
How does the row move?
Previous and next wrap, so a button never disables under focus. Dragging or swiping the row moves it too, and the arrow keys move one house at a time in the page's direction. A card that is off the page is inert and hidden from assistive technology. The row does not advance by itself.
Is hiring only a dot?
No. "Hiring" and "Not hiring" are written out. Hiring uses a filled Status dot; a house that is not hiring uses an open ring. The dot and the ring are decoration. There is no status colour: the page's tokens carry everything.
How many cards show, and what happens when the window changes width?
Three cards fit from lg, two from md, and one with the next card cut off at the rail on a phone. A quiet counter shows the range, and a visually hidden line announces the same range.
Changing the width leaves the row where it was, when that house still fits.
How does it fit on a phone, and right to left?
One card fills the row and the next one peeks, so it is obvious the row continues. The header stacks the sentence above the buttons. Nothing else scrolls the page sideways at 320 pixels. In a right-to-left layout the arrows turn around and the arrow keys follow the page, and each desk count stays in reading order.
Related
- Pro
Office Headcount Bars About
Team and officesOffice rows for a global payroll company, each with a country code, a time-zone offset and a headcount bar drawn to the scale of the largest office.
- Pro
Overlap Hours About
Team and officesAn about section for a time-zone scheduler: three offices on a 24-hour axis, with the hours they all share labelled and counted.
- Pro
Floor Plan About
Team and officesAn interactive floor plan for a space-planning company, where choosing one of six rooms rings it on the drawing and shows its seats and amenities.
- Pro
Region Rows Data Centers About
Security and platformRegion rows for a bare-metal host: six regions in an accordion with a status dot and a capacity bar, each opening to its hardware, round trips to its nearest regions and audits.
- Pro
Team Breakdown Bars About
Team and officesA team counted three ways in 100% bars (by function, location and tenure), where choosing a segment in the legend names its share and count under the bar.
- Pro
Open Roles About
CareersA team filter over open roles for a job board, with counts on the buttons, a list that keeps its height, an empty state, and a link to send a résumé.