Tile

Overview

Tiles are flexible layouts with clickable and contained surfaces.

These Tile patterns document different design-approved uses of the <rh-tile> element. Consult the <rh-tile> element documentation for more information on how to use the tile element.

Customizing tiles

Tiles act as both themable containers and also respond to the color theme from their themable containers.

Customize tiles by setting custom values for the element's color tokens. By setting the theme tokens for both dark and light color themes, you can theme an entire page or section.

Examples include:

• --rh-color-border-interactive-on-light
• --rh-color-border-interactive-on-dark
• --rh-color-interactive-primary-hover-on-light
• --rh-color-interactive-primary-hover-on-dark
• --rh-color-text-primary-on-light
• --rh-color-text-primary-on-dark

For more information, please see the docs on theming and <rh-tile> css custom properties.

Custom tiles