REVA CSS · MANUAL REVIEW

Complete component test page

One long page with all 39 documented component families, 139 live examples, full navigation, long content and native form states.

Build revision: 4aed48713d4ed6b42ca08f73e75be0fca6fcd0bc. This is a review fixture, not an automatic pass report.

Use Customize in the documentation header to change inherited appearance. Scroll through the page on desktop and mobile; use Tab, Shift+Tab, Enter, Space and Escape. Check actual browser zoom, reduced motion, high contrast, print preview and your screen reader. Real-device checks gives the release acceptance checklist.

Core interactions use native HTML and CSS. Framework hydration and application behaviour are checked separately in their reference apps. Forms have no application backend: use fictional values only. Submit validates, then reloads this page with values in the URL; reset restores defaults. Results are not saved automatically.

Component index

Long content, language and wrapping

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings. A deliberately long link describing the next section and every native form control available for review.

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

Review fixture · long quotation
  • A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.
  • Nested content
    1. A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.
    2. Inline strong emphasis, emphasis, highlight, removed text, inserted text, HTML, Ctrl + +, H2O and x2.

A long card heading that should wrap across several lines when space is limited

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier

Language and fallback fonts

Lange zusammengesetzte Wörter: Benutzeroberflächenkomponenten und Dokumentationsüberprüfung.

Vérifiez les caractères accentués, l’espacement et la lisibilité de chaque élément.

Проверьте читаемость длинного текста и перенос строк на маленьком экране.

Ελέγξτε τη γραμματοσειρά και την αναγνωσιμότητα σε μικρές οθόνες.

შეამოწმეთ ქართული ტექსტის წაკითხვა და სტრიქონების გადატანა პატარა ეკრანზე.

اختبر وضوح النص واتجاه القراءة والمحاذاة في الواجهة.

בדקו את כיוון הטקסט ואת הקריאות במסך קטן.

Wide table and preformatted text

These labelled regions intentionally scroll horizontally. The page itself should fit the viewport.

Long table content and numeric alignment
ReferenceDescriptionOwnerStatusQuantityUnit priceTotalReview notes
REV-1000A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review100€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1001A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review101€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1002A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review102€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1003A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review103€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1004A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review104€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1005A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review105€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1006A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review106€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1007A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review107€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1008A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review108€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1009A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review109€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1010A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review110€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
REV-1011A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.Long department and reviewer nameAwaiting detailed review111€1,234.56€123,456.78VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier
<article class="card" data-theme="dark" data-material="glass" aria-label="VeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifierVeryLongUnbrokenIdentifier">
  A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.
</article>
Illustrated mountain landscape used to check responsive media
A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

All form fields and native states

Input types
Validation, disabled and read-only states
Leave empty and submit to inspect native validation.
Example error: enter a complete email address.
Choices and long descriptions
Radio group
Disabled fieldset

Fixed appearance and nested inheritance

These specimens deliberately override the global customizer. Compare Default and Mono, light and dark, and solid, glass and soft. Coloured bands provide a visible backdrop for glass.

default · light · solid

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

default · light · glass

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

default · light · soft

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

default · dark · solid

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

default · dark · glass

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

default · dark · soft

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

mono · light · solid

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

mono · light · glass

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

mono · light · soft

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

mono · dark · solid

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

mono · dark · glass

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

mono · dark · soft

A component must remain readable when the content grows beyond the short labels used in a typical demonstration. This paragraph includes several sentences so you can inspect wrapping, spacing, rhythm, selection, line height and the relationship between neighbouring controls. Resize the window, zoom the page and read this with your preferred font and contrast settings.

Complete icon catalog

home
menu
close
plus
minus
check
chevron-left
chevron-right
chevron-down
chevron-up
arrow-left
arrow-right
search
user
settings
bell
mail
calendar
clock
download
upload
external-link
copy
edit
trash
star
heart
info
warning
check-circle
sun
moon
monitor
lock
eye
folder

Every live documentation example

