shadcn.io is not affiliated with official shadcn/ui
Today's Classes Footer Block for Solid
A footer for a strength club that lists today's coached sessions, how many spots are open, and a link to the full timetable.
Installation
Overview
Today's classes for Chalkmoor, a strength club, for Solid with Ark UI. The start half is three sessions on shared hairlines: a time, the class, the coach, how many spots are still open and a Book link. A Shine Button opens the full timetable. The end half is two link groups, in the same hairline grid, in a nav labelled Footer. On a phone the classes stack above the groups. A legal band closes the page. The sessions are an example day, with no date. It's built from Badge, ShineButton, Guides and your theme's tokens.
FAQ
How do I change today's classes?
Edit CLASSES at the top of the file. Each session has a time, a name, a coach, a spot count and the href the Book link uses. The heading's count is the length of that array, and each badge reads its own spots. The times are an example day: there is no date, so the block never goes stale.
Where does Book go?
Each Book link is a plain anchor. Its visible label is "Book", and the class name is added for assistive technology, so a list of links still says which session it is. Point href at that session's booking page. The Shine Button is the one primary action and points at the full timetable.
How is the timetable button a link on each library?
It is a real link styled as the Shine Button. The button wraps an anchor. Point it at your timetable. It does not book a session by itself.
How does it fit on a phone?
The brand, the heading and the three sessions come first, each session stacked as time, class, spots and Book. Under them the two link groups sit side by side, then the legal row. From a wide screen the sessions take about three fifths of the row and the groups the rest, divided by a hairline.
How do screen readers move through it?
The block is a footer, the page's content-info landmark. "Today at the club" is a heading, and each class name is a smaller heading beside the coach. Times are time elements. The two groups are one nav labelled Footer, each with its own heading. The policy links are a list named Legal.