Start here
What to change first
Replace the fictional Fieldroom Studio programme, times, session prices and the booking destinations. These are recurring weekly classes, without date-specific availability claims.
Core blocks only. No script, custom CSS, font file or required plugin.
The signature moment
The sessions hang below one continuous week rail
Three touching top rules become one week rail. The sessions hang from left-hand stems at unequal depths, with a time tab at each foot. On a phone the days retain Monday, Wednesday, Saturday reading order and each rule becomes a fresh anchor.
Theme handoff
What comes from where
From your theme
The Core payload uses the theme’s base and contrast chains, currentColor rules, its typefaces and heading ladder. Text is intended for 4.5:1 contrast, or 3:1 at large display sizes; the rendered checks measure the actual pairs. Headings and links follow the root painter. The inherited Core payload is the theme route for this composition.
Full pattern notes
Why it works, and how it is built
Open a topic for the complete design reasoning, editing guidance and implementation notes.
Design rationaleComposition, intent and nearest alternatives
Overview
A studio programme hangs three recurring classes from one continuous top rail. Large day marks and different drops lead to session details, times, prices and individual booking links.
The signature moment: the sessions hang below one continuous week rail
Three touching top rules become one week rail. The sessions hang from left-hand stems at unequal depths, with a time tab at each foot. On a phone the days retain Monday, Wednesday, Saturday reading order and each rule becomes a fresh anchor.
Make it yoursVariations and the edits to make first
What to change first
Replace the fictional Fieldroom Studio programme, times, session prices and the booking destinations. These are recurring weekly classes, without date-specific availability claims.
Core blocks only. No script, custom CSS, font file or required plugin.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits from your theme
The Core payload uses the theme’s base and contrast chains, currentColor rules, its typefaces and heading ladder. Text is intended for 4.5:1 contrast, or 3:1 at large display sizes; the rendered checks measure the actual pairs. Headings and links follow the root painter. The inherited Core payload is the theme route for this composition.
Display type
Day marks use clamp(2.25rem, 4vw, 4rem), deliberately separate from the heading ladder. Time tabs and labels use 15px. The session descriptions take medium.
Technical notesBlock mechanics, responsive behaviour and constraints
The Styled look
Lilac ground #EEE5F4, deep pine-black ink #263128 and pine accent #315C46; Arial throughout, with square pine booking buttons. Every button is deliberately filled or underlined, with its own padding. The root states a 400 body weight.
Questions
Weekly class ribbon: common questions
Does Weekly class ribbon need a plugin?
No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install.
Will Weekly class ribbon match my theme?
Choose by variation. Hanging sessions takes your theme’s palette; Lilac and pine brings its own colours.
How many variations does Weekly class ribbon have?
2: Hanging sessions and Lilac and pine. Each is its own markup; choose one in the toolbar above the preview before you copy.
Is Weekly class ribbon free?
It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.
Which WordPress version does it need?
Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Lilac and pine
Fetching the markup…
