Vitre UI Examples

A comprehensive static page for checking how Vitre CSS and Vitre JS handle raw semantic HTML. It is intentionally broader and denser than the main documentation.

Current Color Scheme

These swatches use Vitre variables directly, so they update with system theme changes or an explicit data-theme override.

Token Preview Role
--vitre-primary Links, focus, primary actions
--vitre-bg Page background
--vitre-surface Panels and elevated surfaces
--vitre-text Primary text
--vitre-muted Body copy and secondary text
--vitre-border Control and table borders

Typography

Vitre is designed for ordinary paragraphs, inline links, emphasized text, strong text, marked text, and small metadata such as .

Abbreviations like CSS, inserted text like new token names, deleted text like old aliases, and formulas like H2O or x2 should sit cleanly in running copy.

Small text should stay legible without competing with body copy.

Vitre UI
Semantic HTML examples
Halifax, NS

Heading Levels

Grouped Heading

Compact supporting text inside an hgroup.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Lists

  1. Include the stylesheet
  2. Write semantic HTML
  3. Tweak variables when needed
  • Open command
  • Save command
  • Export command
    •

    Ruby annotations should remain legible: 透明(toumei).

    Classless CSS should make the common path beautiful while leaving customization available through a clear variable surface.

    Semantic Structure

    Article Card

    Nested headers and footers create a natural card anatomy.

    Articles inside sections inherit the same panel treatment as top-level content panels.

    Published
    Article
    A self-contained composition that can render as a semantic card.
    Aside
    Supplementary content that should stand apart from the main flow.
    Your changes have been saved successfully.
    This note highlights contextual information.
    This warning can be dismissed or time out.
    This alert needs attention before continuing.

    Dialog

    Dialog Preview

    This non-modal preview checks dialog-like content without covering later sections. The Close button is intentionally inactive in this static example.

    Forms
    Preferences

    Button Variants

    Data And Code

    Token examples use the same table rhythm as application data.
    Token Purpose Example
    --vitre-primary Primary action and link color hsl(214 88% 46%)
    --vitre-radius Default control radius 0.75rem
    --vitre-shadow Elevated surface shadow 0 18px 48px ...
    Total Three sample tokens

    Inline code should work with const theme = "vitre"; and keyboard hints like Ctrl + K.

    :root {
  --vitre-hue: 168;
  --vitre-primary: hsl(var(--vitre-hue) 76% 42%);
}

    Media

    An inline SVG to check media sizing, radius, and caption treatment.
    Audio example using a local MP3 asset.
    Video example using a local MP4 asset.
    YouTube embed example for responsive iframe styling.

    Interactive Elements

    Theme behavior

    Vitre follows system color preference by default and supports explicit data-theme="light" and data-theme="dark" overrides.