One page site
A whole product page in one HTML file, with most of Iris CSS in it and no JavaScript.
Acme Notes is a made up note taking app. Its page uses semantic HTML first and a class only where it wants a variant. Resize the window or switch your system to dark mode, it follows without a line of extra CSS.
Preview
Code
Save it as an .html file and open it in a browser. It links
Iris CSS from the CDN, so there is nothing else to install.
Show the full page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>Acme Notes</title>
<meta name="description" content="Notes that sync everywhere and stay private.">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iriscss@1/dist/iris.min.css">
</head>
<body>
<a class="skip-to-content" href="#content">Skip to content</a>
<header class="navbar sticky">
<nav class="container" aria-label="Main">
<ul>
<li><a href="#"><span class="brand">Acme <span class="brand-accent">Notes</span></span></a></li>
</ul>
<button class="nav-toggle" popovertarget="menu" aria-label="Menu"></button>
<ul id="menu" popover>
<li><a href="#features" aria-current="page">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
<li>
<button popovertarget="resources">Resources</button>
<ul id="resources" popover class="dropdown">
<li><a href="#">Guides</a></li>
<li><a href="#">Changelog</a></li>
<li><a href="#">Status</a></li>
</ul>
</li>
<li><button class="primary" commandfor="signup" command="show-modal">Sign up</button></li>
</ul>
</nav>
</header>
<main id="content">
<section class="hero">
<p><span class="badge primary">New</span> Shared notebooks are here</p>
<h1>Notes that follow you everywhere</h1>
<p>Write on your phone, finish on your laptop. Acme Notes syncs in the background and keeps every note private.</p>
<div class="cluster justify-center">
<button class="primary large" commandfor="signup" command="show-modal">Start for free</button>
<a href="#pricing" role="button" class="outlined large">See pricing</a>
</div>
</section>
<div class="container">
<div class="alert info" role="status">
Acme Notes 1.4 adds offline search. Press <kbd>Ctrl</kbd> + <kbd>K</kbd> in the app to try it.
</div>
<section id="features">
<h2>Everything a notebook needs</h2>
<p>No setup and no learning curve. Open it and start typing.</p>
<div class="grid">
<article class="card">
<span class="icon color-amber-500"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M9 0L2 9h5l-1 7 7-9H8z"/></svg></span>
<h3>Fast</h3>
<p>Notes open instantly, even with ten thousand of them.</p>
</article>
<article class="card">
<span class="icon color-sky-500"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 13a4 4 0 0 1-.5-8A5 5 0 0 1 13 6a3.5 3.5 0 0 1 0 7z"/></svg></span>
<h3>Synced</h3>
<p>Every change reaches your other devices in seconds.</p>
</article>
<article class="card">
<span class="icon color-emerald-500"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 7V5a4 4 0 0 1 8 0v2h1v9H3V7zm2 0h4V5a2 2 0 0 0-4 0z"/></svg></span>
<h3>Private</h3>
<p>Notes are encrypted on your device before they leave it.</p>
</article>
</div>
</section>
<section>
<h2>How it works</h2>
<ol class="steps">
<li>Create an account</li>
<li aria-current="step">Install the apps</li>
<li>Write your first note</li>
</ol>
<div class="switcher">
<div class="box">
<h3>Storage</h3>
<p>3.2 GB of 10 GB used</p>
<meter value="3.2" max="10" aria-label="Storage used">3.2 GB</meter>
</div>
<div class="box">
<h3>Import</h3>
<p>Importing your old notes</p>
<progress value="70" max="100" aria-label="Import progress">70%</progress>
</div>
</div>
</section>
<section id="pricing">
<h2>Pricing</h2>
<div class="tabs">
<details name="billing" open>
<summary>Monthly</summary>
<div class="grid">
<article class="card">
<header><h3>Free</h3></header>
<p><strong>$0</strong> a month</p>
<ul>
<li>Two devices</li>
<li>1 GB of storage</li>
</ul>
<footer><button class="outlined" commandfor="signup" command="show-modal">Start free</button></footer>
</article>
<article class="card">
<header><h3>Pro <span class="badge success">Popular</span></h3></header>
<p><strong>$6</strong> a month</p>
<ul>
<li>Every device</li>
<li>10 GB of storage</li>
<li>Shared notebooks</li>
</ul>
<footer><button class="primary" commandfor="signup" command="show-modal">Go Pro</button></footer>
</article>
</div>
</details>
<details name="billing">
<summary>Yearly</summary>
<p>Pay yearly and get two months free: Pro is <strong>$60</strong> a year.</p>
</details>
</div>
<div class="table-responsive" tabindex="0" aria-label="Plan comparison">
<table class="striped">
<thead>
<tr><th scope="col">Feature</th><th scope="col">Free</th><th scope="col">Pro</th></tr>
</thead>
<tbody>
<tr><th scope="row">Devices</th><td>2</td><td>Unlimited</td></tr>
<tr><th scope="row">Storage</th><td>1 GB</td><td>10 GB</td></tr>
<tr><th scope="row">Shared notebooks</th><td>No</td><td>Yes</td></tr>
<tr><th scope="row">Version history</th><td>7 days</td><td>1 year</td></tr>
</tbody>
</table>
</div>
</section>
<section>
<h2>Loved by writers</h2>
<blockquote>
<p>I moved ten years of notes over in an afternoon and never looked back.</p>
<footer>Ada, novelist</footer>
</blockquote>
<div class="avatar-group">
<span class="avatar primary" role="img" aria-label="Ada">AD</span>
<span class="avatar success" role="img" aria-label="Grace">GR</span>
<span class="avatar info" role="img" aria-label="Alan">AL</span>
<span class="avatar contrast" role="img" aria-label="Linus">LI</span>
</div>
<p><small>Join 40,000 people who write with Acme Notes.</small></p>
</section>
<section id="faq">
<h2>Questions</h2>
<details name="faq" open>
<summary>Can I use it offline?</summary>
<p>Yes. Notes are stored on your device and sync when you are back online.</p>
</details>
<details name="faq">
<summary>Can I export my notes?</summary>
<p>Any time, as Markdown or <abbr title="HyperText Markup Language">HTML</abbr>.</p>
</details>
<details name="faq">
<summary>Is there a team plan?</summary>
<p>Not yet. <a href="#newsletter">Join the newsletter</a> to hear when it ships.</p>
</details>
</section>
<section id="newsletter">
<h2>Stay in the loop</h2>
<p>One email a month about new features. No spam.</p>
<form class="group" role="group" aria-label="Newsletter">
<input type="email" name="email" placeholder="Email" aria-label="Email" required>
<button class="primary" type="submit" data-tooltip="One email a month">Subscribe</button>
</form>
<p>
<button popovertarget="invite" popovertargetaction="show" class="secondary outlined">Copy invite link</button>
</p>
</section>
</div>
</main>
<dialog id="signup" closedby="any" aria-labelledby="signup-title">
<header>
<button class="close" commandfor="signup" command="close" aria-label="Close"></button>
<h2 id="signup-title">Create your account</h2>
</header>
<form method="dialog">
<label>Name <input type="text" name="name" autocomplete="name"></label>
<label>Email <input type="email" name="email" autocomplete="email" required></label>
<label>Plan
<select name="plan">
<option>Free</option>
<option selected>Pro</option>
</select>
</label>
<fieldset>
<legend>Use it on</legend>
<label><input type="checkbox" name="device" value="phone" checked> Phone</label>
<label><input type="checkbox" name="device" value="computer" checked> Computer</label>
</fieldset>
<label><input type="checkbox" role="switch" name="news"> Send me product news</label>
<p class="divider">or</p>
<button type="button" class="contrast outlined">Continue with a passkey</button>
<footer>
<button class="secondary" value="cancel" formnovalidate>Cancel</button>
<button class="primary" value="create">Create account</button>
</footer>
</form>
</dialog>
<div id="invite" class="toast success" popover="manual" role="status">
<p>Invite link copied.</p>
<button class="close" popovertarget="invite" popovertargetaction="hide" aria-label="Close"></button>
</div>
<footer class="footer">
<div class="container">
<div>
<div>
<a href="#"><span class="brand">Acme <span class="brand-accent">Notes</span></span></a>
<p>Notes that follow you everywhere.</p>
</div>
<nav aria-label="Product">
<h2>Product</h2>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
<nav aria-label="Company">
<h2>Company</h2>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div>
<p>© 2026 Acme Notes. A made up product, built with Iris CSS.</p>
<p><a href="#">Privacy</a> and <a href="#">terms</a></p>
</div>
</div>
</footer>
</body>
</html>
What it uses
- Navbar that sticks to the top and collapses into a menu, with a dropdown
- Hero, container and grid, and the cluster and switcher primitives
- Cards, boxes, icons and badges
- Alert, steps and a progress bar and meter
- Tabs and a striped table for the pricing
- A blockquote and an avatar group
- Accordion for the questions
- Input group with a tooltip, and a toast
- Modal with form controls, checkboxes and a switch, and a divider
- Footer with link columns