Schedule Rows lays out a time, a title with a meta line, a status chip and a button or link on each row. Use it for gig listings, fixtures and running orders. Rows stack neatly on phones.
Three schedules built with Schedule Rows, each with different chips, actions and spacing. Narrow the window to see the rows stack.
Brand, neutral, muted and sold out chips. The sold out row strikes through its title and offers a waitlist link. The 21 March row is featured.
A narrow time column with kick-off times underneath. Home and away chips, a result row and ticket buttons.
Start times with durations, a keynote chip and one row with no chip at all.
Add rows in the editor and the layout takes care of itself.
Drop Schedule Rows onto the page where the listing should go.
Fill in the time, sub-time, title and meta line, then choose a chip and an action for each row.
Set the time column width, dividers, chip colours, the button style and the stacking breakpoint.
Each row has the same parts, so a long list stays easy to scan.
A bold time or date with a smaller line under it, such as the day, kick-off time or duration.
A title with a heading tag of your choice and a meta line for the venue, speaker or room.
Neutral, Brand, Muted and Sold out. Each style has its own background, text and border colours.
The sold out chip is struck through, and you can strike through the row title too.
Each row can end in a Breakdance button, a text link or nothing at all.
Pick out one row with a filled background, and set its chip, button and link colours.
Choose where the columns stack so the time sits above the title and the chip and action drop underneath.
None, between rows, or all including top and bottom. Solid, dashed or dotted.
Rows are output as a list, and every text field accepts dynamic data.
Any list where each entry has a time, a name and something to do next.
Dates, venues, ticket status and a ticket button for each show.
Kick-off times, home or away, results and ticket links.
Start times, durations, speakers and rooms for each session.
Gym, dance or yoga classes with spaces left and a booking link.
Upcoming intakes with a places-left chip and an apply button.
Tour slots or seasonal openings with their status.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Rows | Repeater. Each row has Time Or Date, Sub-time, Title, Meta Line, Status Chip Text, Chip Style, Action, Action Text, Action Link and Featured. | 4 sample rows |
| Chip Style | Neutral, Brand, Muted or Sold out (strikethrough). | Neutral |
| Action | None, Button or Text link. Shown when Action Text and Action Link are set. | None |
| Title Tag | h2 to h6, p or div. | h3 |
| Layout | ||
| Time Column Width | Width of the time column. Responsive. | 120px |
| Column Gap | Space between the columns. Responsive. | 24px |
| Row Padding (Vertical / Horizontal) | Padding inside each row. Responsive. | 18px / 0px |
| Vertical Alignment | Top, Middle, Bottom or Baseline. | Middle |
| Chip To Action Gap | Space between the chip and the action. Responsive. | 12px |
| Stack At | Breakpoint where the columns stack, or never. | Phone landscape |
| Stacked Gap | Space between stacked parts. Responsive. | 8px |
| Dividers | ||
| Dividers | None, Between rows, or All (incl. top and bottom). | Between rows |
| Style, Color, Thickness | Solid, dashed or dotted line, its colour and width. | Solid, 1px |
| Text | ||
| Time | Time Typography, Sub-time Typography and Time To Sub-time Gap. | 2px gap |
| Title | Typography. | — |
| Meta Line | Typography and Space Above. | 4px above |
| Status Chips | ||
| Shape | Typography, Padding, Radius and Border Width. | 999px, 1px |
| Colours per style | Background, text and border colours for Neutral, Brand, Muted and Sold out chips. | Global colours |
| Strike Through Title On Sold Out Rows | Also strikes through the title of rows with a sold out chip. | Off |
| Actions | ||
| Button | Breakdance button design: style, colours, size and typography. | Primary |
| Text Link | Typography, Color and Hover Color. | Brand colour |
| Featured Row | ||
| Background, Text Color, Radius | Fill, text colour and corners of featured rows. | Brand, 8px |
| Horizontal Padding, Inset Content | Side padding of the fill, and whether the content moves in with it. | 16px, Off |
| Chip, button and link colours | Chip background, text and border, button background and text with hover states, and text link colour. | — |
Set the row's Chip Style to Sold out. The chip text is struck through. Turn on Strike Through Title On Sold Out Rows to strike through the title as well, and swap the button for a waitlist text link.
Yes. Leave the chip text empty or set Action to None. If a row has neither, the side column is left out and the title takes the space.
At the Stack At breakpoint the time moves above the title, with the sub-time beside it, and the chip and action sit underneath. You can also choose never.
The time, sub-time, title, meta line, chip text, action text and action link all accept dynamic data.
Yes. The action button uses the standard Breakdance button design, so it follows your global button styles unless you change it.
Schedule Rows is included with Phox Elements, along with 140+ other premium elements for Breakdance.