Examples inherit the global customizer unless they explicitly set local attributes. Full-document layouts, heading hierarchies and the open-dialog specimen use independent frames, with their own system appearance; reload to restore a closed dialog. Placeholder fragment links stay in their specimen; documentation links open the relevant guide. A specimen's labels, groups and popover targets belong to that specimen alone.

Top menu

Top menu documentation. Open nested menus, move back, press Escape, click outside and check the mobile menu.

Typography

Native HTML text elements receive their styling automatically. This page covers all six heading levels, body text, inline semantics, lists, quotations and technical notation, with the HTML beneath every example. Component documentation

All six heading levels

h1 through h6 retain their native semantics and default styling. This isolated document has its own page heading; use levels according to the structure of your real content.

Paragraphs and readable text

Paragraphs use the inherited font, colour and line height. The optional prose wrapper provides a readable maximum width.

RevaCSS starts with ordinary HTML. Use paragraphs to organise related sentences into clear blocks of content.

A new paragraph gives the next idea room to breathe. Shared typography settings apply without repeated classes.

Supporting information: available features may vary by browser.

Importance, emphasis and visual annotation

strong expresses importance and em expresses stress. b draws attention, i distinguishes an alternate voice or term, u annotates, and s marks information that is no longer accurate.

Important: save your changes before leaving.

This setting is especially useful for shared themes.

The keyword is inheritance.

The term in situ means in its original place.

Spelling annotation: recieve should be receive.

Registration closes on Friday. Registration now closes on Monday.

Highlighted for review: confirm the delivery date.

Inserted and deleted content

Use ins and del to identify document edits. Their semantics differ from simply drawing a line through outdated text with s.

The meeting starts at 09:00 10:00.

Abbreviations and definitions

Expand abbreviations visibly on first use. The title attribute provides additional information but should not be the only explanation.

Cascading Style Sheets (CSS) controls presentation.

Inheritance is the process by which supported styling values pass from a parent to its descendants.

Unordered, ordered and nested lists

Use ul when order is not meaningful and ol for sequences. Nest another list inside its parent li; native numbering options need no helper classes.

  • Light theme
  • Dark theme
    • Solid surfaces
    • Glass surfaces
  1. Load the stylesheet
  2. Set shared defaults
  3. Add semantic HTML
  1. Override local exceptions
  2. Review the result

Terms and descriptions

Native dl, dt and dd express term/value associations. The separate description-list component is available when you need a responsive record layout.

Theme
The light, dark or system colour mode.
Material
The solid or glass surface treatment.
Accent
The shared highlight colour.

Block quotations, inline quotes and citations

blockquote contains a quotation, q marks an inline quotation, and cite names a work rather than a person's name. The text below is demonstration copy.

Good defaults leave room for your own decisions.

From A demonstration of semantic typography.

The example describes its approach as native by design.

Code, keyboard input, output and variables

code identifies code, kbd keyboard input, samp program output and var a variable. Escape angle brackets when showing HTML as text.

Set data-theme="dark" on your page.

Press Ctrl + S to save.

The command reports Build complete.

The rectangle area is w × h.

<button type="button">Save</button>
<p>Your content stays in HTML.</p>

Subscripts and superscripts

sub and sup support conventional notation. Provide an understandable text explanation when a formula needs more context.

Water has the chemical formula H2O.

A square metre is written m2.

The expression x2 means x squared.

Dates and machine-readable values

time supplies a machine-readable date or time; data associates visible text with an application value. CSS does not format dates or calculate values.

Published .

The call begins at .

Product: RevaCSS starter.

Contact information

address contains contact information for the relevant page or article. RevaCSS removes the default italic styling; use ordinary HTML links where appropriate.

RevaCSS project
Project repository and issue tracker

Thematic breaks and controlled line breaks

hr marks a thematic change, br creates a meaningful line break and wbr marks an optional wrapping opportunity. Use paragraphs and CSS spacing rather than repeated br elements.

