Why Are People Moving Away From WordPress?
People leave WordPress for five reasons that come up over and over: plugin conflicts, updates that break things, security incidents on neglected…
Read more →A design system with 43 section blocks, nine colour schemes and any Google font you like. Everything renders through native WordPress blocks, so pages stay fast, portable, and readable long after whoever built them has moved on.
wpr/heroPage hero. The only block that emits an h1, so use it once, at the top.This page exists so you can see what each block looks like with real spacing around it. The copy is filler. The layout is not.
wpr/hero-splitwpr/chat-threadSplit hero: copy left, card column right. Its allowedBlocks is wpr/chat-thread only, so one rides along.The right column takes any child block. Here it holds a chat thread.
wpr/chat-threadThe ticket card on its own. A leaf block that ships default messages, so an untouched one is not blank.Used inside hero-split on the front page and inside a wpr/heading on /task-examples/, which is why it is not restricted to a parent.
wpr/trustPlatform strip. Deliberately not a .wpr-section, it carries its own rhythm.wpr/headingThe generic section container. On its own it draws a heading band; with bare + grid it wraps children.Use this when a section carries copy but no grid, or as the wrapper for blocks that ship without a section of their own.
This paragraph is a child block sitting inside the heading section.
wpr/paragraphBody copy. Renders no section of its own, so the row is a wpr/heading container.Two class options: wpr-p for body copy, wpr-lead for the larger intro size.
A standard body paragraph using the wpr-p class. It takes limited HTML, so bold and links both work inside it.
The same block with the wpr-lead class instead. Larger type, same markup.
wpr/punchThe emphatic one-liner. Also section-less, so it sits in a wpr/heading container.Grid-backed sections can emit a punch above and below their grid without this block. Use the block directly anywhere else.
wpr/badgeThe reassurance pill. Takes a leading icon or a tag chip; the tag wins when both are set.Shown twice below: once with an icon, once with a tag chip.
wpr/actionsThe button pair on its own. Hero and CTA draw their own; this is for everywhere else.Primary button plus an optional ghost button. Clear either label to hide that button.
wpr/card-gridwpr/cardIcon cards in a grid. The cards below show every card variation: paras, ribbon, badge, features, warn.Three columns here. The block takes 2, 3 or 4.
Cards accept a single text field or an array of paragraphs.
Icon, heading, one paragraph. This is the shape most cards use.
The ribbon sits above the heading. The badge sits below it.
This card uses the paras array, so it can run to more than one paragraph with its own spacing on each.
The features array renders through the shared checklist partial.
Set variant to warn and the card picks up the .wpr-card–warn treatment used by the “what goes wrong” grids.
Pass an empty icon and the card drops the icon well entirely. Leaving the key out gives you the default wallet instead.
The style field lands on the card element, so a single card can break the grid rhythm.
The fourth card uses the warn variant.
Card grids also render without a heading when bare is true.
wpr/stepswpr/stepNumbered steps. Each step takes a meta line with its own icon, and icon_size accepts null for CSS sizing.Same grid engine as the card grid, with a numbered item partial.
Three columns here, but the block takes 2 to 4.
Write it in plain words. Screenshots help but are not required.
Someone reads it, asks anything that is unclear, and starts.
Fixed, checked on a real device, and left the way you asked for it.
The last step below sets icon_size to null so CSS controls it.
Step numbers are strings, so “01” and “1” both work.
wpr/statswpr/statBig-number columns. Two columns here because .wpr-stat__n overflows a 4-column cell past ~5 characters.Numbers longer than about five characters need cols 2 or they overflow.
The label sits above the number, the term below it.
The second column is set as the feature.
Stat blocks are also the child of the comparison block.
wpr/comparisonwpr/statThe this-versus-that band, in the split head layout: heading left, note right, no lead.This paragraph is the note. It only shows because layout is set to split, which moves the heading left and the note into this right-hand column.
wpr/comparison-tableA real table: column headers, one highlighted column with a caption, and labelled rows.Columns and rows are arrays. Each row supplies as many cells as there are columns.
| On your own | A freelancer | RECOMMENDEDThe filler plan | |
|---|---|---|---|
| Response time | Whenever you get to it | 1 to 3 days | Same day |
| Monthly cost | $0 plus your time | $85 an hour | $67 flat |
| Backups checked | ✕ | On request | ✓ |
| Someone on call | ✕ | ✕ | ✓ |
| Cancel any time | n/a | Contract | ✓ |
wpr/serviceswpr/serviceFour-column service tiles. Same grid engine, lighter item partial than the card.The service item is a slimmer card: icon, heading, one line of copy.
Services take an inline style like cards do.
Something broke and you want it working again.
Spacing, colours, a section that never looked right.
Pages that take too long to load on a phone.
Updates, backups, and the boring parts nobody enjoys.
Drop cols to 2 if the copy runs long.
Set bare to true to render the grid with no heading band.
wpr/feature-listwpr/featureIcon-well rows. Neither block declares any attribute of its own, and neither emits a section.The feature list is a hard three-column grid, so a fourth item orphans. Keep it to multiples of three.
wpr/flowwpr/flow-stepA four-across numbered strip. Close to steps but a separate element: 46px circles, accent first number.Fixed four columns. No meta line, unlike the steps block.
Send the task in whatever words come out first.
We come back with what it takes and how long.
The work happens on a copy, not on your live site.
It goes live once you have looked at it.
wpr/testimonialswpr/testimonialReview cards. Star count, initials and avatar colour are all per-testimonial.Leave the children out and the partial falls back to the six shared testimonials.
Avatar takes accent, accent2, or any raw CSS colour.
“Filler review copy at five stars. Long enough to show how the card handles two lines of text.”
“The same card at four stars, with the second avatar colour instead of the first.”
“Three stars, and a raw CSS colour on the avatar rather than one of the two named options.”
Star count runs 0 to 5.
Quotes are passed without their surrounding quote marks.
wpr/pricing-planswpr/planPlan cards with a notice row. The middle plan is the feature; the third uses the block treatment.Prices split into a whole part and a cents part so the cents render small and inside the bold.
wpr/includedA single plan beside a checklist box. The plan is an object attribute, not a child block.Two columns that collapse on narrow screens. The left is a full plan card.
wpr/task-listA ticked or crossed list card. Section-less, so it sits in a wpr/heading grid container.Set cross to true and every tick becomes a cross, which is how the “not covered” lists read.
wpr/choiceThe this-or-that card. Four fields, a bad or good variant, and no section of its own.Usually shown in pairs so the two variants sit side by side.
Rendered with variant set to bad, which is the muted treatment.
Rendered with variant set to good, which is the highlighted one.
wpr/taskswpr/taskThe example task grid. Each task takes a meta array rendered with · separators.A two-column grid of task rows. This block has no punch or footnote fields.
wpr/faqwpr/faq-itemAccordion. The first item is set open so you can see both states at once.This is the note, and it is the paragraph the FAQ shows under the heading. Answers take limited HTML, so a link inside one needs its own inline colour.
wpr/contactwpr/contact-pointTwo-column contact split. The form is a shortcode string, run through do_shortcode by the partial.The left column takes contact-point children. The right column takes a form shortcode.
wpr/logo-wallClient or platform logos as images. Grey until hover so mismatched brand colours do not fight the page.wpr/media-textAn image or video beside a column of copy. The mid-page counterpart to the split hero, and it flips either way.Set side to left or right. The copy stays first in the source order, so reading and tab order never flip with the visual columns.

wpr/before-afterTwo images with a draggable divider. Works without JavaScript: the control is a real range input, so it is keyboard operable.

Both images should share the same aspect ratio.
wpr/post-gridRecent posts as cards. Reuses the card styles rather than a post-specific tile, so posts and features sit in one system.Queried when the page renders, so it never goes stale.
People leave WordPress for five reasons that come up over and over: plugin conflicts, updates that break things, security incidents on neglected…
Read more →No. WordPress runs about 41.9% of all websites as of May 2026, and close to 60% of every site built on a…
Read more →How Multan Farms runs a live WooCommerce store without hiring a developer: a real look at the build and the ongoing maintenance…
Read more →wpr/formA lead form that emails the submission. Fields are authored as `Label :: type :: required`; honeypot, timing and rate limits guard the endpoint.The field styles already existed; only the Get Started wizard could reach them.
wpr/ctaThe closing band. Badge, heading, two buttons, a facts row, a notice and a footnote.A closing band with everything switched on at once.