Tile

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  3. rh-tile-group
  1. Installation
  2. Usage
  3. rh-tile-group

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-tile/rh-tile.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-tile/rh-tile.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/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-tile/rh-tile.js';
</script>
Copy to Clipboard Wrap lines

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

 
<link rel="stylesheet" href="/path/to/rh-tile/rh-tile-lightdom.css">

Usage

<rh-tile>
  <img slot="image" src="https://fakeimg.pl/296x50" alt="296 X 50 placeholder image">
  <div slot="title">Title</div>
  <h2 slot="headline"><a href="#top">Link</a></h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>

<script type="module">
  import '@rhds/elements/rh-tile/rh-tile.js';
</script>

<link rel="stylesheet" href="../rh-tile-lightdom.css">

<style>
  rh-tile {
    margin-inline-end: var(--rh-space-md, 8px);
  }
</style>
Copy to Clipboard Wrap lines

rh-tile

A tile is a flexible layout with a clickable and contained surface.

Slots 6
Slot Name Description
image

optional image on top of tile
icon

optional icon
title

optional title
headline

optional headline / link title

optional body content
footer

optional footer
Attributes 13
Attribute DOM Property Description Type Default
bleed bleed

Whether image is full-width (i.e. bleeds into the padding)

 
boolean
 
false
desaturated desaturated

Whether headline link text is a desaturated color instead of blue; true sets headline color to white on dark tiles or black on light tiles

 
boolean
 
false
compact compact

Reduces tile padding for more compact spaces

 
boolean
 
false
icon icon

The icon to display in the tile

 
IconNameFor<IconSetName> | undefined
 
unknown
icon-set iconSet

Icon set to display in the tile

 
IconSetName
 
'standard'
accessible-label accessibleLabel

When checkable, the accessible (visually hidden) label for the form control If not set, the text content of the tile element will be used instead.

 
string | undefined
 
unknown
name name

Form name

 
string | undefined
 
unknown
value value

Form value

 
string | undefined
 
unknown
checkable checkable

When true, tile behaves like a checkbox unless it is part of an <rh-tile-group radio>, in which case it behaves like a radio button

 
boolean
 
false
checked checked

If tile is checkable, whether it is currently checked

 
boolean
 
false
disabled disabled

Whether tile interaction is disabled

 
boolean
 
false
color-palette colorPalette

Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values

Tile always resets its context to base, unless explicitly provided with a color-palette.

 
ColorPalette | undefined
 
unknown
link link

When set to "private", the icon representing the link changes from an arrow to a padlock

 
'private' | 'public' | 'external' | undefined
 
unknown
Methods 5
Method Name Description
formDisabledCallback()
formStateRestoreCallback(state: string, mode: string)
setCustomValidity(message: string)
checkValidity()
reportValidity()
Events 2
Event Name Description
force
select

when tile is clicked
CSS Shadow Parts 0
None
CSS Custom Properties 9
CSS Property Description Default
--rh-tile-text-color

Color of text.
Could cause accessibility issues; prefer to use --rh-color-text-primary-on-light and --rh-color-text-primary-on-dark for theming.

 var(--rh-color-text-primary-on-light, #151515)
--rh-tile-text-color-secondary

Disabled text and icons.
Could cause accessibility issues; prefer to use --rh-color-text-secondary-on-light and --rh-color-text-secondary-on-dark for theming.

 var(--rh-color-text-secondary-on-light, #4d4d4d)
--rh-tile-interactive-color

Color of interactive elements.
Could cause accessibility issues; prefer to use --rh-color-border-interactive-on-light and --rh-color-border-interactive-on-dark for theming.

 var(--rh-color-border-interactive-on-light, #0066cc)
--rh-tile-link-color

Color of tile link.

 var(--rh-tile-interactive-color)
--rh-tile-link-text-decoration

Tile link text decoration

 none
--rh-tile-background-color

Color tile surface.
Could cause accessibility issues; prefer to use --rh-color-surface-lightest and --rh-color-surface-darkest for theming.

 var(--rh-color-surface-lightest, #ffffff)
--rh-tile-focus-background-color

Color tile surface on focus/hover.
Could cause accessibility issues; prefer to use --rh-color-surface-lighter and --rh-color-surface-darker for theming.

 var(--rh-color-surface-lighter, #f2f2f2)
--rh-tile-disabled-background-color

Color tile surface when disabled.
Could cause accessibility issues; prefer to use --rh-color-surface-light and --rh-color-surface-dark for theming.

 var(--rh-color-surface-light, #e0e0e0)
--rh-tile-border-color

Color of tile border.
Could cause accessibility issues; prefer to use --rh-color-border-subtle-on-light and --rh-color-border-subtle-on-dark for theming.

 var(--rh-color-border-subtle-on-light, #c7c7c7)
Design Tokens 30
Token Copy
--rh-animation-speed
--rh-animation-timing
--rh-border-radius-default
--rh-border-width-sm
--rh-color-border-interactive
--rh-color-border-subtle
--rh-color-interactive-primary-hover
--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
--rh-color-text-secondary
--rh-font-family-body-text
--rh-font-size-body-text-lg
--rh-font-size-body-text-md
--rh-font-size-body-text-sm
--rh-font-size-body-text-xs
--rh-font-size-heading-xs
--rh-font-weight-body-text-medium
--rh-font-weight-heading-regular
--rh-line-height-body-text
--rh-size-icon-03
--rh-size-icon-05
--rh-space-2xl
--rh-space-lg
--rh-space-xl

rh-tile-group

A group of `` elements which handles radio selection.

Slots 1
Slot Name Description

Put one or more rh-tile elements in this slot
Attributes 3
Attribute DOM Property Description Type Default
disabled disabled

Whether tile group interaction is disabled

 
boolean
 
false
radio radio

If tile is checkable, whether only one tile can be checked

 
boolean
 
false
color-palette colorPalette

Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values

Tile group always resets its context to base, unless explicitly provided with a color-palette.

 
ColorPalette | undefined
 
unknown
Methods 4
Method Name Description
focus()

Sets focus on active tile
selectItem(tile: RhTile)

Programatically select a tile
toggleItem(tile: RhTile)

Programatically toggle a tile
updateItems()

Updates slotted tiles to set properties and keyboard navigation
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 1
Token Copy
--rh-space-2xl
Edit this page on GitHub