The first topic ends here.

A new topic begins here.

A two-line label:
Native HTML and CSS

An optional break: verylongprojectnameexample

Language, direction and ruby annotations

Set language and direction where needed. bdi isolates text with an unknown direction; bdo deliberately overrides direction. Ruby annotations retain native browser presentation.

Une interface claire et lisible.

Contributor: עדי.

Direction override demonstration: ABC.

東京（とうきょう）

Inherited text scale and a local exception

data-type selects body typography scale. Configure a parent and override only exceptions; headings and paragraphs require no extra styling classes.

A larger shared text scale

Headings and body text use the parent typography scale.

A compact local section

Only this branch changes its text scale.

Cards and layouts

Use a small set of layout classes. Grids adapt intrinsically; rows wrap; stacks arrange content vertically. Component documentation

A layout inside a narrow parent

The responsive wrapper measures its own width. The fixed-column grid collapses below 40rem even on a wide desktop. Put the wrapper inside a sized parent; do not put containment on a subgrid card.

First item

One column in this narrow space.

Second item

The browser window can remain wide.

Cards

Apply .card to an article or section. Shared shape, density, depth and border attributes control its treatment.

Your next project

A surface for related content.

Read more

Example link destination. Use the documentation link above for implementation guidance.

Responsive grids

The default grid fits as many columns as space permits. cols-2 and cols-3 switch to one column below 40rem. Inside a responsive wrapper they also use the wrapper width; cols-3 uses two columns from 40rem to below 60rem.

First card

First column.

Second card

Second column.

Rows and stacks

Combine .row, .stack and alignment utilities. data-gap can be inherited from html or a section, or overridden on a layout.

A vertical stack.

Actions wrap when space runs out.

Containers and prose

data-width can set inherited container defaults or be overridden on .container. .prose limits text measure independently of the page width.

Comfortable reading

A narrow container with a readable text measure.

Tables

Use real table semantics, captions and header scopes. Wrap wide tables in a labelled, focusable scroll region. Component documentation

Plain table

Set data-table on html or a section for shared defaults, or on the table for a local override. The wrapper contains horizontal overflow.

Project status
ProjectStatus
WebsiteIn review
DocumentationIn progress

Striped table

Set data-table on html or a section for shared defaults, or on the table for a local override. The wrapper contains horizontal overflow.

Project status
ProjectStatus
WebsiteIn review
DocumentationIn progress

Bordered table

Set data-table on html or a section for shared defaults, or on the table for a local override. The wrapper contains horizontal overflow.

Project status
ProjectStatus
WebsiteIn review
DocumentationIn progress

Images and media

Media scales within its container. Image attributes control cropping; meaningful alternative text remains your responsibility. Component documentation

Figures and responsive images

Supply intrinsic width and height to reserve space. Use a caption for visible context.

Illustrated hills beneath a pale sky
A responsive image with a caption.

Image ratios

data-ratio constrains the image. cover crops it; contain keeps the full image within the chosen ratio.

Hills, cropped to a square The entire hills illustration inside a square

Description lists

One description-list class arranges native term and description pairs. Use this pattern for record summaries and profile metadata. Component documentation

Record details

Each native div groups a term and its value.

Project
RevaCSS
Status
Active
Documentation
Getting started

Metadata inside a card

The label width is optional; the enclosing card supplies its inherited surface.

Account summary

Plan
Professional
Billing
Monthly
Team
12 members

Scroll to top

A labelled native link returns to a page-owned top anchor. One structural class; no JavaScript. Component documentation

Footer return link

This example links to the top of this documentation page.

Back to top

Buttons

Native actions use the inherited primary accent by default. Set data-variant on a parent for shared semantic colours, or on an action for a local exception. Keep buttons for actions and anchors for navigation. Component documentation

Button variants

Use the shared semantic vocabulary. No identifying class is needed on native buttons.

Parent defaults and local exceptions

The button and badge share the parent's meaning. The delete action overrides only its variant.

