Directory layouts

A directory page is your text followed by a list of cards. The cards come from items: in front matter or from a file in _data. These layouts load modootoday-directory.css only on their own pages and add no JavaScript.

Layout	Cards show	Filter by	Structured data	Demo
`portfolio`	image, title, text, tags	`tags`	ItemList	Portfolio
`team`	round photo, name, role	`group`	ItemList of Person	Team
`jobs`	title, location, type	`department`	ItemList	Jobs
`events`	date tile, title, place, calendar file	none	ItemList of Event	Events
`sponsors`	logo, name, tier	`tier`	ItemList	Sponsors
`integrations`	logo, name, category, text	`category`	ItemList	Integrations

layout: directory is the plain version: set preset: to one of the names above, or leave it out for simple cards.

Items

---
layout: team
items:
  - {name: Ada Kim, role: Founder, group: Leadership, image: /assets/ada.jpg, alt: "", url: /about/ada/}
  - {name: Ben Ito, role: Designer, group: Design}
---

Each item needs title or name. All items take url, text, image, alt, width and height; give alt: "" when the photo only repeats the name. Preset fields:

team: role, group
jobs: department, location, type
events: date (required, YYYY-MM-DD HH:MM), end, location, online: true for an online event (then url is where it happens)
sponsors: tier
integrations: category
portfolio: tags (a list)

To share a list between pages, put it in _data/team.yml and write data: team instead of items:.

Filter

When the filter field has two or more values, a row of buttons appears above the cards. It is a group of radio buttons, so it works with the keyboard and screen readers announce the choice. Up to 12 values are shown. Set filter: false to hide it, or filter: <field> to filter by another field. In browsers without :has() every card stays visible.

Events

Each event links to an .ics file built into the page, so visitors can add it to their calendar without a server. Dates use the site’s timezone.

Edit this page