REFERENCE

Component API

Find the identifying markup, optional states and behaviour boundary for each component. Follow its example page for complete HTML.

All modules depend on the shared tokens and native base where applicable. Complete builds contain the listed component styling and common utilities. Component filenames identify styling modules; they are not independent behaviour packages.

Foundations

Typography

Markup hook
Native headings, paragraphs, lists and inline text
Options and states
None; choose semantic HTML.
Styling module
reva.base.css
Behaviour
Document structure comes from your markup.

Open demos and HTML examples

Cards and layouts

Markup hook
.card, .container, .grid, .row, .stack
Options and states
Optional cols-2/cols-3; shared width and gap settings.
Styling module
reva.components.css
Behaviour
Layouts arrange content; there is no numbered 12-column API.

Open demos and HTML examples

Tables

Markup hook
table; .table-scroll for overflow
Options and states
data-table; caption and native header cells.
Styling module
reva.components.css
Behaviour
CSS does not sort, filter or fetch records.

Open demos and HTML examples

Images and media

Markup hook
img, video, figure
Options and states
data-ratio and data-fit; meaningful alt text.
Styling module
reva.components.css
Behaviour
Intrinsic media dimensions and playback are browser/application-owned.

Open demos and HTML examples

Description lists

Markup hook
dl.description-list, dt, dd
Options and states
Native div groups for term/value pairs.
Styling module
reva.description-lists.css
Behaviour
Pairs adapt to their available container width.

Open demos and HTML examples

Forms and actions

Buttons

Markup hook
button, action inputs; a.button for destinations
Options and states
Inherited data-variant; outline/ghost presentation; existing secondary/danger/warning classes.
Styling module
reva.base.css
Behaviour
Local action attributes override inherited values and legacy classes; data-appearance remains badge/alert-only.

Open demos and HTML examples

Forms

Markup hook
label, input, select, textarea, fieldset, legend
Options and states
required, disabled, readonly, aria-invalid as appropriate.
Styling module
reva.base.css
Behaviour
Native validation is preserved; applications provide error messages.

Open demos and HTML examples

Native select dropdowns

Markup hook
Native select and option elements; no classes.
Options and states
Existing shared tokens and native form attributes.
Styling module
Optional reva.selects.css / reva.selects.scoped.css
Behaviour
Support-gated customizable dropdown; native fallback. Multiple/listbox selects unchanged.

Open demos and HTML examples

Form groups

Markup hook
.form-group; optional .field-error
Options and states
for/id labels and aria-describedby descriptions.
Styling module
reva.form-groups.css
Behaviour
Error display and announcements are application-owned.

Open demos and HTML examples

Input groups

Markup hook
.input-group around native controls and text
Options and states
A label remains outside or associated with the input.
Styling module
reva.input-groups.css
Behaviour
Actions need an application handler or a real form destination.

Open demos and HTML examples

Switches

Markup hook
input.switch[type=checkbox] inside a label
Options and states
Native checked/disabled; optional role=switch.
Styling module
reva.switches.css
Behaviour
Checked state, keyboard activation and submission remain native.

Open demos and HTML examples

Star ratings

Markup hook
fieldset.rating > legend, label > input[type=radio], span; labelled .rating display
Options and states
Native radio name/value/checked/disabled/required and reset; accessible numeric display.
Styling module
reva.rating.css
Behaviour
Integer star selection without JavaScript; backend supplies averages and submissions.

Open demos and HTML examples

Toolbars

Markup hook
.toolbar
Options and states
Use a named role=group for ordinary controls.
Styling module
reva.toolbars.css
Behaviour
No ARIA toolbar arrow-key management is added.

Open demos and HTML examples

Feedback and status

Alerts

Markup hook
.alert
Options and states
data-variant and data-appearance, including inherited values.
Styling module
reva.alerts.css
Behaviour
Static messages have no automatic live region or dismissal.

Open demos and HTML examples

Badges

Markup hook
.badge
Options and states
data-variant and data-appearance, including inherited values.
Styling module
reva.badges.css
Behaviour
Passive labels; no automatic announcements or interaction.

Open demos and HTML examples

Progress and meters

Markup hook
progress, meter
Options and states
Native value/max and meter thresholds; accessible labels.
Styling module
reva.base.css
Behaviour
Values and native indeterminate presentation are not calculated by CSS.

Open demos and HTML examples

Loading indicators

Markup hook
.spinner
Options and states
Decorative aria-hidden plus visible loading text.
Styling module
reva.loading.css
Behaviour
Application owns loading state; reduced motion stops the spinner.

Open demos and HTML examples

Skeletons

Markup hook
.skeleton
Options and states
Hide decorative placeholders; retain meaningful loading text.
Styling module
reva.skeletons.css
Behaviour
Application owns aria-busy and replacing placeholders.

Open demos and HTML examples

Empty states

Markup hook
.empty-state
Options and states
Ordinary heading, explanation and real next action.
Styling module
reva.empty-states.css
Behaviour
Applications determine when there are no results.

Open demos and HTML examples

Content and identity

Card patterns

Markup hook
.card with header, figure and footer
Options and states
Native structure; row for optional action arrangement.
Styling module
reva.card-patterns.css
Behaviour
The components bundle includes the card surface and these patterns.

Open demos and HTML examples

Metric cards

Markup hook
.card > dl > dt, dd > output
Options and states
Existing shared attributes; visible trend and comparison text.
Styling module
reva.card-patterns.css
Behaviour
Backend supplies values; native meter/progress optional. No JavaScript or new attributes.

Open demos and HTML examples

Activity timeline

Markup hook
ol.timeline > li
Options and states
Semantic time and event text; inherited shared appearance.
Styling module
reva.timeline.css
Behaviour
Server supplies ordered events; no JavaScript.

Open demos and HTML examples

Calendar grid

Markup hook
table.calendar > caption, thead, tbody
Options and states
Weekday headers, time[datetime], aria-current=date and native event links.
Styling module
reva.calendar.css
Behaviour
Server-rendered month display; no date picker, range selection or booking engine.

Open demos and HTML examples

Message thread

Markup hook
ol.message-thread > li > article.card
Options and states
Existing data-variant=primary marks outgoing messages; native sender/time/footer and optional avatar.
Styling module
reva.message-thread.css
Behaviour
Ordered static history. Sending, real-time updates and announcements belong to the application.

Open demos and HTML examples

Charts

Markup hook
figure.chart > svg, figcaption
Options and states
Backend supplies coordinates, title/description and exact data.
Styling module
reva.charts.css
Behaviour
Existing line/area and doughnut patterns; no new chart types.

Open demos and HTML examples

List groups

Markup hook
ul.list-group or ol.list-group
Options and states
Keep role=list; ordinary links for destinations.
Styling module
reva.lists.css
Behaviour
Ordinary collections, not interactive listboxes.

Open demos and HTML examples

Avatars

Markup hook
.avatar on img or an initials span
Options and states
alt text or full-name labelling when needed.
Styling module
reva.avatars.css
Behaviour
Failed-image replacement must be supplied by the application.

Open demos and HTML examples

SVG icon symbols, inline usage and custom sizing are documented in the icon reference.