Approved
Success: Your changes have been saved.

Semantic colour with outline or ghost

Presentation classes remain optional. data-appearance is not a button setting.

Existing classes and precedence

Local semantic classes override the parent. An explicit action attribute wins when both APIs are present.

Links and native action inputs

Only native action input types receive the semantic button treatment. Destination links keep their .button hook.

Read the guide

Glass and semantic edge colours

The parent supplies the variant and material. A local primary value resets the semantic colour while retaining glass.

Actions in light and dark

Primary and secondary actions inherit the same accent. Theme changes their palette; shape, size, borders, depth and motion remain independently configurable. These examples use solid buttons; the optional glass stylesheet enables translucent button material.

Light

Dark

Sizes and disabled state

data-size can set inherited control sizes on html or a section; a value on a control overrides them. Native disabled prevents activation.

Local button configuration

Shared attributes can be placed directly on a button or inherited from a surrounding section.

Gradient edges and motion

Plain is the default. Gradient is stationary; shine makes one 800ms sweep on hover or keyboard focus; animated turns slowly. Use continuous animation sparingly for a selected main action. Edges follow the action colour and shape, independently of fill. Native input buttons retain regular borders.

A shared edge with local exceptions

Set data-edge on html or a section to configure buttons, .button links and cards. A nearer plain value removes decoration. data-border none removes the gradient ring; data-motion none pauses it. Reduced motion keeps a static ring; higher contrast, forced colours and print remove decoration.

Shared stationary edge

Focused shine

Example link destination. Use the documentation link above for implementation guidance.

A separate material for actions

The card follows the general material. Actions use liquid; the local default button returns to the card’s material. Load reva.button-materials.css after the core.

Forms

Native controls need explicit labels. RevaCSS supplies appearance; your HTML supplies names, hints, errors and form behavior. Component documentation

Disabled and read-only states

Native disabled fieldsets disable their descendant controls. Read-only fields retain focus and submission; disabled fields are omitted from submission.

Shipping options unavailable
Read only. This reference cannot be changed.

Date, time and numeric controls

Native pickers, constraints and keyboard behaviour remain browser-owned. Picker appearance and support vary by browser. These fields have no submission handler.

Text fields, select and textarea

Associate labels with unique input IDs. Set appropriate input types and autocomplete tokens.

Checkboxes and radios

Wrap each choice in its label. A shared radio name creates one native selection group.

Preferences

Hints, errors and read-only fields

Connect explanatory text with aria-describedby. aria-invalid styles a supplied error state; CSS does not create or announce errors.

Enter an email address containing @.

Other native controls

Range, file, colour, date, progress and meter retain native behavior. No output calculation is performed by CSS.

60%
40%

Minimal controls

data-controls changes input treatment. It does not remove required labels or control boundaries.

Native select dropdowns

An optional CSS-only enhancement styles ordinary select option lists with the existing framework tokens. No classes, extra wrappers or new data attributes. Component documentation

Ordinary select, framework option list

The same simple HTML works with and without the optional stylesheet.

Groups and disabled options

Native groups, disabled options and a longer label.

Native listbox retained

Multiple selection is deliberately outside the enhanced dropdown contract.

Form groups

One form-group class keeps a native label, control and help text together. Theme and control settings inherit from the parent; use fieldset and legend for related choices. Component documentation

An explicitly supplied validation error

The application supplies aria-invalid and the visible error. CSS keeps the error border and focus outline consistent. Associate both the hint and error with the field.

Use the address where you want to receive updates.

Enter a complete email address, such as name@example.com.

Label, control and help

Only the group needs a class. IDs connect the label and explanation to the native control.

The name shown on your public profile.

A known validation error

This static server-validation example includes an explicit error and aria-invalid. No automatic validation script is added.

We use this for account notifications. Enter a complete email address, such as name@example.com.

Responsive grouped fields

Existing grid layout arranges groups. A textarea and select retain native behavior and shared control styling.

Write a short introduction.

Related choices in a fieldset

