Listings cover programme

A full-bleed core/cover set like an event poster: a heavy veil of your theme's contrast colour over the photograph, a huge event title with its dates and venue in the top left, and across the cover's full width below it a dated programme of five sessions as ruled rows. The listing is the cover.

An event page usually opens on a title and makes the visitor scroll for the times. This one prints the timetable on the photograph, the way a festival poster does: five rows, each a day and time, a session title and a place, stacked between hairline rules and spanning the cover edge to edge beneath the title. Scale collides with density: one enormous name at the top, a fine ruled grid of small facts at the foot. It holds in greyscale because it is made of size and rules alone.

• Programme column: the title drops to the lower left at a smaller clamp(3.5rem, 8vw, 10rem) and the programme becomes a narrow ruled column at 34% on the right, each session stacked time above title above place, the titles back on large to fit the column. Two core/columns, each stating its vertical alignment; below 782px the programme falls beneath the title.

Inherits: every colour (veil contrast, type and rules base), the typeface, the spacing scale. Decides: the veil's opacity, the type ramp, the title's measure, the column split, the cover's minimum height. The cover states its own text colour chain so core's rule that paints cover text #fff never applies. The title is h1: this is a page opener.

Type sits on the image only because the veil makes the ground a known quantity: contrast at dimRatio 80 under base type. The session places are body size, so they need the full 4.5:1, not the 3:1 allowed to large display type; the checker composites the veil over a white and a black photograph and the worse ground has to pass. Lower the veil below 80 and that stops being true.

• The title is display: a bare clamp(3.5rem, 11vw, 14rem), off the theme's ladder, because its size is the composition; at 1920 it is 211px, held to a measure of clamp(18rem, 84vw, 84rem) so it breaks like a poster.
• The dates and venue are paragraphs on their own clamp(1.125rem, 1.7vw, 1.875rem), the date line weighted: poster facts, not headings.
• Session titles are h3 on the x-large rung, so the timetable reads from across a room; places are body copy on medium; the day and time, the edition line and "The programme" are labels with their own clamp() floored at 15px.
• Hierarchy comes from size and the rules alone: nothing is set in capitals.
• Every heading states its size and colour chain and nothing else.

• The cover keeps its default layout and position; its inner stack is a vertical flex group with space-between and a minimum height of clamp(40rem, 58vw, 68rem) (never vh), so the poster sits at the top and the programme at the foot.
• Each session is a ruled group holding a core/columns row of three: the day and time at 22%, the title filling, the place at 26%. Below 782px the columns stack, so on a phone each row reads time above title above place and keeps its rules.
• Rules are the role-rule chain ending on base, so without our theme tool they are the colour of the type.

The photograph: choose Replace on the cover. Then the title, the dates and the venue, and the sessions. Add or remove a session by duplicating or deleting its group; the last one carries the closing rule.

A short row on your theme's paper under the cover, a label and one paragraph at a 34rem measure, so the cover reads as a section and shows where it ends. It is the first thing a buyer rewrites or deletes.

The copied markup includes a WordPress Photo Directory example photograph. The public image URL keeps the example visible after pasting. Select the cover and choose Replace to use your own Media Library file. See image credits for the source and license. Pasting an image URL does not import a Media Library attachment.