E-commerce

E-commerce blocks cover product display, pricing, variant selection, cart management, and checkout summaries. They compose with content and action blocks to build complete shopping experiences.

Price

Formatted price display with tabular numerals. Supports sale pricing with original/discount, currency symbols, and subscription periods.

Default price

<span class="ln-price">
  <span class="ln-price__currency">$</span>
  <span class="ln-price__current">49.99</span>
</span>

$49.99

Sale price

<span class="ln-price ln-price--sale">
  <span class="ln-price__currency">$</span>
  <span class="ln-price__current">29.99</span>
  <span class="ln-price__original">$49.99</span>
  <span class="ln-price__discount">-40%</span>
</span>

$29.99$49.99-40%

Rating

Star rating display with optional numeric value and review count. Set --rating (0–5) on the stars element to control fill level. Override --star-color to change the fill color.

Default rating

<div class="ln-rating">
  <div class="ln-rating__stars" style="--rating: 4"></div>
  <span class="ln-rating__value">4.0</span>
  <span class="ln-rating__count">(128 reviews)</span>
</div>

4.0(128 reviews)

Custom color

<div class="ln-rating">
  <div class="ln-rating__stars" style="--rating: 3.5; --star-color: var(--warning-text)"></div>
  <span class="ln-rating__value">3.5</span>
  <span class="ln-rating__count">(42 reviews)</span>
</div>

3.5(42 reviews)

Swatch

Variant selectors for color, text, and image options. Uses visually hidden radio/checkbox inputs with custom styled labels. Set the --c custom property to control each option’s color.

Color swatches

<div class="ln-swatch">
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="color" value="black" checked>
    <span class="ln-swatch__color" style="--c: #000"></span>
  </label>
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="color" value="white">
    <span class="ln-swatch__color" style="--c: #fff"></span>
  </label>
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="color" value="blue">
    <span class="ln-swatch__color" style="--c: #3b82f6"></span>
  </label>
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="color" value="red">
    <span class="ln-swatch__color" style="--c: #ef4444"></span>
  </label>
</div>

Text swatches

<div class="ln-swatch ln-swatch--text">
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="size" value="s" checked>
    <span class="ln-swatch__color">S</span>
  </label>
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="size" value="m">
    <span class="ln-swatch__color">M</span>
  </label>
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="size" value="l">
    <span class="ln-swatch__color">L</span>
  </label>
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="size" value="xl">
    <span class="ln-swatch__color">XL</span>
  </label>
</div>

SMLXL

Text swatches with custom colors

<div class="ln-swatch ln-swatch--text">
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="plan" value="basic" checked>
    <span class="ln-swatch__color" style="--c: #22c55e">Basic</span>
  </label>
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="plan" value="pro">
    <span class="ln-swatch__color" style="--c: #a855f7">Pro</span>
  </label>
  <label class="ln-swatch__option">
    <input class="ln-swatch__input" type="radio" name="plan" value="enterprise">
    <span class="ln-swatch__color" style="--c: #f97316">Enterprise</span>
  </label>
</div>

BasicProEnterprise

Quantity

Increment/decrement input for cart quantities. Add data-ln-quantity to wire up the buttons automatically. Respects min, max, and step attributes on the input.

Default quantity

<div class="ln-quantity" data-ln-quantity>
  <button class="ln-quantity__decrement" type="button">−</button>
  <input class="ln-quantity__input" type="number" value="1" min="1" max="10">
  <button class="ln-quantity__increment" type="button">+</button>
</div>

Gallery

Image gallery with scroll-snap slides, thumbnail strip, and dot indicators. Add data-ln-gallery to sync thumbnail selection with the visible slide.

Gallery with thumbnails

<div class="ln-gallery" data-ln-gallery>
  <div class="ln-gallery__main">
    <div class="ln-gallery__slide">
      <img src="/placeholder-1.svg" alt="Product view 1">
    </div>
    <div class="ln-gallery__slide">
      <img src="/placeholder-2.svg" alt="Product view 2">
    </div>
    <div class="ln-gallery__slide">
      <img src="/placeholder-3.svg" alt="Product view 3">
    </div>
  </div>
  <div class="ln-gallery__thumbs">
    <button class="ln-gallery__thumb is-active" aria-selected="true">
      <img src="/placeholder-1.svg" alt="Thumb 1">
    </button>
    <button class="ln-gallery__thumb" aria-selected="false">
      <img src="/placeholder-2.svg" alt="Thumb 2">
    </button>
    <button class="ln-gallery__thumb" aria-selected="false">
      <img src="/placeholder-3.svg" alt="Thumb 3">
    </button>
  </div>
</div>

Product Card

Commerce-ready card with media area, vendor label, title, price, and actions. Supports aspect ratio modifiers, badges, and sold-out state.

Default product card

<div class="ln-product-card">
  <div class="ln-product-card__media">
    <div class="ln-product-card__img">
      <div class="docs-placeholder docs-placeholder--fill"></div>
    </div>
  </div>
  <div class="ln-product-card__body">
    <span class="ln-product-card__vendor">Acme Co</span>
    <h3 class="ln-product-card__title">Classic T-Shirt</h3>
    <span class="ln-price">
      <span class="ln-price__currency">$</span>
      <span class="ln-price__current">29.00</span>
    </span>
  </div>
  <div class="ln-product-card__actions">
    <button class="ln-button ln-button--solid ln-button--block">Add to cart</button>
  </div>
