Surface
Importing
Add rh-surface to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-surface/rh-surface.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-surface id="surface" color-palette="darkest">
<rh-blockquote align="inline-start" size="default">
<p>Surface is used to provide a theme to children</p>
</rh-blockquote>
<rh-spinner size="lg">Loading...</rh-spinner>
<rh-tag color="green">Sold</rh-tag>
</rh-surface>
<style>
#surface {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
justify-items: center;
align-items: center;
padding: var(--rh-space-xl);
}
</style>
<script type="module">
import '@rhds/elements/rh-surface/rh-surface.js';
import '@rhds/elements/rh-blockquote/rh-blockquote.js';
import '@rhds/elements/rh-spinner/rh-spinner.js';
import '@rhds/elements/rh-tag/rh-tag.js';
</script>rh-surface
Surfaces are content containers with a color palette which provide a theme (i.e. a background color as well as accessible font colors) to their child elements. Use surface only when other containers like card or accordion are inappropriate.
| Slot Name | Description |
|---|---|
|
The |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
color-palette |
colorPalette |
Sets color palette, which affects the element's styles as well as descendants' color theme. The default surface color palette is 'lightest', Surface always overrides the parent's color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values |
|
|
| Token | Copy |
|---|---|
--rh-color-surface
|
|
--rh-color-text-primary
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
