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
€18.00
4 out of 5
For slow mornings and one more conversation. A comfortable handle and a softly textured glaze make every cup a small ritual.
In stock
Dishwasher safe. Small variations in the glaze are part of its character.
Lighting
Bestseller€89.00
Furniture
New arrival€240.00
Accessories
€24.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">Everyday cup</span>
</li>
</ol>
</nav>
<article class="shop-feature" aria-labelledby="shop-title">
<div class="tabs shop-gallery" role="group" aria-label="Everyday cup product views">
<label>
<input type="radio" name="gallery-everyday-cup" value="overview" checked aria-controls="gallery-everyday-cup-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="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>
<span>Overview</span>
</label>
<figure class="tab-panel" id="gallery-everyday-cup-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="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>
<figcaption>Everyday cup</figcaption>
</figure>
<label>
<input type="radio" name="gallery-everyday-cup" value="detail" aria-controls="gallery-everyday-cup-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="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>
<span>Detail</span>
</label>
<figure class="tab-panel" id="gallery-everyday-cup-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="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>
<figcaption>Glazed stoneware</figcaption>
</figure>
<label>
<input type="radio" name="gallery-everyday-cup" value="dimensions" aria-controls="gallery-everyday-cup-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="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"/>
<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-everyday-cup-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="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"/>
<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>9 × 8 cm · 280 ml</figcaption>
</figure>
</div>
<div>
<p class="shop-kicker">OBJECTS WITH PURPOSE</p>
<h1 id="shop-title">Everyday cup</h1>
<p class="shop-price">€18.00</p>
<p>
<span class="rating" role="img" aria-label="4 out of 5 stars">★★★★☆</span>
<small>4 out of 5</small>
</p>
<p>For slow mornings and one more conversation. A comfortable handle and a softly textured glaze make every cup a small ritual.</p>
<p>
<span class="badge" data-variant="success">In stock</span>
</p>
<dl>
<dt>Material</dt>
<dd>Glazed stoneware</dd>
<dt>Dimensions</dt>
<dd>9 × 8 cm · 280 ml</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>Dishwasher safe. Small variations in the glaze are part of its character.</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-studio-notebook.html" aria-label="View Studio notebook">
<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="205" cy="270" rx="112" ry="12" fill="#000" opacity=".07"/>
<path d="m117 63 158 15 16 177-168-17Z" fill="#7b8b7c"/>
<path d="m123 238 168 17-3 9-168-17Z" fill="#e8e0cb"/>
<path d="m129 74 12 149" stroke="#647467" stroke-width="4"/>
<path d="m160 113 75 7m-72 9 57 6" stroke="#d2d5c6" stroke-width="2"/>
</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-studio-notebook.html">Studio notebook</a>
</h2>
<p>€24.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.