Surface

OverviewStyleGuidelinesCodeDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-surface/rh-surface.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-surface/rh-surface.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.9/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.13/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.9/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.9/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-surface/rh-surface.js';
</script>
Copy to Clipboard Wrap lines

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>
Copy to Clipboard Wrap lines

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.

Slots 1
Slot Name Description

The <rh-surface> element has a single anonymous slot which accepts any content and does not provide additional layout styling
Attributes 1
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

 
ColorPalette | undefined
 
unknown
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 8
Token Copy
--rh-color-surface
--rh-color-surface-dark
--rh-color-surface-darker
--rh-color-surface-darkest
--rh-color-surface-light
--rh-color-surface-lighter
--rh-color-surface-lightest
--rh-color-text-primary

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub