Engineer ID card: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/engineer-id-card.html Core Patterns (https://patternpaste.com/patterns/) Team (https://patternpaste.com/patterns/team/) Catalogue access Standard # Engineer ID card A trust section for a trade: a reading column on checking who is coming, beside two registration cards drawn as objects. The first card leads on the licence number at display size and a ruled grid of work categories, each marked Yes or Not covered; a smaller second card laps its foot. Example portraits included, generated and nobody real. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The scheme names and numbers. Type your own registration; the numbers here are invented. - The work categories and which are covered. - The portraits. Generated and nobody real; use your engineers' own. - The check link. It points at #; paste the scheme's public register page. The signature moment ## The registration number is the headline, and the card shows what the engineer is not registered for too A registration card drawn as an object: a scheme strip, a headshot beside the name and expiry, the licence number at display size, then a ruled grid of work categories, each marked Yes or Not covered. The negative space of what is not covered is part of the card, because that is what a customer checking a register needs. A smaller second card laps the first card's foot, the lapping card the second child of a flow group so it paints on top (a vertical flex stack sized the first card from a narrower intrinsic layout and left an empty band that swallowed the lap). On a phone the prose comes first and the cards stack with a smaller lap. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Tags. - Buttons. ### Set by this pattern - The number. - The grid. - The lap. 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 trust section for an electrician, a gas engineer or any trade that sends someone into a home: before a stranger rings the bell, the customer can see the card they will show and the number to check. It sits in the team section beside team-profile-cards (a face beside a biography) and among the logo sections beside accreditations-ledger (six bodies, each closing on a number) and logo-spotlight (one featured partner). ### The signature moment: the registration number is the headline, and the card shows what the engineer is not registered for too A registration card drawn as an object: a scheme strip, a headshot beside the name and expiry, the licence number at display size, then a ruled grid of work categories, each marked Yes or Not covered. The negative space of what is not covered is part of the card, because that is what a customer checking a register needs. A smaller second card laps the first card's foot, the lapping card the second child of a flow group so it paints on top (a vertical flex stack sized the first card from a narrower intrinsic layout and left an empty band that swallowed the lap). On a phone the prose comes first and the cards stack with a smaller lap. Make it yoursVariations and the edits to make first ### What to change first - The scheme names and numbers. Type your own registration; the numbers here are invented. Keep the scheme as text, never its logo. - The work categories and which are covered. - The portraits. Generated and nobody real; use your engineers' own. - The check link. It points at #; paste the scheme's public register page. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The base states no font family. - Palette. Your page ground and text. The cards take the plate role, falling to base, with contrast text; each scheme strip is an inverted band in your contrast colour with base text. - Tags. Yes is a filled tag in your contrast colour; Not covered is a dashed outline, and both say so in words. - Buttons. Book is your theme's own button with 0.875rem padding; the check link is an underlined text link in the link role. ### What it decides for itself - The number. About 36px on a phone, 64px from 1280 up: sized so an eleven-character licence number fits the card on one line. - The grid. Work categories on 7.5rem minimum columns: three across in the card on a wide screen, two on a phone. - The lap. The second card sits clamp(2rem, 5vw, 4rem) up over the first card's foot, which keeps a matching margin free. Technical notesBlock mechanics, responsive behaviour and constraints ### The Spur look Part of the Spur Pattern Set, an electrician and plumber in Beeston, Nottingham: switch white ground #f2f3ef, a fuse grey band #e2e7ec, card white #ffffff and a cable black slab #14181c; cable black ink, slate #4a535b for secondary copy, live blue #1747c9 labels and primary buttons, conduit hairlines #c5ccd2, and signal yellow #ffd21a kept for emergencies. Headings and figures are Arial Black at 900; body, labels and buttons Arial. Cards and buttons have 4px corners, tags 2px. Here the cards sit on the fuse grey band under cable black scheme strips, Yes in a live blue tag and Not covered in a dashed slate outline. 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, heading, paragraph, image, columns, column, buttons, button. No plugin, nothing to keep updated. Questions ## Engineer ID card: common questions Does Engineer ID card need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Engineer ID card match my theme? Choose by variation. Registration cards takes your theme’s palette; Spur brings its own colours. How many variations does Engineer ID card have? 2: Registration cards and Spur. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Engineer ID card free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 32KB of core-block markup, 8 blocks (button, buttons, column, columns, group, heading, image, 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 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)Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Contact 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. A heavy veil of your theme's contrast colour keeps every line legible whatever photograph you choose. The ledger drops under the heading on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/contact-cover-ledger.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/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Team 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, column, columns, group, heading, image, paragraph Presets spacing 6, color 9, font-size 2 WordPress 7.0+ Continue exploring ## Next in Team Explore all 29 Team patterns (https://patternpaste.com/patterns/team/)Also in Logos (https://patternpaste.com/patterns/logos/) Shot in Twenty Twenty-Five Team No plugin needed ### Clinician week rota A small team's week as a rota: six days down the side, early, day and evening sittings across the top, and in each ruled cell the first names of who is working, so a customer can pick the person whose hours fit theirs. Team Preview pattern (https://patternpaste.com/pattern/clinician-week-rota.html) Shot in Twenty Twenty-Five Team No plugin needed ### Team alternating profiles Three broad profile spreads alternate the portrait side, giving each person room for a biography and a personal approach. Team Preview pattern (https://patternpaste.com/pattern/team-alternating-profiles.html) Shot in Twenty Twenty-Five Team No plugin needed ### Portrait contact sheet Six numbered portrait cards alternate crop heights to create a contact sheet, each with a name, role, short note and profile action. Team Preview pattern (https://patternpaste.com/pattern/team-contact-sheet.html)