Sermona

Ecommerce patterns ​

Sermona stays dark-first: charcoal surfaces, gold for sale state and key actions, tabular numerals for money. These primitives are CSS-only — wire them to your cart, inventory, and analytics in the stack you already use.

Product listing ​

.sermona-product-grid fills the row with .sermona-product-card tiles. Cards support <article> or a.sermona-product-card (whole-card link). Add .sermona-product-card--interactive for hover lift on non-anchor cards.

Structure: .sermona-product-card__media (optional .sermona-product-card__badge), .sermona-product-card__body, .sermona-product-card__footer (price + optional control).

Free shipping over $75 · Ends Sunday

Applied at checkout · Exclusions apply

SaleMinimal watch on dark surface

Maison orbit

Ceramic bezel field watch

38 mm · Sapphire · 5 ATM

$428$520
NewHeadphones product still life

Null audio

Closed-back studio set

$2104.8 ★
Red running shoe

Tracksmith adjacent

Knit daily trainer

Ships in 2–3 days

$168

Members: extra 10% this week

PDP-style variants ​

.sermona-variant-row wraps .sermona-variant-pill controls. Use aria-pressed="true" on the selected option (or .sermona-variant-pill--selected" if you mirror state with a class).

Size

Pair with Forms & CTAs for quantity and Add to cart.

Cart + order summary ​

.sermona-cart-line uses grid-template-areas so .sermona-cart-line__aside (line total) drops full width under narrow viewports.

.sermona-order-summary holds subtotal / shipping / tax rows and .sermona-order-summary__total.

Cart

Ceramic bezel field watch

Color: Graphite

Qty 1

$428

Knit daily trainer

Size: M · Wide

Qty 2

$336

Summary

Subtotal $764

Shipping $0

Estimated tax $61

Total$825

Trust strip ​

.sermona-trust-strip — centered row of .sermona-trust-strip__item (short label + optional .sermona-icon). Use for payments, returns, or support — not a substitute for legal pages.

Secure checkout 30-day returns Human support

img with empty alt in cart thumbnails is acceptable when the line title names the product.

Copy & accessibility ​

  • Sale vs list — State both in text or aria-label on .sermona-price; don’t rely on color alone (.sermona-price--accent is supplementary).
  • Currency — Keep one currency symbol convention per locale; use tabular nums (already on price classes).
  • Stock / errors — Follow Voice & copy for recovery paths (“Ships Mar 12” not “Error”).
  • Quick add — After add, move focus to cart or announce via a live region (implementation-specific).

See also ​