Every element and content pattern in the theme, grouped by what you’re building. Insert patterns from the editor’s + → Patterns panel and edit the placeholder copy. This is a reference page. Delete it before you launch.
Elements · Page starters & heroes · Content sections · Services & pricing · Social proof · Team & people · Portfolio & work · Calls to action · Contact & location · Blog & posts · Utility · More patterns · Content widths
The building blocks every pattern is made from. Each item is labelled with the class or token you type to use it.
Applied as has-{slug}-color for text or has-{slug}-background-color for a fill. A curated set is shown; the full neutral and semantic scales exist too.
Font sizes, applied as has-{slug}-font-size. Each line is set at the size it names.
has-display-font-size
has-xxxl-font-size
has-xxl-font-size
has-xl-font-size
has-lead-font-size
has-l-font-size
has-base-font-size
has-m-font-size
has-s-font-size
has-xs-font-size
has-xxs-font-size
Font families, applied as has-{slug}-font-family.
has-headings-font-family
has-body-font-family
has-mono-font-family
Four emphasis tiers, strongest to quietest. Use one primary (Fill) per view and let the rest recede. All adapt to the colour variation and to light/dark, and meet WCAG AA. The block toolbar labels these Fill / Accent / Outline / Subtle.
is-style-fill
Primary, the one main action
is-style-accent
Soft, secondary emphasis
is-style-outline
Bordered, quiet secondary
is-style-subtle
Ghost, lowest emphasis
The a element. Inline links use the accent (link) colour with an underline.
A paragraph with an inline link and following text, so it can be seen in running copy.
Native form controls, styled at the element level (no class needed). A form plugin that ships its own styling takes over when present.
The spacing scale, applied through block spacing controls (emitted as var:preset|spacing|{slug}). Bars are drawn to scale.
blockwright/hero-centered
blockwright/hero-split
blockwright/hero-basic
blockwright/content-media
blockwright/about-intro
blockwright/steps-process
blockwright/section-feature-grid
blockwright/section-constrained
blockwright/subsection-constrained
blockwright/layout-stack
blockwright/layout-cluster
blockwright/services-grid
blockwright/pricing-table
blockwright/stats-band
blockwright/testimonials-grid
blockwright/testimonial
blockwright/logos-cloud
blockwright/team-grid
blockwright/profile-detail
blockwright/skills-grid
blockwright/project-grid
blockwright/case-study
blockwright/cta-centered
blockwright/cta-stripe
blockwright/contact-simple
blockwright/location-hours
blockwright/faq
blockwright/post-summary
blockwright/post-meta
blockwright/archive-feature-grid
blockwright/comments
blockwright/404
blockwright/announcement-bar
blockwright/author-bio
blockwright/comparison-cards
blockwright/form-contact
blockwright/form-signup
blockwright/gallery
blockwright/guarantee-badges
blockwright/hero-image
blockwright/offer-callout
blockwright/related-posts
blockwright/scorecard-resolved
blockwright/scorecard
blockwright/stats-grid
Any page can use one of three content widths, set from the editor’s Page → Template dropdown.
Standard, reading width
Wide
Full width, edge to edge