OBJECTS WITH PURPOSE

Oak serving tray

€56.00

★★★★☆ 4 out of 5

From breakfast to the last cup of the day. A simple oak tray with gently raised edges and a warm, natural grain.

In stock

Material
Oiled solid oak
Dimensions
36 × 24 × 3 cm
View bag
Care instructions

Wipe clean by hand. Do not soak or put in the dishwasher.

THE STILL APPROACH

Keep what matters.

We believe the things you use every day deserve a little more thought. Familiar materials, useful shapes, and details that make you want to keep them.

Honest materials

Natural textures and carefully chosen finishes.

A considered collection

Fewer objects, with more room for each one.

Made for everyday

Useful pieces that belong in your daily rituals.

Delivery and returns

This fictional collection illustrates a store with €8 delivery and returns within 30 days. No orders or payments are processed.

REVACSS / COMPLETE WEBSITES

A shop with room to breathe.

Explore a product catalogue, category collections, individual products and a sample bag. Reuse the same saved appearance settings and download complete starting HTML.

Make this shop yours.

Products, prices, stock and the two-item bag are fictional sample data. Category and product links open complete pages. A commerce backend supplies inventory, cart updates and checkout; this starter does not accept orders or payments.

View complete starting HTML
HTMLSelect text to copy
<!DOCTYPE html>
<html lang="en" data-theme="auto" data-palette="default" data-material="solid" data-shape="rounded" data-navbar-position="sticky" data-navbar-spacing="flush" data-navbar-width="full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Still · RevaCSS shop demo</title>
<script id="reva-settings-schema" type="application/json">{"kind":"demo","values":{"theme":["auto","light","dark"],"palette":["default","mono","custom"],"material":["solid","glass","veil","soft"],"shape":["square","subtle","rounded","pill","custom"],"button-material":["default","solid","glass","veil","soft","liquid"],"motion":["none","subtle","expressive"],"edge":["plain","gradient","shine","animated"],"density":["compact","comfortable","spacious","custom"],"depth":["flat","subtle","pronounced"],"fill":["gradient","solid"],"font":["manrope","system"],"type":["compact","standard","large"],"size":["small","medium","large"],"border":["subtle","defined","none"],"width":["narrow","standard","wide","full","custom"],"navbar":["standard","centered","floating","split"],"navbar-position":["static","sticky"],"navbar-spacing":["flush","spaced"],"navbar-width":["contained","full"],"contrast":["auto","more"],"tone":["default","neutral","cool","warm"],"gap":["none","small","medium","large"],"controls":["styled","minimal"]}}</script>
<script id="reva-palette-defaults" type="application/json">{"light":{"bg":"#FAFAFA","surface":"#FFFFFF","text":"#111111","surface-alt":"#EDEDED","primary":"#1F6E8C","on-primary":"#FFFFFF","line":"#D4D4D4","primary-end":"#195E78","link":"#1F6E8C","muted":"#4C4C4C","control-line":"#7C7C7C","secondary":"#4B5563","secondary-end":"#3D4652","on-secondary":"#FFFFFF","secondary-link":"#4B5563","success":"#256B4E","success-end":"#1D573F","on-success":"#FFFFFF","danger":"#A63D4F","danger-end":"#8C3041","on-danger":"#FFFFFF","danger-link":"#A63D4F","warning":"#E6BC63","warning-end":"#D5A94E","on-warning":"#111111"},"dark":{"bg":"#101010","surface":"#191919","text":"#F5F5F5","surface-alt":"#292929","primary":"#2E8A99","on-primary":"#111111","line":"#414141","primary-end":"#57ACB8","link":"#65BBC7","muted":"#BEBEBE","control-line":"#929292","secondary":"#BFC8CD","secondary-end":"#CDD5D9","on-secondary":"#111111","secondary-link":"#BFC8CD","success":"#78B99B","success-end":"#8EC9AD","on-success":"#111111","danger":"#D98B97","danger-end":"#E39EAA","on-danger":"#111111","danger-link":"#D98B97","warning":"#E6BC63","warning-end":"#F0CB7C","on-warning":"#111111"}}</script>
<script id="reva-palette-runtime" src="/custom-palette.js?v=4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc">
</script>
<script id="reva-radius-runtime" src="/custom-radius.js?v=4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc">
</script>
<script id="reva-density-runtime" src="/custom-density.js?v=4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc">
</script>
<script id="reva-width-runtime" src="/custom-width.js?v=4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc">
</script>
<script id="reva-settings-runtime" src="/settings.js?v=4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc">
</script>
<meta name="description" content="A fictional shop with considered objects, built with native HTML and RevaCSS.">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva-fonts.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.motion.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.selects.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.glass.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.veil.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.soft.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/reva/reva.button-materials.css">
<link rel="stylesheet" href="http://revacss.eristavi.org/demos/shop.css">
</head>
<body id="page-top" class="shop-site">
<a class="skip-link" href="#shop-title">Skip to content</a>
<header class="navbar-header container">
<nav class="top-menu" aria-label="Still shop navigation" style="--re-menu-anchor: --still-navigation">
<a class="menu-brand" href="http://revacss.eristavi.org/demos/shop/source.html">still.</a>
<ul class="menu-items menu-desktop">
<li>
<a href="http://revacss.eristavi.org/demos/shop/source.html" aria-current="page">Shop</a>
</li>
<li class="menu-dropdown" style="--re-menu-branch-anchor: --still-desktop-collection-anchor">
<button type="button" class="menu-toggle" popovertarget="still-desktop-collection">Collections</button>
<ul class="menu-panel" id="still-desktop-collection" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="still-desktop-collection" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source/category-lighting.html">Lighting</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source/category-furniture.html">Furniture</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source/category-accessories.html">Accessories</a>
</li>
</ul>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source.html#shop-story">Our story</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source/bag.html">Bag</a>
</li>
</ul>
<div class="menu-actions">
</div>
<button type="button" class="menu-toggle menu-collapse" popovertarget="still-mobile-menu" aria-label="Menu">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<ul class="menu-items menu-mobile" id="still-mobile-menu" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="still-mobile-menu" popovertargetaction="hide">Close menu</button>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source.html" aria-current="page">Shop</a>
</li>
<li class="menu-dropdown">
<button type="button" class="menu-toggle" popovertarget="still-mobile-collection">Collections</button>
<ul class="menu-panel" id="still-mobile-collection" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="still-mobile-collection" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source/category-lighting.html">Lighting</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source/category-furniture.html">Furniture</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source/category-accessories.html">Accessories</a>
</li>
</ul>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source.html#shop-story">Our story</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source/bag.html">Bag</a>
</li>
</ul>
</nav>
</header>
<main class="container" aria-label="Still shop">
<nav class="breadcrumbs" aria-label="Breadcrumb">
<ol>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source.html">Shop</a>
</li>
<li>
<a href="http://revacss.eristavi.org/demos/shop/source/category-accessories.html">Accessories</a>
</li>
<li>
<span aria-current="page">Oak serving tray</span>
</li>
</ol>
</nav>
<article class="shop-feature" aria-labelledby="shop-title">
<div class="shop-gallery">
<p id="gallery-oak-tray-help">
<small>Scroll, swipe or choose a view.</small>
</p>
<ul class="gallery" role="list" tabindex="0" aria-label="Oak serving tray product views" aria-describedby="gallery-oak-tray-help">
<li id="gallery-oak-tray-overview">
<figure>
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="200" cy="260" rx="136" ry="16" fill="#000" opacity=".07"/>
<path d="m63 142 216-40 58 98-216 47Z" fill="#a57e53"/>
<path d="m74 143 199-32 48 82-197 42Z" fill="#c69d6a"/>
<path d="m91 148 172-27 37 65-172 39Z" fill="#d8b682"/>
<path d="m130 151 114-18m-101 38 111-19m-100 39 111-20" stroke="#b58c5d" stroke-width="2" opacity=".5"/>
</svg>
<figcaption>Oak serving tray</figcaption>
</figure>
</li>
<li id="gallery-oak-tray-detail">
<figure>
<svg class="shop-art" viewBox="100 65 200 160" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="200" cy="260" rx="136" ry="16" fill="#000" opacity=".07"/>
<path d="m63 142 216-40 58 98-216 47Z" fill="#a57e53"/>
<path d="m74 143 199-32 48 82-197 42Z" fill="#c69d6a"/>
<path d="m91 148 172-27 37 65-172 39Z" fill="#d8b682"/>
<path d="m130 151 114-18m-101 38 111-19m-100 39 111-20" stroke="#b58c5d" stroke-width="2" opacity=".5"/>
</svg>
<figcaption>Oiled solid oak</figcaption>
</figure>
</li>
<li id="gallery-oak-tray-dimensions">
<figure>
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="200" cy="260" rx="136" ry="16" fill="#000" opacity=".07"/>
<path d="m63 142 216-40 58 98-216 47Z" fill="#a57e53"/>
<path d="m74 143 199-32 48 82-197 42Z" fill="#c69d6a"/>
<path d="m91 148 172-27 37 65-172 39Z" fill="#d8b682"/>
<path d="m130 151 114-18m-101 38 111-19m-100 39 111-20" stroke="#b58c5d" stroke-width="2" opacity=".5"/>
<g fill="none" stroke="var(--re-text)" stroke-width="1.5" opacity=".65">
<path d="M65 291h270m-264-5-6 5 6 5m258-10 6 5-6 5M355 50v217m-5-211 5-6 5 6m-10 205 5 6 5-6">
</path>
</g>
</svg>
<figcaption>36 × 24 × 3 cm</figcaption>
</figure>
</li>
</ul>
<nav aria-label="Oak serving tray view links" class="row">
<a href="#gallery-oak-tray-overview">Overview</a>
<a href="#gallery-oak-tray-detail">Detail</a>
<a href="#gallery-oak-tray-dimensions">Dimensions</a>
</nav>
</div>
<div>
<p class="shop-kicker">OBJECTS WITH PURPOSE</p>
<h1 id="shop-title">Oak serving tray</h1>
<p class="shop-price">€56.00</p>
<p>
<span class="rating" role="img" aria-label="4 out of 5 stars">★★★★☆</span>
<small>4 out of 5</small>
</p>
<p>From breakfast to the last cup of the day. A simple oak tray with gently raised edges and a warm, natural grain.</p>
<p>
<span class="badge" data-variant="success">In stock</span>
</p>
<dl>
<dt>Material</dt>
<dd>Oiled solid oak</dd>
<dt>Dimensions</dt>
<dd>36 × 24 × 3 cm</dd>
</dl>
<a class="button" href="http://revacss.eristavi.org/demos/shop/source/bag.html">View bag <span aria-hidden="true">↗</span>
</a>
<div class="accordion">
<details>
<summary>Care instructions</summary>
<p>Wipe clean by hand. Do not soak or put in the dishwasher.</p>
</details>
</div>
</div>
</article>
<section aria-labelledby="shop-related">
<h2 id="shop-related">Good things, together.</h2>
</section>
<section class="shop-products" id="shop-products" aria-label="Related products">
<article class="card">
<a href="http://revacss.eristavi.org/demos/shop/source/product-arc-lamp.html" aria-label="View Arc table lamp">
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="200" cy="271" rx="100" ry="13" fill="#000" opacity=".07"/>
<path d="M190 126v130" stroke="#756556" stroke-width="13"/>
<ellipse cx="190" cy="259" rx="60" ry="13" fill="#756556"/>
<path d="M113 137q15-91 77-91t77 91Z" fill="#ccb89b"/>
<path d="M122 137h137" stroke="#f1e6d3" stroke-width="7"/>
</svg>
</a>
<div class="row justify-between">
<p class="shop-kicker">Lighting</p>
<span class="badge">Bestseller</span>
</div>
<h2>
<a href="http://revacss.eristavi.org/demos/shop/source/product-arc-lamp.html">Arc table lamp</a>
</h2>
<p>€89.00</p>
</article>
<article class="card">
<a href="http://revacss.eristavi.org/demos/shop/source/product-fold-chair.html" aria-label="View Fold lounge chair">
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="204" cy="273" rx="127" ry="14" fill="#000" opacity=".07"/>
<path d="m102 259 25-124m151 124-17-99M124 182l-19 81m155-94 32 94" stroke="#9d7957" stroke-width="13" stroke-linecap="round"/>
<path d="m123 161 32-97 138 30-29 97Z" fill="#c4b6a0"/>
<path d="m112 181 37-33 134 25-26 38Z" fill="#d9cdb9"/>
<path d="m118 182 142 24" stroke="#9d7957" stroke-width="10"/>
</svg>
</a>
<div class="row justify-between">
<p class="shop-kicker">Furniture</p>
<span class="badge">New arrival</span>
</div>
<h2>
<a href="http://revacss.eristavi.org/demos/shop/source/product-fold-chair.html">Fold lounge chair</a>
</h2>
<p>€240.00</p>
</article>
<article class="card">
<a href="http://revacss.eristavi.org/demos/shop/source/product-everyday-cup.html" aria-label="View Everyday cup">
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="195" cy="266" rx="91" ry="13" fill="#000" opacity=".07"/>
<path d="M251 119c91-26 85 111-4 92" fill="none" stroke="#b18b70" stroke-width="19"/>
<path d="M118 109h143l-9 125q-62 44-125 0Z" fill="#ceb29a"/>
<ellipse cx="190" cy="109" rx="72" ry="17" fill="#a88268"/>
<ellipse cx="190" cy="111" rx="58" ry="10" fill="#745b49"/>
<path d="m136 135 5 83" stroke="#e6d0b8" stroke-width="8" stroke-linecap="round"/>
</svg>
</a>
<div class="row justify-between">
<p class="shop-kicker">Accessories</p>
</div>
<h2>
<a href="http://revacss.eristavi.org/demos/shop/source/product-everyday-cup.html">Everyday cup</a>
</h2>
<p>€18.00</p>
</article>
</section>
<section class="shop-story" id="shop-story" aria-labelledby="shop-story-title">
<p class="shop-kicker">THE STILL APPROACH</p>
<h2 id="shop-story-title">Keep what matters.</h2>
<p>We believe the things you use every day deserve a little more thought. Familiar materials, useful shapes, and details that make you want to keep them.</p>
<div class="grid">
<article>
<h3>Honest materials</h3>
<p>Natural textures and carefully chosen finishes.</p>
</article>
<article>
<h3>A considered collection</h3>
<p>Fewer objects, with more room for each one.</p>
</article>
<article>
<h3>Made for everyday</h3>
<p>Useful pieces that belong in your daily rituals.</p>
</article>
</div>
</section>
<section aria-label="Shop information">
<div class="accordion">
<details>
<summary>Delivery and returns</summary>
<p>This fictional collection illustrates a store with €8 delivery and returns within 30 days. No orders or payments are processed.</p>
</details>
</div>
</section>
</main>
<footer class="container row justify-between">
<strong>still.</strong>
<small>Objects for everyday · Fictional shop demonstration</small>
<a href="http://revacss.eristavi.org/demos/shop/source.html">Back to the collection</a>
<a class="scroll-top" href="#page-top">
<span aria-hidden="true">↑</span> Back to top</a>
</footer>
</body>
</html>

Downloads include the current appearance settings with the optional helper enabled. Download the linked CSS files and change their paths for your own hosting. Standalone product and category links lead to the hosted HTML examples.

shop.css supplies page composition. Cards, badges, navigation, breadcrumbs, buttons and disclosures use existing RevaCSS components. The product gallery uses a native scroll-snap list and fragment links for overview, detail and dimensions views. It inherits the motion setting and never advances automatically. Illustrations are inline SVG; no new core component or data attribute is needed.