TPO permission steps: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/tpo-permission-steps.html Core Patterns (https://patternpaste.com/patterns/) How it works (https://patternpaste.com/patterns/steps/) Catalogue access Standard # TPO permission steps A four-step process on an inverted slab for work that needs the council's consent: each step opens with an oversized numeral and a timescale badge on a hairline, then a heading and a short line. A heading under the steps gives the whole wait, beside a button and a call link. The steps run four across, two on a tablet and one on a phone. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The council and the timescales, if you work under a different authority. - The closing line: your usual total wait. - The phone number on the call link (it dials the number it shows). The signature moment ## Every step carries its wait as a badge beside an oversized numeral Each step opens with a numeral set at display size and, level with its foot, a small badge naming how long that step takes: same day, 1 to 2 days, 6 to 8 weeks, within 3 weeks. A heading under the steps adds them up. The steps are a grid from a 16rem minimum, four across, two on a tablet, one on a phone. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. ### Set by this pattern - The numerals. - The heading. 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 The four steps between "can you take this tree down?" and the saw, for a tree under a Tree Preservation Order or in a conservation area. It is a reassurance section: the customer sees that the paperwork is ours and how long the wait is. It sits in the steps section beside steps-run (a thread between numerals), steps-ledger (a printed schedule) and first-visit-to-scale (a visit drawn to scale): none gives each step its own timescale badge. ### The signature moment: every step carries its wait as a badge beside an oversized numeral Each step opens with a numeral set at display size and, level with its foot, a small badge naming how long that step takes: same day, 1 to 2 days, 6 to 8 weeks, within 3 weeks. A heading under the steps adds them up. The steps are a grid from a 16rem minimum, four across, two on a tablet, one on a phone. Make it yoursVariations and the edits to make first ### What to change first - The council and the timescales, if you work under a different authority. - The closing line: your usual total wait. - The phone number on the call link (it dials the number it shows). Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The base states no font family. - Palette. Inverted: your contrast ground with base type, numerals and hairlines; the badges are base with contrast type; the button is inverted to base with contrast type so it reads on the slab, and the call link follows the text colour. ### What it decides for itself - The numerals. A bare clamp from 72px to 128px: their size is the composition. - The heading. A bare clamp, about 34px on a phone. Technical notesBlock mechanics, responsive behaviour and constraints ### The Bough look Part of the Bough Pattern Set, a tree surgeon in Brimscombe Port, Stroud. Here the section is the forest #15301c slab: birch-bark #e8eee2 type, light leaf-green #9fd08a numerals and labels (8.1:1 on forest), leaf-green timescale badges with forest type and 2px corners, #3d6647 hairlines, a Rockwell slab stack over Trebuchet MS, and a filled hi-vis orange button with forest type and 4px corners. Take the base for your theme's colours, or the look's Use my theme chip. ### Notes - Core blocks only: group, heading, paragraph, buttons. - No photograph. Questions ## TPO permission steps: common questions Does TPO permission steps need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will TPO permission steps match my theme? Choose by variation. Permission steps takes your theme’s palette; Bough brings its own colours. How many variations does TPO permission steps have? 2: Permission steps and Bough. Each is its own markup; choose one in the toolbar above the preview before you copy. Is TPO permission steps 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. 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. 20KB of core-block markup, 5 blocks (button, buttons, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £119 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £119 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £119 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Timeline Availability calendar The next six months at a glance, as a wall planner of month tiles: each tile gives the year, the month at display size and a status with a small square mark. An open month carries a heavy top rule and a filled mark, a nearly full one a heavy rule and names the days left, and a booked month is struck through with an empty mark. A short line on how dates are held and one underlined link sit beside the heading. States no colour and no font of its own. (https://patternpaste.com/pattern/availability-calendar.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 How it works Access Subscription 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, group, heading, paragraph Presets color 4, spacing 3, font-size 1 WordPress 7.0+ Continue exploring ## Next in How it works Explore all 7 How it works patterns (https://patternpaste.com/patterns/steps/)Also in Timeline (https://patternpaste.com/patterns/timeline/) Shot in Twenty Twenty-Five How it works No plugin needed ### Steps screens A software walkthrough in four columns: a 16:10 frame with an example photograph ruled in currentColor, then a numeral chip that laps half into the frame and half into the caption below it, then the step title and one sentence. How it works Preview pattern (https://patternpaste.com/pattern/steps-screens.html) Shot in Twenty Twenty-Five How it works No plugin needed ### First visit to scale What happens at a first appointment, drawn to scale: a bar of the whole appointment split into three solid segments whose widths are each step's share of the minutes, a scale line under it, then the three steps at the same widths, stacking on a tablet and a phone, with a title and a line each, and a closing note with one button. How it works Preview pattern (https://patternpaste.com/pattern/first-visit-to-scale.html) Shot in Twenty Twenty-Five How it works No plugin needed ### Steps cards Four photographic process cards with level tops and descending feet. How it works Preview pattern (https://patternpaste.com/pattern/steps-cards.html)