Tile
On this page
Overview
Tiles are flexible layouts with clickable and contained surfaces.
<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 themeable containers and also respond to the color theme from their themeable 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.
Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Copy to Clipboard
Copied!
Toggle line wrap
<rh-surface id="custom-tiles">
<rh-tile>
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
<rh-tile>
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
</rh-surface>
Copy to Clipboard
Copied!
Toggle line wrap
#custom-tiles {
background: transparent;
display: flex;
gap: var(--rh-space-md);
--rh-color-surface-darkest: var(--rh-color-purple-70);
--rh-color-surface-darker: var(--rh-color-purple-60);
--rh-color-surface-dark: var(--rh-color-purple-50);
--rh-color-surface-light: var(--rh-color-purple-30);
--rh-color-surface-lighter: var(--rh-color-purple-20);
--rh-color-surface-lightest: var(--rh-color-purple-10);
--rh-color-border-interactive-on-dark: var(--rh-color-purple-10);
--rh-color-border-interactive-on-light: var(--rh-color-purple-70);
--rh-color-interactive-primary-default-on-dark: var(--rh-color-purple-10);
--rh-color-interactive-primary-default-on-light: var(--rh-color-purple-70);
--rh-color-border-subtle-on-dark: var(--rh-color-purple-20);
--rh-color-border-subtle-on-light: var(--rh-color-purple-60);
}
Copy to Clipboard
Copied!
Toggle line wrap
import '@rhds/elements/rh-surface/rh-surface.js';
import '@rhds/elements/rh-tile/rh-tile.js';