Commerce

8 blocks · Product cards, category grids, service highlights, and shopping-focused UI blocks for storefronts and menus.

Checkout1

Commerce — Single Product Checkout

Premium single-product showcase with a large image and a high-conversion 'Buy Now' button for Stripe payment links.

Grid1

Commerce — Featured Product Grid

A section header followed by a 3-column grid of product cards, each with an immediate Stripe checkout CTA.

Trust1

Commerce — Trust badge strip

Short section for PDP or cart adjacency: eyebrow, headline, and a wrapping row of pill chips (Material icon + label) for secure checkout, verification, returns, and support.

Related1

Commerce — Related products row

PDP-style band: eyebrow, headline, optional “View all” control, then four compact product cards in a 2x2 mobile grid that becomes a single row on desktop.

Cards3

Product Card

Two-up shop tiles on a muted band: image with badge, category, title, short description, price (with optional compare-at), and primary add-to-cart with cart icon.

Gallery Card

Single showcase card in a muted section: full-bleed image with bottom overlay title and category label.

Service Card

Offering card with accent top stripe, framed Material icon, eyebrow label, headline, supporting copy, and a text link with arrow.

Other1

Product categories grid

Store section with a headline, catalog link, and an eight-tile grid of category shortcuts: large Material icon above a bold label inside bordered cards.

Browse other blocks

Same library cards — preview live and grab structure from any block.

View full library

Hero Split

Two-column hero with eyebrow, heading, description, CTAs on left — large image on right.

Hero Background

Dark background hero with eyebrow, centered heading, description, and CTA buttons.

CTA Simple

Centered call-to-action block with heading, description, and buttons on an accent background.

Features — Three pillar grid

Centered headline and subhead with a three-column grid. Each column has an icon, title, body text, and a primary text link with trailing arrow.

Our Team Grid

Full team section: centered heading and intro, 2-column grid of horizontal profile cards with photo, name, role, bio, and icon-only social links.

Contact Form

Contact section: photo hero with overlay, overlapping card, two-column name and email/phone rows, message, legal line, primary submit.

Hero Centered

Centered hero with eyebrow label, large heading, description, and two CTA buttons.

Testimonial Card

Section heading plus a two-column grid of story cards: bold card title, quote body, photo avatar with name and role.

Testimonial Photo

Large editorial portrait beside a blockquote, primary accent rule, and attribution — full section with split card.

CTA Split

Two-column CTA with text on the left and email signup on the right.

Breadcrumbs (page header)

Full section band: eyebrow, page title, short intro, then slash-separated breadcrumb trail under a bottom border (muted surface, content-width inner).

Navbar

Full-width header band with logo plus Nav component: desktop links, primary CTA, hamburger, and slide panel with mirrored mobile links (same pattern as site templates).