</div>

Acme Co

Classic T-Shirt

$29.00

Line Item

Cart or order row with image thumbnail, product details, price, and remove button. Uses a 3-column grid: 4rem 1fr auto. Group multiple items for a cart list — borders separate them automatically.

Default line item

<div class="ln-line-item">
  <div class="ln-line-item__media">
    <div class="docs-placeholder docs-placeholder--fill"></div>
  </div>
  <div class="ln-line-item__body">
    <div class="ln-line-item__title">Classic T-Shirt</div>
    <div class="ln-line-item__meta">Black / M</div>
  </div>
  <div class="ln-line-item__side">
    <div class="ln-line-item__price">$58.00</div>
    <button class="ln-line-item__remove" type="button" aria-label="Remove">&times;</button>
  </div>
</div>

Classic T-Shirt

Black / M

$58.00

Multiple line items

<div>
  <div class="ln-line-item">
    <div class="ln-line-item__media">
      <div class="docs-placeholder docs-placeholder--fill"></div>
    </div>
    <div class="ln-line-item__body">
      <div class="ln-line-item__title">Classic T-Shirt</div>
      <div class="ln-line-item__meta">Black / M · Qty 2</div>
    </div>
    <div class="ln-line-item__side">
      <div class="ln-line-item__price">$58.00</div>
      <button class="ln-line-item__remove" type="button" aria-label="Remove">&times;</button>
    </div>
  </div>
  <div class="ln-line-item">
    <div class="ln-line-item__media">
      <div class="docs-placeholder docs-placeholder--fill"></div>
    </div>
    <div class="ln-line-item__body">
      <div class="ln-line-item__title">Slim Fit Jeans</div>
      <div class="ln-line-item__meta">Indigo / 32</div>
    </div>
    <div class="ln-line-item__side">
      <div class="ln-line-item__price">$79.00</div>
      <button class="ln-line-item__remove" type="button" aria-label="Remove">&times;</button>
    </div>
  </div>
  <div class="ln-line-item">
    <div class="ln-line-item__media">
      <div class="docs-placeholder docs-placeholder--fill"></div>
    </div>
    <div class="ln-line-item__body">
      <div class="ln-line-item__title">Canvas Sneakers</div>
      <div class="ln-line-item__meta">White / 10</div>
    </div>
    <div class="ln-line-item__side">
      <div class="ln-line-item__price">$65.00</div>
      <button class="ln-line-item__remove" type="button" aria-label="Remove">&times;</button>
    </div>
  </div>
</div>

Classic T-Shirt

Black / M · Qty 2

$58.00

Slim Fit Jeans

Indigo / 32

$79.00

Canvas Sneakers

White / 10

$65.00

Order Summary

Checkout totals panel with line rows for subtotal, shipping, tax, and a bold total. Includes an actions area for the checkout button.

Default order summary

<div class="ln-order-summary">
  <div class="ln-order-summary__header">Order Summary</div>
  <div class="ln-order-summary__row">
    <span>Subtotal</span>
    <span>$87.00</span>
  </div>
  <div class="ln-order-summary__row">
    <span>Shipping</span>
    <span>$5.99</span>
  </div>
  <div class="ln-order-summary__row">
    <span>Tax</span>
    <span>$7.44</span>
  </div>
  <div class="ln-order-summary__total">
    <span>Total</span>
    <span>$100.43</span>
  </div>
  <div class="ln-order-summary__actions">
    <button class="ln-button ln-button--solid ln-button--block ln-button--lg">Checkout</button>
  </div>
</div>

Order Summary

Subtotal$87.00

Shipping$5.99

Tax$7.44

Total$100.43

Reference

Class	Description	Responsive
`.ln-price`	Formatted price display	No
`.ln-price--sale`	Sale price layout with original and discount	No
`.ln-price--sm`	Small size variant	No
`.ln-price--lg`	Large size variant	No
`.ln-rating`	Star rating display	No
`.ln-rating--compact`	Compact rating layout	No
`.ln-swatch`	Variant selector group	No
`.ln-swatch--text`	Text label swatches	No
`.ln-swatch--image`	Image swatches	No
`.ln-quantity`	Increment/decrement input	No
`.ln-quantity--compact`	Compact quantity control	No
`.ln-gallery`	Image gallery with scroll-snap	No
`.ln-gallery--thumbs-start`	Thumbnails on the left side	No
`.ln-gallery--grid`	Grid layout instead of carousel	No
`.ln-product-card`	Commerce card with media, body, and actions	No
`.ln-product-card--horizontal`	Horizontal card layout	No
`.ln-product-card--compact`	Compact card	No
`.ln-product-card--flat`	No background or border	No
`.ln-line-item`	Cart or order row	No
`.ln-line-item--compact`	Compact line item	No
`.ln-line-item--readonly`	Read-only line item (no remove button)	No
`.ln-order-summary`	Checkout totals panel	No
`.ln-order-summary--sticky`	Sticky positioning	No
`.ln-order-summary--compact`	Compact spacing	No