Website project
Your next interface
Build a custom component once and let its parent provide the appearance.
Component notes
The card owns the surface. Custom CSS adds content layout and supporting text, without replacing material or focus styling.
One component, shared appearance
This application component reuses the card surface and native HTML. Change the settings on html to configure the inherited example; the local light and dark examples keep their explicit modes.
Inherited appearance
Local light mode
Website project
Your next interface
The mode changes here; palette, shape and density still inherit.
Read the extension notesLocal dark mode
Website project
Your next interface
The same component and stylesheet work in either mode.
Read the extension notesInherited glass material
Website project
Your next interface
Glass applies to the existing card hook. Unsupported filtering and accessibility preferences use the material module's fallbacks.
Read the extension notesExtension notes
Load custom-components.css after RevaCSS. Keep the component's card class to inherit material styling. Use unique heading IDs for every instance and replace these demonstration links with real application destinations.
Change html's data-theme to light, dark or auto. Change data-palette to a documented palette, or load your exported custom palette after the framework. Adding components and saving preferences belong to your application.
This is an HTML/CSS reference example. Browser, device and accessibility acceptance checks for this addition are deferred; a successful build does not establish conformance.
Back to top