Rates day sheet: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/rates-day-sheet.html Core Patterns (https://patternpaste.com/patterns/) Pricing (https://patternpaste.com/patterns/pricing/) Free Standard # Rates day sheet A freelancer’s rates as one printed rate card: a short introduction and a single booking button beside a card with a heavy masthead rule, three ruled rows each naming the rate, what it covers and what it includes, with the price set at display size in the right margin, and the terms (deposit, usage, travel, weather) as small print at the foot. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The three rates: name, one line, what each includes and the price. - The terms: deposit, usage, travel and weather, as you actually trade. - The button: its label and link (it points at /contact/). The signature moment ## The rates are one printed card, the prices hanging in its right margin and the terms as its small print The card is the design. A heavy masthead rule opens it, with "Rate card" and the year as its running head; three ruled rows follow, each naming the rate, what it covers and what it includes, with the price set at display size and ranged right so the three figures read down the card's edge; the terms (deposit, usage, travel, weather) close it as small print in a grid of four. Nothing is a tier or a plan to compare: it is one card, the same for every client. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Button. ### Set by this pattern - The prices. - The layout. - The terms. 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 freelancer's rates, set as the printed rate card they would hand a client: a short introduction and one booking button on the left, and on the right a single card with the day, the half day and the design fee. It sits in the pricing section beside pricing-single (one offer against a scale collision), job-sheet-breakdown (a total ruled off twice) and price-list-treatments (time and price read straight down). ### The signature moment: the rates are one printed card, the prices hanging in its right margin and the terms as its small print The card is the design. A heavy masthead rule opens it, with "Rate card" and the year as its running head; three ruled rows follow, each naming the rate, what it covers and what it includes, with the price set at display size and ranged right so the three figures read down the card's edge; the terms (deposit, usage, travel, weather) close it as small print in a grid of four. Nothing is a tier or a plan to compare: it is one card, the same for every client. Make it yoursVariations and the edits to make first ### What to change first - The three rates: name, one line, what each includes and the price. - The terms: deposit, usage, travel and weather, as you actually trade. - The button: its label and link (it points at /contact/). Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The base states no font family. - Palette. Your base ground and contrast text. The card tries role-plate and role-plate-text, its hairlines role-rule, and its masthead rule contrast; all fall back to base and contrast. Labels try role-label. - Button. Your theme's filled button, with padding for a 44px target. ### What it decides for itself - The prices. Off the ladder: a bare clamp() from 2.5rem to 4rem, because their size is the composition. The heading is on the ladder at x-large and the rate names at large. - The layout. A 34 / 66 split from 782px; below it the introduction comes first and the card follows. In each row the price sits right of the description from 782px and under it on a phone. - The terms. A grid of 16rem minimum columns: two across whenever the card is wide enough, one on a tablet column and a phone, so every row is full. Technical notesBlock mechanics, responsive behaviour and constraints ### The Folio look Part of the Folio Pattern Set, a freelance photographer and designer's whole site in one design language: a paper band #f8f5ef carrying a bone card #efe9df with a darkroom #141517 masthead rule and graphite #5b5f66 hairlines; darkroom ink, graphite for secondary copy and small print, and a safelight #c8432b bar marking the section label. Headings, rates and prices are Helvetica Neue at 500 with tight tracking (Helvetica, Arial, sans-serif); the running head, units and terms are monospace (ui-monospace, SFMono-Regular, Menlo, Consolas, monospace), uppercase and tracked. Corners are square; the one button is a filled darkroom rectangle. Every text pair is measured on the ground it is painted on. Take the base for your theme's colours, or the look's Use my theme chip. ### Notes - Core blocks only: group, columns, column, heading, paragraph, list, buttons, button. No plugin, nothing to keep updated. Questions ## Rates day sheet: common questions Does Rates day sheet need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, list, list-item and paragraph), so it pastes into the block editor with nothing to install. Will Rates day sheet match my theme? Choose by variation. Rate card takes your theme’s palette; Folio brings its own colours. How many variations does Rates day sheet have? 2: Rate card and Folio. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Rates day sheet free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### Pair with FAQ Emergency triage list An emergency page section for a trade: a header with a legend of three verdict tags, then seven ruled rows sorted by urgency, each the problem as a card title, what to do now, and a verdict tag at the right: ring now, book it, or ring the gas line first. States no colour and no font of its own. (https://patternpaste.com/pattern/emergency-triage-list.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Pricing Access Free Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, column, columns, group, heading, list, list-item, paragraph Presets color 8, font-size 3 WordPress 7.0+ Continue exploring ## Next in Pricing Explore all 16 Pricing patterns (https://patternpaste.com/patterns/pricing/) Shot in Twenty Twenty-Five Pricing No plugin needed ### Website care Website care: service scopes beside prices, expandable plan scopes. Pricing Preview pattern (https://patternpaste.com/pattern/pricing-website-care.html) Shot in Twenty Twenty-Five Pricing No plugin needed ### Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. Pricing Preview pattern (https://patternpaste.com/pattern/donate-impact-tiers.html) Shot in Twenty Twenty-Five Pricing No plugin needed ### Fixed price job board A price board for a trade's everyday jobs: a label, heading and one line over eleven job cards and one photograph, each card wearing its fixed price on a tag with a punched hole that laps the card's top edge, then the job, what is included and a ruled line for the time on site. Pricing Preview pattern (https://patternpaste.com/pattern/fixed-price-job-board.html)