Surface commons provide six material treatments. They combine Standard neutral colors with borders, radii, and elevation. Layout, padding, text color, and interaction behavior remain with the application.
| Class | Treatment |
|---|---|
material-surface |
Neutral 100, a 1px neutral 500 border, and rd:4x; the border becomes transparent under @surface-layered |
material-sunken |
Neutral 150 with a transparent 1px border |
material-tooltip |
Neutral 100, rd:2x, and shadow:2x; a visible border in dark appearance |
material-menu |
Neutral 100, a neutral 500 border, rd:4x, and shadow:4x |
material-dialog |
Neutral 100, rd:4x, and shadow:5x; a visible border in dark appearance |
material-fullscreen |
Neutral 100, rd:6x, and shadow:6x; a visible border in dark appearance |
<section class="material-surface p:4 text-color:neutral-950" aria-labelledby="surface-title">
<h2 id="surface-title" class="heading-4x">Project settings</h2>
<p class="prose-2x">A shared material with application-owned layout.</p>
</section>Use Card when its header, body, and footer arrangement fits the content. A material does not create a working popover or dialog. The owner still supplies positioning, visibility, keyboard behavior, and focus management.
Select role palettes centrally on html with data-css-neutral and the
other Standard role attributes. Check borders and focus in light, dark,
and forced colors. A shadow alone cannot establish a forced-colors boundary.