REVACSS / COMPLETE WEBSITES

One website. Your defaults.

Forma is a fictional workspace product built from existing RevaCSS components. Explore a complete marketing website, change its appearance and take the HTML into your own project.

A little less busy A little more together

Good work starts
with a clear space.

Bring your projects, plans and people into one thoughtful workspace. Make room for what you do best.

Find your space Take a look around

Designed for independent minds and teams that care.

Spring collectionIn progress

THIS WEEK

A fresh perspective.

Three small steps toward the next big idea.

  • Gather inspiration
  • Shape the direction
  • Share the first draft
Alex’s workspaceFriday review
A sample project, with room for the whole team.

LESS FRICTION. MORE FLOW.

Everything has its place.

Simple tools for the everyday work that moves an idea forward.

A home for every project

Keep the brief, decisions and next steps together. Less searching, more making.

Plans with room to breathe

See what matters this week, then give your team space to do their best work.

Everyone on the same page

Make ownership clear and conversations easy to follow, wherever you work.

YOUR WORK. YOUR RHYTHM.

From a first thought to a shared plan.

Keep the context close, and the next step clear.

Explore the workspace

A week with a little more focus.

Turn a loose brief into a handful of useful milestones. See the next step without losing the bigger picture.

Tell us about your team

Website refresh

  1. Agree the direction — Monday
  2. Review the first concept — Wednesday
  3. Share the final story — Friday

Give your ideas somewhere to grow.

Capture a thought, connect it to a project and leave a useful trail for the person who picks it up next.

Creative brief

Purpose
A welcoming first impression
Direction
Warm, clear, considered
Next step
Choose the opening story

Clear ownership. Open conversation.

A shared space for decisions, feedback and thoughtful handovers. Everyone knows where to begin.

The project team

  • Alex — creative direction
  • Sam — content and story
  • Jamie — project planning

MAKE ROOM TO GROW

A space that fits your work.

Illustrative monthly plans. Choose one to preview the next step.

Solo

A calm place for independent work.

€12 / month

  • One personal workspace
  • Project planning
  • Notes and file links

Solo: a place to start.

This is a demonstration plan; no purchase or signup takes place.

Close this preview, then use the contact form to explore the form controls.

Studio

For teams

A shared rhythm for growing teams.

€29 / month

  • Shared team workspace
  • Everything in Solo
  • Project roles and reviews

Studio: a place to start.

This is a demonstration plan; no purchase or signup takes place.

Close this preview, then use the contact form to explore the form controls.

Collective

Space for several teams to move together.

€59 / month

  • Multiple workspaces
  • Everything in Studio
  • Shared project library

Collective: a place to start.

This is a demonstration plan; no purchase or signup takes place.

Close this preview, then use the contact form to explore the form controls.

A FEW GOOD QUESTIONS

Before you make yourself at home.

Who is Forma for?

Forma is a fictional workspace product used to demonstrate a complete RevaCSS marketing website. Its projects, people and prices are sample content.

Can I explore the workspace?

Yes. The Plan, Create and Together views above give you three perspectives on the same project. Select a view to explore it.

Can I change the look of this website?

Use the Customize this demo panel above the website. Choose light or dark, a palette, solid or glass material, and a shape.

Will this demo create an account or collect my details?

No. Plan buttons open local previews. The contact form demonstrates native validation without sending or storing your entries.

START A CONVERSATION

What are you
making room for?

A new project, a growing team, or simply a calmer way to work. Tell us what’s on your mind.

A thoughtful next step starts here.

Let’s find your space.

Preview form: nothing is sent or saved. Try a sample name and email.

Ready for the next step.

Your browser validated the preview form. No entries were submitted or saved.

Back to the form

Make it yours.

The HTML below is a complete standalone website for this page’s starting configuration, including the shared navigation. It links to the hosted RevaCSS files and the demo’s composition CSS. Download those assets and update their paths for a self-hosted project.

