Pattern Paste
Subscribe

Core Patterns Contact

FreeStandard

Hours week table

Opening hours as a timetable.

A tracked label, a display heading and a short line of address sit in the left third; opposite them seven ruled rows run Monday to Sunday, the day at the left and the hours at the right, both set well above body size, with the closed day set apart in italic and in your label colour. One note line under the rules covers bank holidays. No table block and no script: seven plain rows you can edit in place. States no colour and no font of its own.

All patterns

Loading patterns…

Look: Week table
ThemePreview size
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

The hours, the closed day (move the italic and the label colour with it), the address line and the bank-holiday note.

The signature moment

The week as seven ruled rows, one of them shut

Seven rows of equal height, each a day against its hours across the full column, with the closed day set apart. The hours are the second mass on the section: day and hours are clamp(1.25rem, 1.9vw, 1.75rem), well above body size, so a visitor reads the week at a glance rather than hunting through a paragraph. The mark survives colourlessness because it is made of rhythm and rule length: the rows are the same height, the rules run the width of the column, and the closed day breaks the pattern by being italic, not by being coloured.

Theme handoff

What comes from where

From your theme

  • The ground is base and every line of type is contrast, each a two-rung chain. Text is at 4.5:1 or better in the stock themes.
  • The rules are currentColor, so they follow your text.
  • The label and the closed day start on role-label and fall through to contrast; in a stock theme they are your contrast colour.
  • The heading is off the type ladder on purpose, a bare clamp(2.5rem, 5vw, 4.75rem): its size is the composition. The body line takes medium.
  • The typeface is your theme's.

Set by this pattern

  • Each row is a flex group with nowrap and space-between, so the hours stay on the same line as the day down to 390px.
  • The two columns are 38 and 62 per cent and stack below 782px, heading first.

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

Opening hours for a shop, a clinic or a trade counter, set as a timetable. A tracked label, a display heading and one line of address hold the left third; opposite them seven ruled rows run Monday to Sunday, the day at the left and the hours at the right. One note line under the last rule covers bank holidays.

The signature moment: the week as seven ruled rows, one of them shut

Seven rows of equal height, each a day against its hours across the full column, with the closed day set apart. The hours are the second mass on the section: day and hours are clamp(1.25rem, 1.9vw, 1.75rem), well above body size, so a visitor reads the week at a glance rather than hunting through a paragraph. The mark survives colourlessness because it is made of rhythm and rule length: the rows are the same height, the rules run the width of the column, and the closed day breaks the pattern by being italic, not by being coloured.

Make it yoursVariations and the edits to make first

What to change first

The hours, the closed day (move the italic and the label colour with it), the address line and the bank-holiday note.

Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The ground is base and every line of type is contrast, each a two-rung chain. Text is at 4.5:1 or better in the stock themes.
  • The rules are currentColor, so they follow your text.
  • The label and the closed day start on role-label and fall through to contrast; in a stock theme they are your contrast colour.
  • The heading is off the type ladder on purpose, a bare clamp(2.5rem, 5vw, 4.75rem): its size is the composition. The body line takes medium.
  • The typeface is your theme's.

What it decides for itself

  • Each row is a flex group with nowrap and space-between, so the hours stay on the same line as the day down to 390px.
  • The two columns are 38 and 62 per cent and stack below 782px, heading first.
Technical notesBlock mechanics, responsive behaviour and constraints

The Styled look

yellow-and-red states signal yellow #ffd21f, near-black #141414 type and rules, and the closed day in deep red #a8101a (5.2:1 on the yellow), with an Arial Black heading over Arial rows. It is for a trade counter or a builders' merchant that wants to be seen from the road.

Questions

Hours week table: common questions

Does Hours week table need a plugin?

No. It is built only from core WordPress blocks (column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install.

Will Hours week table match my theme?

Choose by variation. Week table takes your theme’s palette; Yellow and red brings its own colours.

How many variations does Hours week table have?

2: Week table and Yellow and red. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Hours week table free?

Yes. It is one of 56 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription.

Which WordPress version does it need?

Requires a block theme on WordPress 7.0. 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. This is the file as authored; the copy button on the stage applies the finish you chose there.

15,257 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|60","left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"38%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:38%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)","fontWeight":"700","letterSpacing":"0.18em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem);font-weight:700;letter-spacing:0.18em;text-transform:uppercase">Trade counter</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"clamp(2.5rem, 5vw, 4.75rem)"}}} -->
<h2 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(2.5rem, 5vw, 4.75rem)">Opening hours</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem))","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem));line-height:1.6">Unit 7, Kirkstall Road, Leeds LS4 2AZ. Order by phone before 15.00 and it is bagged and waiting at the counter the same afternoon.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"62%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:62%"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"700","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:700;line-height:1.3">Monday</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"400","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:400;line-height:1.3">7.00 to 17.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"700","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:700;line-height:1.3">Tuesday</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"400","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:400;line-height:1.3">7.00 to 17.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"700","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:700;line-height:1.3">Wednesday</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"400","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:400;line-height:1.3">7.00 to 17.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"700","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:700;line-height:1.3">Thursday</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"400","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:400;line-height:1.3">7.00 to 19.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"700","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:700;line-height:1.3">Friday</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"400","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:400;line-height:1.3">7.00 to 16.30</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"700","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:700;line-height:1.3">Saturday</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"400","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:400;line-height:1.3">8.00 to 12.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"bottom":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontWeight":"700","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-weight:700;line-height:1.3">Sunday</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.25rem, 1.9vw, 1.75rem)","fontStyle":"italic","fontWeight":"700","lineHeight":"1.3"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(1.25rem, 1.9vw, 1.75rem);font-style:italic;font-weight:700;line-height:1.3">Closed</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem))","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.1vw, 1.125rem));line-height:1.6">Bank holidays 8.00 to 12.00. Closed Christmas Day, Boxing Day and New Year’s Day.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Contact

Explore all 7 Contact patterns

Contact split rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveContactNo plugin needed

Contact split

A contact section with no form in it: the left sixty per cent is almost empty, holding a tracked label, one display invitation and a single action, and the right forty per cent is packed, three stacked groups of address, hours and direct lines hanging off one vertical hairline.

ContactPreview pattern
Service areas columns rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveContactNo plugin needed

Service areas columns

Where a local business works, as a list rather than a map.

ContactPreview pattern
Contact cover ledger rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveContactNo plugin needed

Contact cover ledger

A full-bleed contact cover: a display heading in the top left, and a ruled ledger of address, hours, phone and email in the far lower-right corner, label left and value right between hairline rules, with the photograph running between them.

ContactPreview pattern