The legend names the group. Each radio has its own native label. This fieldset inherits optional glass material.

Preferred contact method
Choose one contact method.

Input groups

One input-group wrapper arranges a native input with text prefixes, suffixes or an action. Each field keeps its own label and shared control styling. Component documentation

An amount with a prefix

The visible label names both the field and its currency; the decorative prefix avoids repeating it.

Enter the total before tax.

A field with an action

The example action is presentation-only. Your application supplies the search behavior.

A measured value

Units are explicit in the label, with a decorative suffix.

A native action input

Action inputs use the same grouping role as buttons. The editable field takes the available width; the action wraps when needed.

Switches

A switch class styles a native checkbox as an on/off control. Checked state, keyboard activation, form submission and disabled behavior remain native. Component documentation

A native on/off setting

The label names the setting and activates its checkbox.

Help and disabled settings

Associated help text explains the setting. Native disabled prevents changes.

Receive one summary every Monday.

Shared defaults

Set accent and size on the parent; controls only need the switch class.

A sized labelled switch

The group label and switch consume the size setting once. A local switch size remains an independent override.

Star ratings

One rating class supports an accessible read-only display or native radio choices that submit ordinary form values. Component documentation

A published rating

Text communicates the value without relying on colour or star glyphs.

★★★★☆ 4 out of 5 · 12 reviews

Choose a rating

Native radio values remain available to a normal form action. No review is submitted by this example.

Your rating

Unavailable selection

Disabled native choices preserve their state and cannot be changed.

Published review (editing unavailable)

Toolbars

One toolbar class arranges related native actions and allows them to wrap. Controls inherit their existing button and form styling. Component documentation

Actions in a narrow workspace

Below 24rem of wrapper width, toolbar children fill the line and nested input groups stack. These links retain ordinary navigation behaviour.

A group of actions

The labelled group explains why these controls belong together.

Sidebar and app shell

One app-shell class arranges a native aside, header and main. Sidebar links, expandable groups and profile regions use semantic HTML, with inherited theme styling and zero browser JavaScript. Component documentation

One-class responsive app shell

Resize this isolated preview: desktop sidebar becomes a Menu button and native drawer below 60rem. Expand Settings, then Team.

Sidebar outside an app shell

One sidebar class establishes the same native navigation styling without the surrounding application layout.

Example link destination. Use the documentation link above for implementation guidance.

Navigation rail

A compact native nav with visible labels and optional existing SVG icons. One structural class, no additional attributes. Component documentation

Compact navigation

Native anchors with visible text.

Overview

Projects

Activity

Drawer / inspector

One drawer class turns a native popover into a viewport-edge inspector. Use semantic children and inherited data attributes for details, filters or settings. Component documentation

Project inspector

One structural class and inherited appearance. Open, close, click outside or press Escape.

Filter drawer

One structural class and inherited appearance. Open, close, click outside or press Escape.

Dropdowns

One dropdown class turns a native popover list into a standalone set of links or actions. Use it beside a button, outside the top navigation, with inherited theme styling and no JavaScript. Component documentation

Explicit close and unavailable actions

The close button is functional and receives focus on opening. The disabled action remains unavailable through native HTML.

Light and dark parent defaults

Theme, shape and size live on the containing section; neither dropdown needs repeated styling attributes.

Glass and a local solid boundary

The optional glass extension follows the parent material. A solid section resets the second panel without repeating settings on its rows.

Breadcrumbs

One breadcrumbs class styles a native navigation landmark and ordered list. Real links lead to ancestor pages; aria-current identifies the current page. Component documentation

A page trail

The current location is plain text with aria-current; only ancestor pages are links.

Wrapping and parent defaults

Long labels wrap. The same logical layout works with the document reading direction.

Step navigation

One ordered-list class presents the stages of a process. Current state and destinations stay in native HTML. Component documentation

Order progress

Completed and upcoming states are explicit text, with native current-step semantics.

Your order

Review your bag before supplying delivery details.

