Section reference › Content

Schedule / agenda `"type": "schedule"`

A timetable with one tab per day, listing each session's time, title, speaker and room. Use it for conference agendas, festival line-ups, class timetables or wedding-day plans.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "schedule",
  "tone": "alt",
  "eyebrow": "Agenda",
  "title": "Two days of talks and workshops",
  "days": [
    {
      "label": "Day 1 · May 14",
      "sessions": [
        {
          "time": "09:00 – 09:30",
          "title": "Registration & coffee",
          "room": "Main foyer"
        },
        {
          "time": "09:30 – 10:15",
          "title": "Opening keynote: Designing for the next decade",
          "speaker": "Maya Chen, Head of Design at Fernway",
          "room": "Main stage",
          "image": "placeholder"
        },
        {
          "time": "10:30 – 11:30",
          "title": "Workshop: Accessible colour systems",
          "speaker": "Daniel Okafor",
          "room": "Studio B",
          "image": "placeholder"
        },
        {
          "time": "12:00 – 13:00",
          "title": "Lunch & networking",
          "room": "Garden terrace"
        }
      ]
    },
    {
      "label": "Day 2 · May 15",
      "sessions": [
        {
          "time": "09:30 – 10:15",
          "title": "Building products people trust",
          "speaker": "Sofia Alvarez, CEO of Quillstack",
          "room": "Main stage",
          "image": "placeholder"
        },
        {
          "time": "10:30 – 11:30",
          "title": "Panel: The future of remote teams",
          "speaker": "Four team leads",
          "room": "Main stage"
        },
        {
          "time": "16:00 – 17:00",
          "title": "Closing drinks",
          "room": "Rooftop bar"
        }
      ]
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string (HTML allowed)	—	Section heading. You can use <em> or <br> inside it.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. "start" puts it on the left. Values: `center \| start`
`days`	array	—	One tab per day. See the "days" fields.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `days`#

Option	Type	Default	Description
`label`	string	—	Tab label, e.g. "Day 1 · May 14" or "Monday".
`sessions`	array	—	The sessions of that day (required, see "days.sessions").

Fields of each entry in `days.sessions`#

Option	Type	Default	Description
`time`	string	—	e.g. "09:00 – 09:45".
`title`	string	—	Session or class name.
`speaker`	string	—	Speaker, teacher or host (optional).
`room`	string	—	Room or stage, shown on the right (optional).
`image`	string	—	Small round portrait of the speaker (optional).

Tips#

Tabs are always shown, even for a single day.

Editing it in the HTML files#

Each session is a .session with the time in .session-time, the title in h3 and the room in .session-room. Tabs are Bootstrap tabs: each tab button's data-bs-target must match the id of its .tab-pane.

Where it's used#

Open these pages in template/ to see it working:

Finance: template/finance/tax-calendar.html (source src/demos/finance/pages/tax-calendar.json)
Tech Conference: template/conference/index.html (source src/demos/conference/pages/index.json)
Online Academy: template/education/events.html (source src/demos/education/pages/events.json)
Coffee Shop: template/cafe/index.html (source src/demos/cafe/pages/index.json)
Hotel & Resort: template/hotel/home-2.html (source src/demos/hotel/pages/home-2.json)
Gym & Fitness: template/gym/index.html (source src/demos/gym/pages/index.json)
Yoga Studio: template/yoga/index.html (source src/demos/yoga/pages/index.json)
Dental Clinic: template/dental/book.html (source src/demos/dental/pages/book.json)
Pet Care: template/pet-care/boarding.html (source src/demos/pet-care/pages/boarding.json)
Car Dealer: template/car-dealer/service.html (source src/demos/car-dealer/pages/service.json)
Music Festival: template/music-festival/index.html (source src/demos/music-festival/pages/index.json)

Schedule / agenda "type": "schedule"