Heading levels express hierarchy, not a choice of font size.
\nRevaCSS starts with ordinary HTML. Use paragraphs to organise related sentences into clear blocks of content.
\nA new paragraph gives the next idea room to breathe. Shared typography settings apply without repeated classes.
\nSupporting information: available features may vary by browser.
\nImportant: save your changes before leaving.
\nThis setting is especially useful for shared themes.
\nThe keyword is inheritance.
\nThe term in situ means in its original place.
\nSpelling annotation: recieve should be receive.
\nRegistration closes on Friday. Registration now closes on Monday.
Highlighted for review: confirm the delivery date.
" }, { "id": "links", "title": "Links and supporting text", "description": "Use real destinations and meaningful link labels. Small print remains readable and is not a substitute for essential instructions.", "html": "Start with the RevaCSS installation guide.
\nFor a local section, see all six heading levels.
\nTerms apply to the current preview release.
" }, { "id": "edits", "title": "Inserted and deleted content", "description": "Use ins and del to identify document edits. Their semantics differ from simply drawing a line through outdated text with s.", "html": "The meeting starts at 09:00 10:00.
Cascading Style Sheets (CSS) controls presentation.
\nInheritance is the process by which supported styling values pass from a parent to its descendants.
" }, { "id": "lists", "title": "Unordered, ordered and nested lists", "description": "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.", "html": "\n\nGood defaults leave room for your own decisions.
\n
The example describes its approach as native by design
.
Set data-theme=\"dark\" on your page.
Press Ctrl + S to save.
\nThe command reports Build complete.
\nThe rectangle area is w × h.
\n<button type=\"button\">Save</button>\n<p>Your content stays in HTML.</p>Water has the chemical formula H2O.
\nA square metre is written m2.
\nThe expression x2 means x squared.
" }, { "id": "time-data", "title": "Dates and machine-readable values", "description": "time supplies a machine-readable date or time; data associates visible text with an application value. CSS does not format dates or calculate values.", "html": "Published .
\nThe call begins at .
\nProduct: RevaCSS starter.
" }, { "id": "address", "title": "Contact information", "description": "address contains contact information for the relevant page or article. RevaCSS removes the default italic styling; use ordinary HTML links where appropriate.", "html": "\n RevaCSS projectThe first topic ends here.
\nA new topic begins here.
\nA two-line label:
Native HTML and CSS
An optional break: verylong
Une interface claire et lisible.
\nContributor: עדי.
\nDirection override demonstration: ABC.
\n東京
" }, { "id": "shared-type", "title": "Inherited text scale and a local exception", "description": "data-type selects body typography scale. Configure a parent and override only exceptions; headings and paragraphs require no extra styling classes.", "html": "Headings and body text use the parent typography scale.
\nOnly this branch changes its text scale.
\nOne column in this narrow space.
The browser window can remain wide.
A surface for related content.
\n Read more\nFirst column.
Second column.
A vertical stack.
\nA narrow container with a readable text measure.
\n| Project | Status |
|---|---|
| Website | In review |
| Documentation | In progress |
| Project | Status |
|---|---|
| Website | In review |
| Documentation | In progress |
| Project | Status |
|---|---|
| Website | In review |
| Documentation | In progress |
![\"Illustrated](\"__BASE__images/example-landscape.svg\")
\n \n \nSoft surfaces with liquid actions.
Enter an email address containing @.
\n\n\n\n" }, { "id": "native-controls", "title": "Other native controls", "description": "Range, file, colour, date, progress and meter retain native behavior. No output calculation is performed by CSS.", "html": "Enter a complete email address, such as name@example.com.
\n4 out of 5 · 12 reviews
" }, { "id": "rating-choice", "title": "Choose a rating", "description": "Native radio values remain available to a normal form action. No review is submitted by this example.", "html": "" }, { "id": "rating-disabled", "title": "Unavailable selection", "description": "Disabled native choices preserve their state and cannot be changed.", "html": "" } ] }, { "slug": "toolbars", "title": "Toolbars", "group": "Forms and actions", "url": "http://revacss.eristavi.org/components/toolbars/", "markdown": "http://revacss.eristavi.org/ai/components/toolbars.md", "markup": ".toolbar", "states": "Use a named role=group for ordinary controls.", "stylesheet": "reva.toolbars.css", "behaviour": "No ARIA toolbar arrow-key management is added.", "intro": "One toolbar class arranges related native actions and allows them to wrap. Controls inherit their existing button and form styling.", "notes": [ "Use role=\"group\" with a descriptive name for this CSS-only pattern. Each control remains a normal Tab stop. Do not add role=\"toolbar\" without implementing its expected arrow-key focus behavior.", "Use links for destinations and buttons for application actions. Native disabled works as usual. Name icon-only buttons explicitly.", "Gap and density inherit. The wrapper paints no extra surface; combine it with card when a surface is useful." ], "examples": [ { "id": "toolbar-container", "title": "Actions in a narrow workspace", "description": "Below 24rem of wrapper width, toolbar children fill the line and nested input groups stack. These links retain ordinary navigation behaviour.", "html": "Your application content goes here.
\nReusable layout, native navigation, shared theme.
A real application supplies settings forms.
A real application supplies member records.
Review your bag before supplying delivery details.
Native HTML styling and optional components.
\nThese accordions work through native browser behavior.
\nComplete the registration form.
\nOpen your profile settings.
\nThe content and indicator change immediately.
\nThe browser owns the open state and keyboard behaviour.
\nContent expands smoothly and the indicator rotates.
\nThe browser owns the open state and keyboard behaviour.
\nContent expands with a gentle fade and a rotating indicator.
\nThe browser owns the open state and keyboard behaviour.
\nThis disclosure follows its parent settings.
\nNo component attributes are repeated.
\nNative HTML foundations and optional component styles.
\nThese disclosures work with native HTML.
\nUse shared attributes and ordinary CSS.
\nThis is a native popover surface.
\n \nPlease check the following details:
\nProduct update New
\nUnread messages 3
" }, { "id": "badge-parent", "title": "Configure a parent once", "description": "Both badges inherit the parent. The same settings can be placed on html for the whole site.", "html": "\n Featured New
\n\n Square
" }, { "id": "badge-overrides", "title": "Optional local exceptions", "description": "The parent remains the default. Override only the label or subtree that needs to differ; plain buttons keep their existing API.", "html": "\n Approved
\nPending review
\n\n Paid
\n\n Glass label
\n\n Solid exception
\nLoading your records…
" }, { "id": "loading-still", "title": "Without animation", "description": "Configure motion on the parent to keep a stationary indicator.", "html": "Preparing your report…
\n\n \n Loading results…\n
", "render": false }, { "id": "loading-in-action", "title": "Loading inside a sized action", "description": "The action supplies size once; its spinner follows the resolved text size without multiplying that setting again. Applications control disabled and loading state.", "html": "Loading project details…
\nPreparing a preview…
\nYour records will appear here after you add them.
\nExplore the guide to choose your page defaults and components.
\n Read the guide\nThe chart will appear after a reporting period is available.
New RevaCSS documentation
\nStart with inherited page defaults, then add only local exceptions.
\n \n\n Native content and responsive media share the same surface.
\n \nA native header and footer follow the inherited card surface.
\n \nWorkspace refresh shared
Ready for review.
Report completed
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
Review the workspace draft at 10:00.
Plan the next week at 09:30.
![\"\"](\"__BASE__images/example-landscape.svg\"\n)
\n Example profile\n