Pagination

One pagination class arranges native page links. Shared theme, size, density, shape, depth, borders, gap and optional glass styling inherit from the parent. Your server or application supplies page destinations. Component documentation

Current and unavailable pages

The current page and unavailable Previous control are plain spans. Demo links have real anchor destinations.

Example link destination. Use the documentation link above for implementation guidance.

A longer range

Ellipses are passive text. Links wrap rather than stretching the page beyond its container.

Example link destination. Use the documentation link above for implementation guidance.

Inherited glass and pill shape

The parent supplies material and shape; page links need no styling attributes.

Example link destination. Use the documentation link above for implementation guidance.

Accordions

Native details and summary elements provide the interaction. One accordion wrapper arranges the group; theme, shape, density, spacing, borders, depth, material and motion inherit from the parent. Component documentation

Independent sections

Each native disclosure opens and closes independently. The wrapper supplies spacing without extra classes on items.

What does RevaCSS include?

Native HTML styling and optional components.

Do I need JavaScript?

These accordions work through native browser behavior.

One item open at a time

Matching name attributes request an exclusive group. Use a different name for every group in your document.

How do I create an account?

Complete the registration form.

How do I change my details?

Open your profile settings.

Inherited motion intensity

Choose motion once on a parent. Open and close each section to compare instant, subtle and expressive behaviour. Reduced motion wins; browsers without intrinsic-size transitions retain native disclosure.

None

How does none motion work?

The content and indicator change immediately.

The browser owns the open state and keyboard behaviour.

Subtle

How does subtle motion work?

Content expands smoothly and the indicator rotates.

The browser owns the open state and keyboard behaviour.

Expressive

How does expressive motion work?

Content expands with a gentle fade and a rotating indicator.

The browser owns the open state and keyboard behaviour.

Inherited material and shape

Configure the wrapper once. Both native disclosures inherit glass, dark colours and roundness.

Shared appearance

This disclosure follows its parent settings.

More information

No component attributes are repeated.

Tabs

A tab-style header selects its associated content panel using native radios underneath. Visible radio circles are removed; the selected tab has an accent underline and surface backing. No JavaScript is added. Component documentation

A tab bar with two panels

Click a tab label or use native radio-group arrow keys. The selected tab is underlined; radio circles are visually hidden.

Account information

Account overview

Your account is active.

Your preferences

Choose preferences in your application settings.

Explore form groups

An independent instance

A different name keeps this selection independent of the first example.

Documentation view

Start with native elements and shared parent settings.

Add a component class only when the pattern needs one.

An unavailable tab

Native disabled prevents selection and keyboard focus. Keep an available choice checked; a disabled label explains its unavailable state.

Project views

Project overview

Your active project details.

Reports

This view is currently unavailable.

Disclosures and overlays

Native HTML supplies disclosure and popover interactions. CSS styles their surfaces without adding application behavior. Component documentation

Native disclosure

summary toggles its details. Add open if it should start expanded.

What is included?

Native HTML foundations and optional component styles.

Exclusive disclosure groups

Matching name values allow one disclosure in that group to remain open. Give separate instances unique group names.

Do I need JavaScript?

These disclosures work with native HTML.

Can I customise the styles?

Use shared attributes and ordinary CSS.

Native popover

popovertarget opens this popover without JavaScript in supporting browsers. Native auto popovers support light dismissal.

Helpful information

This is a native popover surface.

Dialog markup

open displays a non-modal dialog. This static markup does not implement modal opening or focus management; those require supported native invoker commands or a separate script. A form with method="dialog" can close an open dialog.

Alerts

Messages with one alert class. Theme, accent, shape, size, density, depth, borders, fill and material follow the parent. Attributes are optional exceptions, not required on every alert. Component documentation

One class, no attributes

A static informational message uses the inherited accent and needs no announcement role.

Information: Your draft is saved locally.

Shared status variants

Choose meaning through visible text and optional variants. Each message stays readable without relying on its colour.