View complete base HTML
HTMLSelect text to copy
<!DOCTYPE html>
<html lang="en" class="forma-site" data-theme="light" data-palette="ocean" data-material="veil" data-shape="rounded">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Forma: a fictional workspace product demonstrating a complete RevaCSS marketing website.">
<title>Forma · RevaCSS marketing 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>
<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/marketing.css">
</head>
<body id="demo-site">
<a class="skip-link" href="#forma-title">Skip to content</a>
<main>
<header class="container forma-header">
<nav class="top-menu" aria-label="Forma website" style="--re-menu-anchor: --forma-navigation">
<a class="menu-brand" href="#demo-site">forma.</a>
<ul class="menu-items menu-desktop">
<li>
<a href="#features">Features</a>
</li>
<li class="menu-dropdown" style="--re-menu-branch-anchor: --forma-desktop-product-anchor">
<button type="button" class="menu-toggle" popovertarget="forma-desktop-product">Product</button>
<ul class="menu-panel" id="forma-desktop-product" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="forma-desktop-product" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="#overview">Workspace overview</a>
</li>
<li class="menu-dropdown">
<button type="button" class="menu-toggle" popovertarget="forma-desktop-product-ways">Ways to work</button>
<ul class="menu-panel" id="forma-desktop-product-ways" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="forma-desktop-product-ways" popovertargetaction="hide">Back to Product</button>
</li>
<li>
<a href="#overview">Plan a project</a>
</li>
<li>
<a href="#contact">Bring your team</a>
</li>
</ul>
</li>
<li>
<a href="#faq">Questions &amp; answers</a>
</li>
</ul>
</li>
<li>
<a href="#pricing">Pricing</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<button type="button" class="menu-toggle menu-collapse" popovertarget="forma-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="forma-mobile-menu" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="forma-mobile-menu" popovertargetaction="hide">Close menu</button>
</li>
<li>
<a href="#features">Features</a>
</li>
<li class="menu-dropdown">
<button type="button" class="menu-toggle" popovertarget="forma-mobile-product">Product</button>
<ul class="menu-panel" id="forma-mobile-product" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="forma-mobile-product" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="#overview">Workspace overview</a>
</li>
<li class="menu-dropdown">
<button type="button" class="menu-toggle" popovertarget="forma-mobile-product-ways">Ways to work</button>
<ul class="menu-panel" id="forma-mobile-product-ways" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="forma-mobile-product-ways" popovertargetaction="hide">Back to Product</button>
</li>
<li>
<a href="#overview">Plan a project</a>
</li>
<li>
<a href="#contact">Bring your team</a>
</li>
</ul>
</li>
<li>
<a href="#faq">Questions &amp; answers</a>
</li>
</ul>
</li>
<li>
<a href="#pricing">Pricing</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<div class="menu-actions">
<a class="button" href="#contact">Let’s talk <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 12h16m-7-7 7 7-7 7"/>
</svg>
</a>
</div>
</nav>
</header>
<div class="container">
<section class="forma-hero" aria-labelledby="forma-title">
<div class="stack">
<p class="forma-eyebrow">
<span class="badge">A little less busy</span> A little more together</p>
<h1 id="forma-title">Good work starts<br>with a clear space.</h1>
<p class="forma-lead">Bring your projects, plans and people into one thoughtful workspace. Make room for what you do best.</p>
<div class="row">
<a class="button" href="#pricing">Find your space <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 12h16m-7-7 7 7-7 7"/>
</svg>
</a>
<a class="button outline" href="#overview">Take a look around</a>
</div>
<p class="forma-fine">Designed for independent minds and teams that care.</p>
</div>
<figure class="forma-workspace">
<article class="card stack">
<header class="row justify-between">
<span>
<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="M3 7V5a2 2 0 0 1 2-2h5l3 4h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>
</svg> Spring collection</span>
<span class="badge">In progress</span>
</header>
<div>
<p class="forma-eyebrow">THIS WEEK</p>
<h2>A fresh perspective.</h2>
<p>Three small steps toward the next big idea.</p>
</div>
<ul class="list-group" role="list">
<li>
<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">
<circle cx="12" cy="12" r="9"/>
<path d="m7 12 3 3 7-7"/>
</svg> Gather inspiration</li>
<li>
<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">
<circle cx="12" cy="12" r="9"/>
<path d="m7 12 3 3 7-7"/>
</svg> Shape the direction</li>
<li>
<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">
<circle cx="12" cy="12" r="9"/>
<path d="M12 7v5l4 2"/>
</svg> Share the first draft</li>
</ul>
<footer class="row justify-between">
<span class="row">
<span class="avatar" aria-hidden="true">AL</span> Alex’s workspace</span>
<span>Friday review</span>
</footer>
</article>
<figcaption>A sample project, with room for the whole team.</figcaption>
</figure>
</section>
<section class="forma-section" id="features" aria-labelledby="features-title">
<header class="forma-section-heading">
<p class="forma-eyebrow">LESS FRICTION. MORE FLOW.</p>
<h2 id="features-title">Everything has its place.</h2>
<p>Simple tools for the everyday work that moves an idea forward.</p>
</header>
<div class="grid">
<article class="card">
<span class="forma-feature-icon">
<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="M3 7V5a2 2 0 0 1 2-2h5l3 4h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>
</svg>
</span>
<h3>A home for every project</h3>
<p>Keep the brief, decisions and next steps together. Less searching, more making.</p>
</article>
<article class="card">
<span class="forma-feature-icon">
<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">
<rect x="3" y="5" width="18" height="16" rx="3"/>
<path d="M7 3v4M17 3v4M3 10h18M7 14h2m6 0h2m-10 4h2"/>
</svg>
</span>
<h3>Plans with room to breathe</h3>
<p>See what matters this week, then give your team space to do their best work.</p>
</article>
<article class="card">
<span class="forma-feature-icon">
<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">
<circle cx="12" cy="8" r="4"/>
<path d="M4 21v-2a8 8 0 0 1 16 0v2"/>
</svg>
</span>
<h3>Everyone on the same page</h3>
<p>Make ownership clear and conversations easy to follow, wherever you work.</p>
</article>
</div>
</section>
<section class="forma-section forma-overview" id="overview" aria-labelledby="overview-title">
<header class="forma-section-heading">
<p class="forma-eyebrow">YOUR WORK. YOUR RHYTHM.</p>
<h2 id="overview-title">From a first thought to a shared plan.</h2>
<p>Keep the context close, and the next step clear.</p>
</header>
<fieldset class="tabs">
<legend>Explore the workspace</legend>
<label>
<input type="radio" name="forma-overview" checked>Plan</label>
<div class="tab-panel">
<div class="grid">
<div>
<h3>A week with a little more focus.</h3>
<p>Turn a loose brief into a handful of useful milestones. See the next step without losing the bigger picture.</p>
<a href="#contact">Tell us about your team <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 12h16m-7-7 7 7-7 7"/>
</svg>
</a>
</div>
<article class="card">
<h4>Website refresh</h4>
<ol>
<li>Agree the direction <small>— Monday</small>
</li>
<li>Review the first concept <small>— Wednesday</small>
</li>
<li>Share the final story <small>— Friday</small>
</li>
</ol>
</article>
</div>
</div>
<label>
<input type="radio" name="forma-overview">Create</label>
<div class="tab-panel">
<div class="grid">
<div>
<h3>Give your ideas somewhere to grow.</h3>
<p>Capture a thought, connect it to a project and leave a useful trail for the person who picks it up next.</p>
</div>
<article class="card">
<h4>Creative brief</h4>
<dl class="description-list">
<div>
<dt>Purpose</dt>
<dd>A welcoming first impression</dd>
</div>
<div>
<dt>Direction</dt>
<dd>Warm, clear, considered</dd>
</div>
<div>
<dt>Next step</dt>
<dd>Choose the opening story</dd>
</div>
</dl>
</article>
</div>
</div>
<label>
<input type="radio" name="forma-overview">Together</label>
<div class="tab-panel">
<div class="grid">
<div>
<h3>Clear ownership. Open conversation.</h3>
<p>A shared space for decisions, feedback and thoughtful handovers. Everyone knows where to begin.</p>
</div>
<article class="card">
<h4>The project team</h4>
<ul class="list-group" role="list">
<li>Alex — creative direction</li>
<li>Sam — content and story</li>
<li>Jamie — project planning</li>
</ul>
</article>
</div>
</div>
</fieldset>
</section>
<section class="forma-section" id="pricing" aria-labelledby="pricing-title">
<header class="forma-section-heading">
<p class="forma-eyebrow">MAKE ROOM TO GROW</p>
<h2 id="pricing-title">A space that fits your work.</h2>
<p>Illustrative monthly plans. Choose one to preview the next step.</p>
</header>
<div class="grid forma-plans">
<article class="card stack">
<header>
<div class="row justify-between">
<h3>Solo</h3>
</div>
<p>A calm place for independent work.</p>
</header>
<p class="forma-price">€12<small> / month</small>
</p>
<ul>
<li>One personal workspace</li>
<li>Project planning</li>
<li>Notes and file links</li>
</ul>
<footer>
<button type="button" class="outline" popovertarget="forma-plan-solo">Choose Solo <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 12h16m-7-7 7 7-7 7"/>
</svg>
</button>
</footer>
<div id="forma-plan-solo" popover="auto">
<h3>Solo: a place to start.</h3>
<p>This is a demonstration plan; no purchase or signup takes place.</p>
<p>Close this preview, then use the contact form to explore the form controls.</p>
<button type="button" popovertarget="forma-plan-solo" popovertargetaction="hide">Close preview</button>
</div>
</article>
<article class="card stack forma-featured">
<header>
<div class="row justify-between">
<h3>Studio</h3>
<span class="badge">For teams</span>
</div>
<p>A shared rhythm for growing teams.</p>
</header>
<p class="forma-price">€29<small> / month</small>
</p>
<ul>
<li>Shared team workspace</li>
<li>Everything in Solo</li>
<li>Project roles and reviews</li>
</ul>
<footer>
<button type="button" popovertarget="forma-plan-studio">Choose Studio <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 12h16m-7-7 7 7-7 7"/>
</svg>
</button>
</footer>
<div id="forma-plan-studio" popover="auto">
<h3>Studio: a place to start.</h3>
<p>This is a demonstration plan; no purchase or signup takes place.</p>
<p>Close this preview, then use the contact form to explore the form controls.</p>
<button type="button" popovertarget="forma-plan-studio" popovertargetaction="hide">Close preview</button>
</div>
</article>
<article class="card stack">
<header>
<div class="row justify-between">
<h3>Collective</h3>
</div>
<p>Space for several teams to move together.</p>
</header>
<p class="forma-price">€59<small> / month</small>
</p>
<ul>
<li>Multiple workspaces</li>
<li>Everything in Studio</li>
<li>Shared project library</li>
</ul>
<footer>
<button type="button" class="outline" popovertarget="forma-plan-collective">Choose Collective <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 12h16m-7-7 7 7-7 7"/>
</svg>
</button>
</footer>
<div id="forma-plan-collective" popover="auto">
<h3>Collective: a place to start.</h3>
<p>This is a demonstration plan; no purchase or signup takes place.</p>
<p>Close this preview, then use the contact form to explore the form controls.</p>
<button type="button" popovertarget="forma-plan-collective" popovertargetaction="hide">Close preview</button>
</div>
</article>
</div>
</section>
<section class="forma-section forma-faq" id="faq" aria-labelledby="faq-title">
<header class="forma-section-heading">
<p class="forma-eyebrow">A FEW GOOD QUESTIONS</p>
<h2 id="faq-title">Before you make yourself at home.</h2>
</header>
<div class="accordion">
<details name="forma-faq">
<summary>Who is Forma for?</summary>
<p>Forma is a fictional workspace product used to demonstrate a complete RevaCSS marketing website. Its projects, people and prices are sample content.</p>
</details>
<details name="forma-faq">
<summary>Can I explore the workspace?</summary>
<p>Yes. The Plan, Create and Together views above give you three perspectives on the same project. Select a view to explore it.</p>
</details>
<details name="forma-faq">
<summary>Can I change the look of this website?</summary>
<p>Use the Customize this demo panel above the website. Choose light or dark, a palette, solid or glass material, and a shape.</p>
</details>
<details name="forma-faq">
<summary>Will this demo create an account or collect my details?</summary>
<p>No. Plan buttons open local previews. The contact form demonstrates native validation without sending or storing your entries.</p>
</details>
</div>
</section>
<section class="forma-section" id="contact" aria-labelledby="contact-title">
<div class="grid forma-contact">
<div>
<p class="forma-eyebrow">START A CONVERSATION</p>
<h2 id="contact-title">What are you<br>making room for?</h2>
<p class="forma-lead">A new project, a growing team, or simply a calmer way to work. Tell us what’s on your mind.</p>
<p>
<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">
<rect x="3" y="5" width="18" height="14" rx="3"/>
<path d="m4 7 8 6 8-6"/>
</svg> A thoughtful next step starts here.</p>
</div>
<form class="card" action="#contact-confirmation" method="get" aria-labelledby="contact-form-title">
<h3 id="contact-form-title">Let’s find your space.</h3>
<p id="contact-help">
<small>Preview form: nothing is sent or saved. Try a sample name and email.</small>
</p>
<!-- Unnamed controls deliberately prevent this preview from transmitting entries. Add names and a real form endpoint in your application. -->
<div class="grid">
<div class="form-group">
<label for="forma-name">Your name</label>
<input id="forma-name" autocomplete="off" placeholder="Alex Morgan" required aria-describedby="contact-help">
</div>
<div class="form-group">
<label for="forma-email">Email address</label>
<input id="forma-email" type="email" autocomplete="off" placeholder="alex@example.com" required>
</div>
</div>
<div class="form-group">
<label for="forma-team">Team size</label>
<select id="forma-team">
<option>Just me</option>
<option>2–10 people</option>
<option>11–50 people</option>
<option>More than 50 people</option>
</select>
</div>
<div class="form-group">
<label for="forma-message">What would you like to work on?</label>
<textarea id="forma-message" rows="4" placeholder="A little about your next project…">
</textarea>
</div>
<button type="submit">Preview next step <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 12h16m-7-7 7 7-7 7"/>
</svg>
</button>
</form>
</div>
<div class="alert forma-confirmation" id="contact-confirmation" tabindex="-1">
<h3>Ready for the next step.</h3>
<p>Your browser validated the preview form. No entries were submitted or saved.</p>
<a href="#contact">Back to the form</a>
</div>
</section>
<footer class="forma-footer">
<div class="row justify-between">
<a class="forma-wordmark" href="#demo-site">forma.</a>
<nav aria-label="Footer">
<div class="row">
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
<a href="#contact">Contact</a>
</div>
</nav>
</div>
<p>
<small>A fictional product. A real HTML/CSS demonstration. Built with <a href="https://eristavi.github.io/RevaCSS/">RevaCSS</a>.</small>
</p>
</footer>
</div>
</main>
</body>
</html>

The configuration snippet reflects your current choices. The optional settings helper saves them between demo pages and includes them in the HTML download. The source viewer shows the starting document. Without JavaScript, copy the selected attributes onto its opening HTML tag.

The core owns component styling and behavior. Demo CSS adds the hero composition, section spacing, backdrop and pricing layout. The contact form is a validation preview: add control names and your own submission endpoint when adapting it.

Component API · How shared defaults inherit · Deferred device and accessibility checks