Skip to main content Red Hat Design System logo Contribute on Github

Tile

Overview Style Guidelines Code Demos Accessibility

Installation

Red Hat CDN

CDN Prerelease

We are currently working on our CDN, which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat associate and have questions or comments about the CDN or installation process please join us in our Red Hat Design System Google chat.

In the meantime, install this component using npm

The recommended way to load RHDS is via the Red Hat Digital Experience CDN, and using an import map.

If you have full control over the page you are using, add an import map to the <head>, pointing to the CDN, or update any existing import map. If you are not responsible for the page's <head>, request that the page owner makes the change on your behalf.

<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@1.1.0/elements/",
      "@patternfly/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@patternfly/elements@2.2.2/"
    }
  }
</script>

Once the import map is established, you can load the element with the following module, containing a bare module specifier:

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

Note that Modules may be placed in the <head>: since they are deferred by default, they will not block rendering.

Lightdom CSS

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

<link rel="stylesheet" href="https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@1.1.0/rh-tile/rh-tile-lightdom.css">
 NPM

Install RHDS using your team's preferred NPM package manager, e.g.

npm install @rhds/elements

Once that's been accomplished, you will need to use a bundler to resolve the bare module specifiers and optionally optimize the package for your site's particular use case and needs. Comprehensive guides to bundling are beyond the scope of this page; read more about bundlers on their websites:

Lightdom CSS

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

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

Replace /path/to in the href attribute with the installation path to the rh-tile directory in your project.

 JSPM

Public CDNs

JSPM and other public CDNs should not be used on corporate domains. Use them for development purposes only!

Add an import map to the <head>, pointing to the CDN, or update any existing import map.

<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://jspm.dev/@rhds/elements/",
      "@patternfly/elements/": "https://jspm.dev/@patternfly/elements/"
    }
  }
</script>

Once the import map is established, you can load the element with the following module, containing a bare module specifier:

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

Note that Modules may be placed in the <head>: since they are deferred by default, they will not block rendering.

Lightdom CSS

Lightdom CSS is required for this element to ensure a reduced Cumulative Layout Shift (CLS) experience before the element has fully initialized.

<link rel="stylesheet" href="https://jspm.dev/@rhds/elements@1.1.0/elements/rh-tile/rh-tile-lightdom.css">

Usage

Warning

Tiles require light DOM CSS to be included on the page in order to style links properly.

rh-tile

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 11
DOM Property Description Type Default
bleed

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

 
boolean
 
false
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

Reduces tile padding for more compact spaces

 
boolean
 
false
icon

Icon (must be a member of the fontawesome "far" icon set)

 
string | undefined
 
unknown
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

Form name

 
string | undefined
 
unknown
value

Form value

 
string | undefined
 
unknown
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

If tile is checkable, whether it is currently checked

 
boolean
 
false
disabled

Whether tile interaction is disabled

 
boolean
 
false
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
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 0

None

rh-tile-group

Slots 1
Slot Name Description

tiles
Attributes 3
DOM Property Description Type Default
disabled

Whether tile group interaction is disabled

 
boolean
 
false
radio

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

 
boolean
 
false
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 0

None
© 2021-2024 Red Hat, Inc. Deploys by Netlify