Products
Product layouts blend imagery, pricing, and calls-to-action so people can recognize what is being offered and what to do next. Thoughtful typography and link styling keep titles scannable, while button treatments make primary actions obvious even in dense grids.
Use the patterns below as a toolkit: cards for quick browsing, lists for content-heavy catalogs, and detail views for deep decisions. Keep labels, tags, and helper text intentional so every product stays accessible and consistent with the wider documentation style.
Card
Product cards spotlight a single item with a ratio-locked image, a concise title, and a clear price/action row. Tags like “Recommended” or “New” help readers triage options quickly, while compact buttons keep the card chrome aligned with the button system.
Card grids repeat the same structure in equal-width columns so browsing feels predictable. Keep imagery consistent (crop and ratio), surface price and badges in the footer, and reserve the primary action for the most common next step (usually add-to-cart or open).
For longer titles, lean on the existing typography scale to avoid overflow; let the grid wrap naturally on smaller screens and maintain comfortable gutters so focus rings and hover states stay visible.
-
,_1861.jpg)
-
-
New
-
Usability checklist: provide meaningful alt text for images, keep the entire title as a link target, and ensure buttons declare their type (button vs. submit). Maintain focus outlines on cards, and avoid making the whole card a link when it already contains interactive controls.
<div class="product card bordered">
<span class="tag sticky">...</span>
<div class="product-image">
<a href="...">
<img src="..." alt="...">
</a>
</div>
<a href="..." class="product-title">...</a>
<footer class="product-controls">
<button>...</button>
<div class="spacer"></div>
<span class="price tag">...</span>
</footer>
</div>
<ul class="products cards">
<li class="product card">
<div class="product-image">
<a href="...">
<img src="..." alt="...">
</a>
</div>
<a href="..." class="product-title">...</a>
<footer class="product-controls">
<button>...</button>
<div class="spacer"></div>
<span class="price tag">...</span>
</footer>
</li>
<li class="product card">
<span class="tag sticky">...</span>
<div class="product-image">
<a href="...">
<img src="..." alt="...">
</a>
</div>
<a href="..." class="product-title">...</a>
<footer class="product-controls">
<button>...</button>
<div class="spacer"></div>
<span class="price tag">...</span>
</footer>
</li>
<li class="product card">
<div class="product-image">
<a href="...">
<img src="..." alt="...">
</a>
</div>
<a href="..." class="product-title">...</a>
<footer class="product-controls">
<button>...</button>
<div class="spacer"></div>
<span class="price tag">...</span>
</footer>
</li>
</ul>List
Product lists prioritize reading depth over grid density. Pair the thumbnail with rich metadata (author, publisher, ISBN) and keep prices and actions in a right-aligned controls column. Use links to thread related entities together so readers can jump to authors or series without losing their place.
-
New
€12.95
Add to wishlist -
$112.50
Add to wishlist -
₹99.95
Add to wishlist -
-
¥4800.00
Add to wishlist
Keep it scannable: preserve a predictable heading hierarchy, avoid overlong link labels, and keep action buttons aligned for quick comparisons. Ensure keyboard users can tab through image, title, and controls in order, and keep availability tags readable against varied backgrounds.
<ul class="products list">
<li class="product">
<div class="product-image">...</div>
<div class="product-metadata">
<a href="..." title="..." class="product-title">...</a>
...
</div>
<div class="product-controls">...</div>
</li>
<li class="product">
<div class="product-image">...</div>
<div class="product-metadata">
<a href="..." title="..." class="product-title">...</a>
...
</div>
<div class="product-controls">...</div>
</li>
<li class="product">
<div class="product-image">...</div>
<div class="product-metadata">
<a href="..." title="..." class="product-title">...</a>
...
</div>
<div class="product-controls">...</div>
</li>
</ul>Detail
Product detail views combine immersive media with structured facts so readers can decide confidently. Lead with a clear title and contributor list, provide a gallery with keyboard-friendly controls, and keep price and cart actions close to the top to shorten the purchase path.
Use definition lists for specs, follow the typography system for long descriptions, and surface availability or pre-release states with tags that map to the color language defined in the button and link components.
Odio fugit atque soluta repellendus ipsam repellat a illum facere fuga! Aspernatur nesciunt, excepturi commodi
Respect attention: keep galleries navigable via keyboard and screen readers, ensure price changes or state updates are announced politely, and avoid trapping focus inside dropdowns or carousels. Keep “Add to wishlist” as a link to mirror its navigation role, and provide clear error or stock messaging without removing previously entered quantities.
<div class="product detail">
<h3 class="product-title">...</h3>
<p class="product-author">...</p>
<div class="product-image">
<div class="gallery slideshow with-thumbnails">...</div>
</div>
<div class="product-metadata">
<h3 class="product-price">
<span class="price">...</span>
</h3>
<div class="product-controls">
<button>...</button>
<a href="...">...</a>
</div>
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
<p>...</p>
...
</div>
</div>