Information: Your next invoice arrives on Monday.
Success: Your changes have been saved.
Warning: Your subscription expires in three days.
Error: Your payment could not be processed.
Note: This project is archived.

Headings, lists and links

Ordinary HTML supports richer messages. Use a heading level that fits your document and descriptive links.

Review before continuing

Please check the following details:

  • Your billing address
  • Your preferred payment method

Return to the documentation content

Example link destination. Use the documentation link above for implementation guidance.

Parent defaults and local exceptions

Both alerts inherit appearance and shape. Only the exception needs its own variant.

Success: Your profile is complete.
Warning: Verify your email address.

Tinted, solid and outline

The same appearance setting configures badges and alerts. Outline keeps an opaque surface backing for readable content.

Success: Tinted appearance.
Success: Solid appearance.
Success: Outline appearance.

Glass with a solid exception

Load the optional glass extension. Parent material carries into alerts; a local solid section stops it. Unsupported blur retains opaque backing.

Information: A frosted message surface.
Information: An opaque local exception.

Badges

Passive status labels, counts and categories. One badge class identifies the component; theme, accent, size, shape, density, depth, borders and material follow the parent. No attributes are required on individual badges. Component documentation

One class, no attributes

The default badge is tinted and uses the inherited accent. Use ordinary text around a count to explain it.

Product update New

Unread messages 3

Configure a parent once

Both badges inherit the parent. The same settings can be placed on html for the whole site.

Featured New

Status colours from parents

A status on a parent applies to all badges inside it. Each label states its meaning in text.

New
Approved
Pending
Overdue
Archived

Tinted, solid and outline

Appearance is separate from status and from the shared gradient setting.

Tinted
Solid
Outline

Shared size and shape

Size and shape are inherited. Labels can wrap instead of widening a narrow page.

Small
Medium
Large

Square

Optional local exceptions

The parent remains the default. Override only the label or subtree that needs to differ; plain buttons keep their existing API.

Approved

Pending review

Paid

Inherited glass with a solid exception

Load the optional glass stylesheet. Badges inherit material; solid stops it locally. Unsupported blur falls back to the normal opaque badge.

Glass label

Solid exception

A count inside a sized action

The badge remains relative to the action text while preserving shared size and an optional local badge override. The button label supplies count context.

Progress and meters

Native progress and meter elements already inherit the accent and available width. No component class is required. Component documentation

Known completion

A native label names the progress indicator; visible text communicates its value.

65% 65% complete

Indeterminate progress

Omit value when completion is unknown. Keep a visible explanation while the browser renders its native indicator.

Working This may take a moment.

A measured range

Meter describes a bounded measurement. The browser uses its native threshold presentation.

72% 72 GB of 100 GB used

Loading indicators

A single spinner class supplies decorative CSS motion. Visible text explains what is happening; your application decides when to show or remove the indicator. Component documentation

Visible loading text

The text carries the meaning, so the spinner is hidden from assistive technology.

Loading your records…

Without animation

Configure motion on the parent to keep a stationary indicator.

Preparing your report…

Loading inside a sized action

The action supplies size once; its spinner follows the resolved text size without multiplying that setting again. Applications control disabled and loading state.

Skeletons

A skeleton class draws a decorative loading placeholder. Keep a real loading message available; your application controls when placeholders are replaced by content. Component documentation

Loading card content

Visible text explains the waiting state; only the placeholders are decorative.

Loading project details…

Shared stationary placeholders

The parent disables motion. An optional height gives the first placeholder a media shape.

Preparing a preview…

Empty states

One empty-state class centres ordinary content with readable spacing. Your application decides when the collection is empty; CSS only arranges the message. Component documentation

No records yet

A heading and explanation are enough when there is no meaningful action to offer.

No records yet

Your records will appear here after you add them.

A useful next step

Combine existing card and button styles with the empty-state layout.

Start your first project

Explore the guide to choose your page defaults and components.

Read the guide

No chart data

