REVACSS / COMPLETE WEBSITES
Explore a product catalogue, category collections, individual products and a sample bag. Reuse the same saved appearance settings and download complete starting HTML.
Every setting updates the website immediately. Your choices are remembered across demo pages when browser storage is available. You can also close with Escape or a click outside.
<html lang="en"
data-theme="auto"
data-theme="light"
data-theme="dark"
data-palette="default"
data-palette="mono"
data-palette="sand"
data-palette="ocean"
data-palette="cobalt"
data-palette="citrus"
data-palette="violet"
data-palette="forest"
data-material="solid"
data-material="glass"
data-material="veil"
data-material="soft"
data-shape="square"
data-shape="subtle"
data-shape="rounded"
data-shape="pill"
data-motion="none"
data-motion="subtle"
data-motion="expressive"
data-edge="plain"
data-edge="gradient"
data-edge="shine"
data-edge="animated"
data-density="compact"
data-density="comfortable"
data-density="spacious"
data-depth="flat"
data-depth="subtle"
data-depth="pronounced"
data-fill="gradient"
data-fill="solid"
data-type="compact"
data-type="standard"
data-type="large"
data-size="small"
data-size="medium"
data-size="large"
data-border="subtle"
data-border="defined"
data-border="none"
data-width="narrow"
data-width="standard"
data-width="wide"
data-contrast="auto"
data-contrast="more">Downloads include your current settings with the optional helper enabled. Without JavaScript, the preview still works; copy the selected attributes into the starting HTML. Reset clears saved demo choices and restores this page’s defaults.
OBJECTS WITH PURPOSE
€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
Wipe clean by hand. Do not soak or put in the dishwasher.
Lighting
Bestseller€89.00
Furniture
New arrival€240.00
Accessories
€18.00
THE STILL APPROACH
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.
Natural textures and carefully chosen finishes.
Fewer objects, with more room for each one.
Useful pieces that belong in your daily rituals.
This fictional collection illustrates a store with €8 delivery and returns within 30 days. No orders or payments are processed.
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.
<!DOCTYPE html>
<html lang="en" data-theme="auto" data-palette="default" data-material="solid" data-shape="rounded">
<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","sand","ocean","cobalt","citrus","violet","forest"],"material":["solid","glass","veil","soft"],"shape":["square","subtle","rounded","pill"],"motion":["none","subtle","expressive"],"edge":["plain","gradient","shine","animated"],"density":["compact","comfortable","spacious"],"depth":["flat","subtle","pronounced"],"fill":["gradient","solid"],"type":["compact","standard","large"],"size":["small","medium","large"],"border":["subtle","defined","none"],"width":["narrow","standard","wide"],"navbar":["standard","centered","floating","split"],"contrast":["auto","more"]}}</script>
<script id="reva-settings-runtime" src="/RevaCSS/settings.js?v=f9ab880ccb15b9eb488ca65ef2ad687a4870aa28">
</script>
<meta name="description" content="A fictional shop with considered objects, built with native HTML and RevaCSS.">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva-fonts.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.motion.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.selects.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.glass.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.veil.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.soft.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/demos/shop.css">
</head>
<body class="shop-site">
<a class="skip-link" href="#shop-title">Skip to content</a>
<header class="container">
<nav class="top-menu" aria-label="Still shop navigation" style="--re-menu-anchor: --still-navigation">
<a class="menu-brand" href="https://eristavi.github.io/RevaCSS/demos/shop/source.html">still.</a>
<ul class="menu-items menu-desktop">
<li>
<a href="https://eristavi.github.io/RevaCSS/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="https://eristavi.github.io/RevaCSS/demos/shop/source/category-lighting.html">Lighting</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-furniture.html">Furniture</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-accessories.html">Accessories</a>
</li>
</ul>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html#shop-story">Our story</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/bag.html">Bag</a>
</li>
</ul>
<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="https://eristavi.github.io/RevaCSS/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="https://eristavi.github.io/RevaCSS/demos/shop/source/category-lighting.html">Lighting</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-furniture.html">Furniture</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-accessories.html">Accessories</a>
</li>
</ul>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html#shop-story">Our story</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/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="https://eristavi.github.io/RevaCSS/demos/shop/source.html">Shop</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/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="tabs shop-gallery" role="group" aria-label="Oak serving tray product views">
<label>
<input type="radio" name="gallery-oak-tray" value="overview" checked aria-controls="gallery-oak-tray-overview">
<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>
<span>Overview</span>
</label>
<figure class="tab-panel" id="gallery-oak-tray-overview">
<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>
<label>
<input type="radio" name="gallery-oak-tray" value="detail" aria-controls="gallery-oak-tray-detail">
<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>
<span>Detail</span>
</label>
<figure class="tab-panel" id="gallery-oak-tray-detail">
<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>
<label>
<input type="radio" name="gallery-oak-tray" value="dimensions" aria-controls="gallery-oak-tray-dimensions">
<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>
<span>Dimensions</span>
</label>
<figure class="tab-panel" id="gallery-oak-tray-dimensions">
<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>
</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="https://eristavi.github.io/RevaCSS/demos/shop/source/bag.html">View bag <span aria-hidden="true">↗</span>
</a>
<details>
<summary>Care instructions</summary>
<p>Wipe clean by hand. Do not soak or put in the dishwasher.</p>
</details>
</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="https://eristavi.github.io/RevaCSS/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="https://eristavi.github.io/RevaCSS/demos/shop/source/product-arc-lamp.html">Arc table lamp</a>
</h2>
<p>€89.00</p>
</article>
<article class="card">
<a href="https://eristavi.github.io/RevaCSS/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="https://eristavi.github.io/RevaCSS/demos/shop/source/product-fold-chair.html">Fold lounge chair</a>
</h2>
<p>€240.00</p>
</article>
<article class="card">
<a href="https://eristavi.github.io/RevaCSS/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="https://eristavi.github.io/RevaCSS/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">
<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>
</section>
</main>
<footer class="container row justify-between">
<strong>still.</strong>
<small>Objects for everyday · Fictional shop demonstration</small>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html">Back to the collection</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 reuses native-radio tabs with overview, detail and dimensions views. Illustrations are inline SVG; no new core component or data attribute is needed.