Field Notes
Price $18
Patterns
Ecommerce Pattern
semantic HTML상품 탐색과 주문 입력을 조합한 상거래 화면입니다.
Live example
Desk Tray
Price $42
<section class="x-product-grid" data-standard-component="ecommerce-pattern" aria-label="Products"><article class="x-product-card"><div class="media" aria-hidden="true"></div><h3>Field Notes</h3><p><span class="x-sr-only">Price </span>$18</p><button type="button" data-example-cart="Field Notes">Add Field Notes to cart</button></article><article class="x-product-card"><div class="media" aria-hidden="true"></div><h3>Desk Tray</h3><p><span class="x-sr-only">Price </span>$42</p><button type="button" data-example-cart="Desk Tray">Add Desk Tray to cart</button></article><output data-example-output aria-live="polite"></output></section>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.4 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
상품 이름, 가격, 작업 버튼의 관계를 article 단위로 유지하고 이미지 대체 텍스트를 제공합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->