codenform/ components

Live timetable

A day of classes that knows what hour it is. On today, finished classes step back, the one in progress says how long it has left, and a rule carrying the time sits between the two. Choosing another day slides the list out one way and the next one in from the side it is on.

Schedule--:-- local

50 minutes in The Floor

12 of 14 places taken.

45 minutes in The Floor

9 of 14 places taken.

50 minutes in Reformer Studio

11 of 12 places taken.

50 minutes in Reformer Studio

8 of 12 places taken, women only.

45 minutes in The Floor

6 of 14 places taken.

50 minutes in The Floor

14 of 14 places taken.

45 minutes in Cycle Room

15 of 16 places taken.

50 minutes in Reformer Studio

7 of 12 places taken.

40 minutes in Recovery Suite

5 of 10 places taken, men only.

How it behaves

  • A row opens in place to show the room and the places left.
  • Classes with three places or fewer turn red before they are full.
  • The strip of days keeps today marked wherever you are in the week.

How it is made

  • The club's real weekly template: 53 classes across seven days.
  • The list's height follows its content, so a longer day grows the card.
  • Rows open with a grid-row transition, so nothing is measured by hand.
NextCatalogue filter →