Reuse the existing empty-state instead of drawing a misleading empty or zero chart.

No revenue data yet

The chart will appear after a reporting period is available.

Unavailable metric

Missing values are distinct from a measured zero.

Forecast revenue
Unavailable
No forecast has been supplied.

Card patterns

Extend the existing card class with native header, figure and footer elements. No extra classes are needed for the card's structural sections. Component documentation

A media card

Intrinsic image dimensions reserve its natural space. The figure adds a visible caption.

Illustrated hills beneath a pale sky
A quiet landscape

Explore the possibilities

Native content and responsive media share the same surface.

Shared glass material

Only the enclosing section needs theme and material settings.

Frosted account summary

A native header and footer follow the inherited card surface.

Metric cards

Use the existing card class and native term/value pairs for readable values, trends and comparisons. No metric-specific classes or data attributes. Component documentation

Value and comparison

One existing class; label, value and comparison stay readable in HTML.

Total revenue
€42,500
Up 8.4% versus August
Recognised revenue in September.

Decrease with context

Explicit language separates the direction from its business meaning.

Support incidents
12
Down 25% versus August
Fewer incidents this month.

Value and target

A labelled native meter shows a bounded value; the number and target remain visible.

Team utilisation
78%
Target range: 70–85%

Activity timeline

One class on an ordered list presents events and audit history with native timestamps. Component documentation

Recent activity

One structural class and ordinary event text.

  1. Workspace refresh shared

    Ready for review.

  2. Report completed

Calendar grid

A native table displays a month, dated events and a highlighted date. It is a schedule view, not another date-picker control. Component documentation

A month with linked events

A Monday-first October 2026 schedule with two complete event destinations.

October 2026 · Project schedule
MonTueWedThuFriSatSun

Design review · October 5

Review the workspace draft at 10:00.

Team call · October 12

Plan the next week at 09:30.

Message thread

One ordered-list layout arranges existing cards as conversation messages, keeping sender names, timestamps and reading order explicit. Component documentation

A support conversation

Existing cards and avatars with one thread layout class.

  1. Alex · Support

    Hello! How can I help with your order?

  2. You

    Could you tell me the dimensions of the Arc lamp?

    Delivered
  3. Alex · Support

    Of course: 32 × 18 × 42 cm.

Charts

The dashboard’s existing line/area and doughnut charts now share a reusable figure class and stylesheet. No additional chart types or duplicate dashboard charts. Component documentation

Existing revenue chart

The same line/area chart already used by the dashboard, now without demo-only chart classes.

Monthly revenue, April to September 2026Revenue rises from 28,400 euros in April to 42,500 euros in September, with a dip in June. April 28,400; May 32,100; June 29,700; July 36,800; August 39,200; September 42,500 euros.10k20k30k40kAprMayJunJulAugSep
Six months of recognised revenue.

Existing channel chart

The same doughnut chart already used by the dashboard, with all shares in its accessible description.

Revenue share by channelDirect 55 percent, partners 30 percent, referrals 15 percent.€42.5kTOTAL REVENUE
Share of September revenue

List groups

One list-group class arranges ordinary list items with shared surface colours, borders, shape and density. Native lists without this class retain their existing typography. Component documentation

Text items with badges

Standard list markup supports richer content without per-item classes.

  • Profile Complete
  • Billing Review needed
  • Notifications enabled

Avatars

One avatar class supports an image or explicit initials. Size, shape, borders and colours follow shared parent defaults. Component documentation

Initials with a full name

The visible name gives context, so the initials are decorative.

Revaz Eristavi

Image markup

This documentation illustration demonstrates cropping. Replace the source with a real profile image.

Example profile

Inherited sizes and shapes

Each parent supplies a size. A full accessible name accompanies standalone initials.

AM
JL
ST

Copyable review record

Copy this template into your issue or review notes for each failure. Use the fixture heading's link as a stable reference. “Not checked” is different from a pass. This page does not upload or retain your notes.

↑ Back to top