shadcn.io is not affiliated with official shadcn/ui
City Cards About Block for Vue
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 Vue with Ark 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 returns the row to the first house.
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.