Feature circle badges, Pattern Paste Canonical: https://patternpaste.com/pattern/feature-circle-badges.html Core Patterns (https://patternpaste.com/patterns/) Features (https://patternpaste.com/patterns/features/) Catalogue access Standard # Feature circle badges Four large circles in a poster row, alternately filled and outlined, each holding one figure a customer cares about, with a short caption under it and a call or booking action beneath the row. Four across on a desktop and two by two on a tablet and a phone, so the circles never shrink to buttons. States no colour and no font of its own. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The four figures and captions. Keep a figure to four characters so it sits inside the circle on a phone. - The actions. The button points at #book and the link at a tel: number; put your own number in both the text and the link. The signature moment ## Four circles, filled and hollow, read like a poster Four large circles alternate between a solid disc and a hairline ring, each holding a single figure a customer cares about. The circles are plain-colour covers with an aspect ratio of one and a 50% radius, so they stay perfectly round at every width and hold their figure dead centre. The alternation of filled and outlined gives the row its rhythm without any colour of its own. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Buttons. ### Set by this pattern - The circles and their rhythm. - Proportion. 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 Four promises for a trade or local service, each reduced to one figure inside a large circle, with a short caption under it and one action below the row. It sits in the features section beside feature-grid, which numbers its points in text, and feature-pill-ledger, which tags metrics in small pills: here the figures are the shapes, at poster size. ### The signature moment: four circles, filled and hollow, read like a poster Four large circles alternate between a solid disc and a hairline ring, each holding a single figure a customer cares about. The circles are plain-colour covers with an aspect ratio of one and a 50% radius, so they stay perfectly round at every width and hold their figure dead centre. The alternation of filled and outlined gives the row its rhythm without any colour of its own. Make it yoursVariations and the edits to make first ### What to change first - The four figures and captions. Keep a figure to four characters so it sits inside the circle on a phone. - The actions. The button points at #book and the link at a tel: number; put your own number in both the text and the link. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The base states no font family. - Palette. The ground is your base and the text your contrast. The filled circles are your contrast behind base figures; the hollow ones are your base inside a 2px contrast ring. The eyebrow tries role-label and the phone link role-link, both falling back to contrast. - Buttons. The booking button is your theme's button with a stated padding for a 44px target; the phone number is a transparent, underlined core button. ### What it decides for itself - The circles and their rhythm. - Proportion. Heading on xx-large (hierarchy); the figures are off the ladder because their size is the composition. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(2.25rem, 6vw, 5.5rem) (the figures) Technical notesBlock mechanics, responsive behaviour and constraints ### How it collapses Two pairs, each a two-column grid, inside an outer grid with a 30rem minimum column: four across on a desktop, two by two on a tablet, and still two by two on a phone, so a circle is never shrunk to a button or stacked into a column of four. Each circle is capped at 17rem. ### The Sky and tomato look A Styled variation with its own colours and type: sky blue ground #dcebf5, navy ink #13233a, one tomato disc #c23a22 and one navy disc with white figures, two navy rings, and a pill-shaped navy button with white type. The heading and figures are Arial Black, the rest Arial at 400. Every text pair is measured on its painted ground. Take the base if you want your theme's colours. ### Notes - Core blocks only: group, heading, paragraph, cover, buttons, button. No plugin, nothing to keep updated. - Text is measured at 4.5:1 against the ground it actually sits on. Questions ## Feature circle badges: common questions Does Feature circle badges need a plugin? No. It is built only from core WordPress blocks (button, buttons, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Feature circle badges match my theme? Choose by variation. Four circles takes your theme’s palette; Sky and tomato brings its own colours. How many variations does Feature circle badges have? 2: Four circles and Sky and tomato. 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 Feature circle badges free? It is included with a subscription, with every Core Pattern and variation. 56 Core Patterns are free to copy without one. 14KB of core-block markup, 6 blocks (button, buttons, cover, 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. Cancel whenever. 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. Cancel whenever. 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. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. 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)How it works Steps cards Four photographic process cards with level tops and descending feet. Each plate carries a replaceable WordPress image, a tracked step label, a short title and one sentence. The grid stretches the cards while their bottom margins draw the stair, reflowing into pairs and then a single column as the page narrows. States no colour and no font of its own. (https://patternpaste.com/pattern/steps-cards.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/) 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 Features 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, cover, group, heading, paragraph Presets color 6, spacing 4, font-size 1 WordPress 7.0+ Continue exploring ## Next in Features Explore all 30 Features patterns (https://patternpaste.com/patterns/features/) Shot in Twenty Twenty-Five Features No plugin needed ### Feature bento asymmetric An asymmetrical 3-card bento grid pairing one tall hero pillar card on the left with two stacked capability panels on the right, creating a distinct hierarchy of importance. Features Preview pattern (https://patternpaste.com/pattern/feature-bento-asymmetric.html) Shot in Twenty Twenty-Five Features No plugin needed ### Feature cluster micro A dense six-card grid (3x2) built with clean hairline borders, compact typography, and distinct category tags for detailed capability scanning. Features Preview pattern (https://patternpaste.com/pattern/feature-cluster-micro.html) Shot in Twenty Twenty-Five Features No plugin needed ### Feature cover bento A short heading row, then a bento of three photograph tiles: one tall cover beside two shorter ones stacked, the tall one exactly as high as the pair and the gap between them. Features Preview pattern (https://patternpaste.com/pattern/feature-cover-bento.html)