Skip to content
Cart
Error loading cart
Pickup options

Mega Menu

Styleguide

Contact

Issue 07

Salt & sky

Three days on the coast with the spring collection.

Button Text

Your Title

Use this text to share information about your brand.

Six image modes in a 6-col grid

Every combination of Width × Height. Columns 5 & 6 (custom 120 + ratio/natural) verify the items-content-gravity fix: images respect their explicit size without being vertically stretched.

full+full

full+ratio 1:1

full+natural

custom 120+full

custom 120+ratio 1:1

custom 120+natural

Each image mode in a 1×2 tall slot

theme-image · Test 3

Worst-case narrow cells: mixed image modes at 140px auto-fit

theme-group-frame · Test 1

Frame with full_height in tall slots — 4 justification_column variants

Start

Content at top, frame fills.

Center

Content centered.

No fill

Frame at content height.

theme-group-frame · Test 3

set_width tradeoffs — 500/200/percent/fluid in a 4-col grid

Demonstrates the documented behavior: frame widths exceeding the cell are capped at cell width by w-layout (prevents overflow).

500px width
200px width
50% width
Fluid 100/50

_callout-group · Test 1

Callout-group with own 3-col layout inside a 4-col grid cell (~333px)

Columns-in-columns stress. Callout-group uses its own responsive grid that must fit inside the parent grid's cell.

Shipping

Returns

Secure

Warranty

Support

Fast

Two-day.

Easy

Returns.

A

B

C

D

_callout + _callout-group · Test 2

Callouts and callout-groups in featured/wide/tall slots

Fast shipping

Worldwide.

Easy returns

30-day.

Secure

Encrypted.

Warranty

2 years.

Need help?

Real humans available 24/7 via chat, email, or phone.

Eco-responsible

Every decision considered for minimal environmental impact.

_cards-products · Test 1

_cards-products loop as direct grid child — each card becomes a grid cell

The killer use case. Loop emits N cards as direct grid children. Grid's 4-col layout takes over — no intermediate wrapper.

Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10

_cards-products + _grid-auto-item · Test 2

Classic catalog: featured 2×2 hero slot + products loop filling rest

Featured

Summer drop

Button Text
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10

_card-product · Test 3

Single product card in featured (2×2), wide (2×1), tall (1×2) slots

Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10
Your product's name $10

_tile-image · Test 1

Tile-image with aspect_ratio in featured (1:1) / wide (2:1) / tall (0.5) slots

Tile aspect-ratios are honored exactly: featured = 675×675, wide = 675×338, tall = 333×665.

Featured 1:1

Wide 2:1

Tall 0.5

_tile-image · Test 2

Navigation tiles at 180px auto-fit with overlays + rounded corners

Shop
Explore
Discover
Browse
Journal
Lookbook

_tile-frame · Test 1

tile-frame containing _card-product — styled frame around a product card

Your product's name $10
Your product's name $10
Your product's name $10