Form & layout examples

Copy-paste examples: login form, contact form, dashboard stats cards, card grid, and settings panel using Rizzo CSS components.

Full-page snippets you can drop into your project. All use Rizzo form components, cards, and design tokens. Adjust classes and structure to match your stack (Astro, Svelte, React, Vue, or Vanilla).

Login form

A simple sign-in form with email, password, and submit. Uses form-group, form-control, and btn.

Live example
html html 
<form class="form" method="post" action="/login" aria-label="Sign in">
  <div class="form-group">
    <label for="email" class="form-group__label">Email <span class="form-group__required" aria-hidden="true">*</span></label>
    <input type="email" id="email" name="email" class="form-control" placeholder="you@example.com" required autocomplete="email" />
  </div>
  <div class="form-group">
    <label for="password" class="form-group__label">Password <span class="form-group__required" aria-hidden="true">*</span></label>
    <input type="password" id="password" name="password" class="form-control" placeholder="••••••••" required autocomplete="current-password" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn--block">Sign in</button>
  </div>
</form>

Contact form

Name, email, and message with a submit button. Uses text input, textarea, and semantic form groups.

Live example
We'll get back to you within 24 hours.
html html 
<form class="form" method="post" action="/contact" aria-label="Contact us">
  <div class="form-group">
    <label for="name" class="form-group__label">Name <span class="form-group__required" aria-hidden="true">*</span></label>
    <input type="text" id="name" name="name" class="form-control" placeholder="Your name" required />
  </div>
  <div class="form-group">
    <label for="email" class="form-group__label">Email <span class="form-group__required" aria-hidden="true">*</span></label>
    <input type="email" id="email" name="email" class="form-control" placeholder="you@example.com" required />
  </div>
  <div class="form-group">
    <label for="message" class="form-group__label">Message <span class="form-group__required" aria-hidden="true">*</span></label>
    <textarea id="message" name="message" class="form-control" rows="4" placeholder="Your message..." required></textarea>
    <p class="form-group__help">We'll get back to you within 24 hours.</p>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Send message</button>
  </div>
</form>

Dashboard stats cards

A row of stat cards (metric value + label) for dashboards. Uses card and design tokens.

Live example
1,234
Users
$12.5k
Revenue
98%
Active
html html 
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: var(--spacing-6);">
  <div class="card card--outlined">
    <div class="card__body" style="text-align: center;">
      <div style="font-size: var(--text-3xl); font-weight: 700; color: var(--accent-fg);">1,234</div>
      <div style="font-size: var(--font-size-sm); color: var(--text-dim); margin-top: var(--spacing-1);">Users</div>
    </div>
  </div>
  <div class="card card--outlined">
    <div class="card__body" style="text-align: center;">
      <div style="font-size: var(--text-3xl); font-weight: 700; color: var(--accent-fg);">$12.5k</div>
      <div style="font-size: var(--font-size-sm); color: var(--text-dim); margin-top: var(--spacing-1);">Revenue</div>
    </div>
  </div>
  <div class="card card--outlined">
    <div class="card__body" style="text-align: center;">
      <div style="font-size: var(--text-3xl); font-weight: 700; color: var(--accent-fg);">98%</div>
      <div style="font-size: var(--font-size-sm); color: var(--text-dim); margin-top: var(--spacing-1);">Active</div>
    </div>
  </div>
</div>

Card grid

A responsive grid of cards using Rizzo card and design tokens for spacing and typography.

Live example

Card one

Short description or summary for this card.

Card two

Another card with similar structure.

Card three

Use for feature lists, dashboards, or content blocks.

html html 
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--spacing-6);">
  <div class="card card--elevated">
    <div class="card__body">
      <h3 style="margin: 0 0 var(--spacing-2); font-size: var(--text-lg);">Card one</h3>
      <p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Short description or summary.</p>
    </div>
  </div>
  <div class="card card--elevated">
    <div class="card__body">
      <h3 style="margin: 0 0 var(--spacing-2); font-size: var(--text-lg);">Card two</h3>
      <p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">Another card.</p>
    </div>
  </div>
</div>

Settings panel

A simple settings-style panel with a section heading, form controls, and switches. Matches the pattern used in the Rizzo Settings component.

Live example

Preferences

Shown to other users.
html html 
<div class="card card--outlined" style="padding: var(--spacing-6);">
  <h3 style="margin: 0 0 var(--spacing-4); font-size: var(--text-lg);">Preferences</h3>
  <form class="form" method="post" action="/settings">
    <div class="form-group">
      <label for="display_name" class="form-group__label">Display name</label>
      <input type="text" id="display_name" name="display_name" class="form-control" placeholder="Your name" />
      <p class="form-group__help">Shown to other users.</p>
    </div>
    <div class="form-group">
      <label for="theme" class="form-group__label">Theme</label>
      <select id="theme" name="theme" class="form-control">
        <option value="system">System</option>
        <option value="github-dark-classic">GitHub Dark Classic</option>
        <option value="github-light">GitHub Light</option>
      </select>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
  </form>
</div>