Tile
On this page
On this page
Tile
Default link tile with image, title, headline, body text, and footer.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Accented Tiles
Tiles with a custom CSS accent border on top, shown across color contexts.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';rh-context-demo::part(demo) {
display: flex;
align-items: top;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
}
rh-tile-group {
display: flex;
align-items: top;
flex-wrap: wrap;
column-gap: var(--rh-space-2xl, 32px);
row-gap: var(--rh-space-2xl, 32px);
margin-inline-end: var(--rh-space-md, 8px);
}
rh-tile {
width: 320px;
}
rh-tile.accented-tile {
position: relative;
overflow: hidden;
border-radius: var(--rh-border-radius-default, 3px);
}
rh-tile.accented-tile::before {
content: '';
position: absolute;
z-index: 2;
display: block;
inset-block-start: 0;
inset-inline: 0;
border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
border-block-start-width: var(--rh-border-width-lg, 3px);
border-block-start-style: solid;
pointer-events: none;
}<rh-context-demo>
<rh-tile-group>
<rh-tile class="accented-tile">
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
<rh-tile class="accented-tile">
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
<rh-tile class="accented-tile">
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
</rh-tile-group>
</rh-context-demo>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<TileGroup>
<Tile className="accented-tile">
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
<Tile className="accented-tile">
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
<Tile className="accented-tile">
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
</TileGroup>
</ContextDemo>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Checkable
Checkable tiles acting as standalone checkboxes in unchecked, checked, and disabled states.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
width: 320px;
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-2xl, 32px);
}<rh-tile checkable="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile checkable="" checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile checkable="" bleed="" disabled="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile checkable>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile checkable checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile checkable bleed disabled>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Color Context
Tiles in all variants across light and dark color contexts.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile-group.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';.wrap {
margin-block-end: var(--rh-space-6xl, 96px);
}
.layout {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
}
h2 {
max-width: none;
width: 100%;
}
rh-tile {
flex: 0 0 calc(10 * var(--rh-length-2xl, 32px));
}
rh-tile-group {
margin-block-start: var(--rh-space-2xl, 32px);
}<rh-context-demo>
<div class="wrap layout">
<h2>Basic</h2>
<rh-tile>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile>
<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>
</div>
<div class="wrap layout">
<h2>Full-width images</h2>
<rh-tile bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 170">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<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>
</div>
<div class="wrap layout">
<h2>Desaturated heading</h2>
<rh-tile desaturated="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<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>
</div>
<div class="wrap layout">
<h2>Disabled</h2>
<rh-tile disabled="">
<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>
</div>
<div class="wrap layout">
<h2 id="compact">Compact</h2>
<rh-tile compact="">
<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>
<rh-tile compact="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<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>
<rh-tile compact="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<h2 slot="headline"><a href="#top">Link</a></h2>
</rh-tile>
<rh-tile compact="" bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<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>
<rh-tile compact="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile compact="" bleed="">
<a href="#top" slot="image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
</a>
</rh-tile>
</div>
<div class="wrap layout">
<h2>Checkboxes</h2>
<rh-tile checkable="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile checkable="" checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile checkable="" bleed="" disabled="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</div>
<div class="wrap">
<h2>Tile Group</h2>
<rh-tile-group>
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<div slot="title">Title</div>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
</div>
<div class="wrap">
<h2>Tile Group, Disabled</h2>
<rh-tile-group disabled="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
</div>
<div class="wrap">
<h2>Tile Group, Radio</h2>
<rh-tile-group radio="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
</div>
<div class="wrap">
<h2>Tile Group, Radio, Disabled</h2>
<rh-tile-group radio="" disabled="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
</div>
</rh-context-demo>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<div className="wrap layout">
<h2>Basic</h2>
<Tile>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile>
<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>
</Tile>
</div>
<div className="wrap layout">
<h2>Full-width images</h2>
<Tile bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 170">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<Icon slot="icon" set="standard" icon="cloud-automation" />
<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>
</Tile>
</div>
<div className="wrap layout">
<h2>Desaturated heading</h2>
<Tile desaturated>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<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>
</Tile>
</div>
<div className="wrap layout">
<h2>Disabled</h2>
<Tile disabled>
<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>
</Tile>
</div>
<div className="wrap layout">
<h2 id="compact">Compact</h2>
<Tile compact>
<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>
</Tile>
<Tile compact>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<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>
</Tile>
<Tile compact>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<h2 slot="headline"><a href="#top">Link</a></h2>
</Tile>
<Tile compact bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<Icon slot="icon" set="standard" icon="cloud-automation" />
<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>
</Tile>
<Tile compact>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile compact bleed>
<a href="#top" slot="image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
</a>
</Tile>
</div>
<div className="wrap layout">
<h2>Checkboxes</h2>
<Tile checkable>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile checkable checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile checkable bleed disabled>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</div>
<div className="wrap">
<h2>Tile Group</h2>
<TileGroup>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<div slot="title">Title</div>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
</div>
<div className="wrap">
<h2>Tile Group, Disabled</h2>
<TileGroup disabled>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
</div>
<div className="wrap">
<h2>Tile Group, Radio</h2>
<TileGroup radio>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
</div>
<div className="wrap">
<h2>Tile Group, Radio, Disabled</h2>
<TileGroup radio disabled>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
</div>
</ContextDemo>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Color Palettes
Tiles using each available color-palette value from darkest to lightest.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';
import '@rhds/elements/rh-cta/rh-cta.js';<rh-tile color-palette="darkest">
<h2 slot="headline">Darkest</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>
<rh-tile color-palette="darker">
<h2 slot="headline">Darker</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>
<rh-tile color-palette="dark">
<h2 slot="headline">Dark</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>
<rh-tile color-palette="light">
<h2 slot="headline">Light</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>
<rh-tile color-palette="lighter">
<h2 slot="headline">Lighter</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>
<rh-tile color-palette="lightest">
<h2 slot="headline">Lightest</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile color-palette="darkest">
<h2 slot="headline">Darkest</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
<Tile color-palette="darker">
<h2 slot="headline">Darker</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
<Tile color-palette="dark">
<h2 slot="headline">Dark</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
<Tile color-palette="light">
<h2 slot="headline">Light</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
<Tile color-palette="lighter">
<h2 slot="headline">Lighter</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
<Tile color-palette="lightest">
<h2 slot="headline">Lightest</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
);Compact Link With Fullwidth Image And Icon
Compact link tile with a full-width bleed image and an icon.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile rh-icon {
color: var(--rh-color-brand-red);
}<rh-tile compact="" bleed="">
<rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="320" height="120" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile compact bleed>
<Icon slot="icon" set="standard" icon="mug" />
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="320" height="120" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Compact Link With Icon
Compact link tile with a desaturated heading and a slotted icon.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile rh-icon {
color: var(--rh-color-brand-red);
}<rh-tile compact="" desaturated="">
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile compact desaturated>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<Icon slot="icon" set="standard" icon="mug" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Compact Link With Image And Icon
Compact link tile with both an image and a slotted icon.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile rh-icon {
color: var(--rh-color-brand-red);
}<rh-tile compact="">
<rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
<title>A placeholder image in a card header slot</title>
<rect x="0" y="0" width="320" height="120" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile compact>
<Icon slot="icon" set="standard" icon="mug" />
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
<title>A placeholder image in a card header slot</title>
<rect x="0" y="0" width="320" height="120" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Compact Link With Image
Compact link tile with a desaturated heading and image slot.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile rh-icon {
color: var(--rh-color-brand-red);
}<rh-tile compact="" desaturated="">
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile compact desaturated>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<Icon slot="icon" set="standard" icon="mug" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Compact
Compact tile variants with reduced padding, including text-only, icon, image, and full-width image configurations.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-md, 8px);
}<rh-tile compact="">
<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>
<rh-tile compact="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<title>Red Hat</title>
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<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>
<rh-tile compact="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<title>Red Hat</title>
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<h2 slot="headline"><a href="#top">Link</a></h2>
</rh-tile>
<rh-tile compact="" bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="300" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<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>
<rh-tile compact="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="296" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile compact="" bleed="">
<a href="#top" slot="image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="300" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
</a>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile compact>
<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>
</Tile>
<Tile compact>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<title>Red Hat</title>
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<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>
</Tile>
<Tile compact>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<title>Red Hat</title>
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<h2 slot="headline"><a href="#top">Link</a></h2>
</Tile>
<Tile compact bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="300" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<Icon slot="icon" set="standard" icon="cloud-automation" />
<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>
</Tile>
<Tile compact>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="296" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile compact bleed>
<a href="#top" slot="image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="300" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
</a>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Custom Props
Tiles with overridden CSS custom properties for border, background, interactive, and link colors.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';rh-context-demo::part(demo) {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
}
rh-tile {
--rh-tile-background-color: #f2f2f2;
--rh-tile-border-color: red;
--rh-tile-interactive-color: rebeccapurple;
--rh-tile-link-color: green;
}<rh-context-demo color-palette="light">
<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 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
<rh-tile>
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
</rh-context-demo>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo color-palette="light">
<Tile>
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
<Tile>
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
<Tile>
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
</ContextDemo>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Desaturated Heading Slotted Icon
Tile with desaturated heading color and a slotted SVG icon.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}<rh-tile desaturated="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile desaturated>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Desaturated Heading
Tile with desaturated heading color using the icon attribute.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}<rh-tile desaturated="" icon="cloud-automation">
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile desaturated icon="cloud-automation">
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Disabled
Disabled tile with muted colors and no pointer interaction.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}<rh-tile disabled="">
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile disabled>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Form Control
Tile groups used as form controls with radio and checkbox modes, submitting values via FormData.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tile/rh-tile-group.js';
const form = document.getElementById('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
const data = new FormData(form);
const mergedFormData = Array.from(data.entries())
.reduce((acc, [k, v]) => ({
...acc, [k]: k in acc ? [acc[k], v].flat() : v,
}), {});
form.output.value = JSON.stringify(mergedFormData, null, 2);
});<form id="form">
<rh-tile-group radio="">
<rh-tile name="radio" value="1"><span slot="headline">Radio 1</span></rh-tile>
<rh-tile name="radio" value="2"><span slot="headline">Radio 2</span></rh-tile>
</rh-tile-group>
<rh-tile-group checkable="">
<rh-tile name="check" value="1"><span slot="headline">Check 1</span></rh-tile>
<rh-tile name="check" value="2"><span slot="headline">Check 2</span></rh-tile>
</rh-tile-group>
<rh-button type="submit">Submit</rh-button>
<output name="output"></output>
</form>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<form id="form">
<TileGroup radio>
<Tile name="radio" value="1"><span slot="headline">Radio 1</span></Tile>
<Tile name="radio" value="2"><span slot="headline">Radio 2</span></Tile>
</TileGroup>
<TileGroup checkable>
<Tile name="check" value="1"><span slot="headline">Check 1</span></Tile>
<Tile name="check" value="2"><span slot="headline">Check 2</span></Tile>
</TileGroup>
<Button type="submit">Submit</Button>
<output name="output" />
</form>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Full Width Images
Tiles with full-width (bleed) images that extend to the tile edges.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';
import '@rhds/elements/rh-icon/rh-icon.js';<rh-tile bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" width="100%">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 170" width="100%">
<title>300 X 170 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<rh-icon slot="headline" set="standard" icon="cloud-automation"></rh-icon>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" width="100%">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 170" width="100%">
<title>300 X 170 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<Icon slot="headline" set="standard" icon="cloud-automation" />
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Icon With Full Width Image
Tiles with both a full-width bleed image and an icon.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
width: 300px;
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-md, 8px);
}<rh-tile bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile bleed="">
<rh-icon slot="icon" icon="cloud-automation"></rh-icon>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile bleed="" icon="cloud-automation">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile bleed>
<Icon slot="icon" icon="cloud-automation" />
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile bleed icon="cloud-automation">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Icon With Image
Tiles with both an image and an icon displayed together.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-md, 8px);
}<rh-tile>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile icon="cloud-automation">
<rh-icon slot="icon" icon="cloud-automation"></rh-icon>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile icon="cloud-automation">
<Icon slot="icon" icon="cloud-automation" />
<svg slot="image" xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Icon
Tiles with icons via slotted rh-icon, the icon attribute, and slotted SVG.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-md, 8px);
}<rh-tile>
<rh-icon slot="icon" icon="cloud-automation"></rh-icon>
<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>
<rh-tile icon="cloud-automation">
<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>
<rh-tile>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile>
<Icon slot="icon" icon="cloud-automation" />
<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>
</Tile>
<Tile icon="cloud-automation">
<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>
</Tile>
<Tile>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);In Flex Container
Tiles placed in a flex container, showing layout flexibility.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-md, 8px);
}<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>
<rh-tile>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<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>
</Tile>
<Tile>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Link Types
Tiles with private (padlock icon) and external (external-link icon) link types.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
width: 375px;
margin: var(--rh-space-md, 8px);
}<rh-tile link="private" icon="bank-safe" icon-set="standard">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#super-secret-section">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile link="external" icon="globe-abstract" icon-set="standard">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#super-public-section">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile link="private" icon="bank-safe" icon-set="standard">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#super-secret-section">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile link="external" icon="globe-abstract" icon-set="standard">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#super-public-section">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Tile Group Disabled
Disabled tile group where all child tiles are non-interactive.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile-group.js';<rh-tile-group disabled="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<TileGroup disabled>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Tile Group Radio Disabled
Disabled radio tile group where all tiles are non-interactive.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile-group.js';<rh-tile-group radio="" disabled="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<TileGroup radio disabled>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Tile Group Radio
Tile group with radio-style single-selection, one tile pre-checked.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile-group.js';<rh-tile-group radio="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<TileGroup radio>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Tile Group
Tile group with checkbox-style multi-selection, one tile pre-checked.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile-group.js';<rh-tile-group>
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<div slot="title">Title</div>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<TileGroup>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<div slot="title">Title</div>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Without Footer Content
Tiles without footer content, including headline-only variants.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rh-space-xl);
padding: var(--rh-space-xl);
}<section class="grid">
<rh-tile>
<h2 slot="headline"><a href="#top">Tile w/ no footer</a></h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati
soluta sapiente?
</rh-tile>
<rh-tile>
<h2 slot="headline"><a href="#top">Tile w/ no footer</a></h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati
soluta sapiente?
</rh-tile>
<rh-tile>
<h2 slot="headline"><a href="#top">Tile w/ only headline</a></h2>
</rh-tile>
<rh-tile>
<h2 slot="headline"><a href="#top">Tile w/ only headline</a></h2>
</rh-tile>
</section>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<section className="grid">
<Tile>
<h2 slot="headline"><a href="#top">Tile w/ no footer</a></h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati
soluta sapiente?
</Tile>
<Tile>
<h2 slot="headline"><a href="#top">Tile w/ no footer</a></h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati
soluta sapiente?
</Tile>
<Tile>
<h2 slot="headline"><a href="#top">Tile w/ only headline</a></h2>
</Tile>
<Tile>
<h2 slot="headline"><a href="#top">Tile w/ only headline</a></h2>
</Tile>
</section>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Tile
Default link tile with image, title, headline, body text, and footer.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Accented Tiles
Tiles with a custom CSS accent border on top, shown across color contexts.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';rh-context-demo::part(demo) {
display: flex;
align-items: top;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
}
rh-tile-group {
display: flex;
align-items: top;
flex-wrap: wrap;
column-gap: var(--rh-space-2xl, 32px);
row-gap: var(--rh-space-2xl, 32px);
margin-inline-end: var(--rh-space-md, 8px);
}
rh-tile {
width: 320px;
}
rh-tile.accented-tile {
position: relative;
overflow: hidden;
border-radius: var(--rh-border-radius-default, 3px);
}
rh-tile.accented-tile::before {
content: '';
position: absolute;
z-index: 2;
display: block;
inset-block-start: 0;
inset-inline: 0;
border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
border-block-start-width: var(--rh-border-width-lg, 3px);
border-block-start-style: solid;
pointer-events: none;
}<rh-context-demo>
<rh-tile-group>
<rh-tile class="accented-tile">
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
<rh-tile class="accented-tile">
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
<rh-tile class="accented-tile">
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
</rh-tile-group>
</rh-context-demo>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<TileGroup>
<Tile className="accented-tile">
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
<Tile className="accented-tile">
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
<Tile className="accented-tile">
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
</TileGroup>
</ContextDemo>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Checkable
Checkable tiles acting as standalone checkboxes in unchecked, checked, and disabled states.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
width: 320px;
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-2xl, 32px);
}<rh-tile checkable="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile checkable="" checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile checkable="" bleed="" disabled="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile checkable>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile checkable checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile checkable bleed disabled>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Color Context
Tiles in all variants across light and dark color contexts.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile-group.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';.wrap {
margin-block-end: var(--rh-space-6xl, 96px);
}
.layout {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
}
h2 {
max-width: none;
width: 100%;
}
rh-tile {
flex: 0 0 calc(10 * var(--rh-length-2xl, 32px));
}
rh-tile-group {
margin-block-start: var(--rh-space-2xl, 32px);
}<rh-context-demo>
<div class="wrap layout">
<h2>Basic</h2>
<rh-tile>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile>
<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>
</div>
<div class="wrap layout">
<h2>Full-width images</h2>
<rh-tile bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 170">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<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>
</div>
<div class="wrap layout">
<h2>Desaturated heading</h2>
<rh-tile desaturated="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<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>
</div>
<div class="wrap layout">
<h2>Disabled</h2>
<rh-tile disabled="">
<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>
</div>
<div class="wrap layout">
<h2 id="compact">Compact</h2>
<rh-tile compact="">
<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>
<rh-tile compact="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<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>
<rh-tile compact="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<h2 slot="headline"><a href="#top">Link</a></h2>
</rh-tile>
<rh-tile compact="" bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<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>
<rh-tile compact="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile compact="" bleed="">
<a href="#top" slot="image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
</a>
</rh-tile>
</div>
<div class="wrap layout">
<h2>Checkboxes</h2>
<rh-tile checkable="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile checkable="" checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile checkable="" bleed="" disabled="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</div>
<div class="wrap">
<h2>Tile Group</h2>
<rh-tile-group>
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<div slot="title">Title</div>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
</div>
<div class="wrap">
<h2>Tile Group, Disabled</h2>
<rh-tile-group disabled="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
</div>
<div class="wrap">
<h2>Tile Group, Radio</h2>
<rh-tile-group radio="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
</div>
<div class="wrap">
<h2>Tile Group, Radio, Disabled</h2>
<rh-tile-group radio="" disabled="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
</div>
</rh-context-demo>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<div className="wrap layout">
<h2>Basic</h2>
<Tile>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile>
<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>
</Tile>
</div>
<div className="wrap layout">
<h2>Full-width images</h2>
<Tile bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 170">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<Icon slot="icon" set="standard" icon="cloud-automation" />
<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>
</Tile>
</div>
<div className="wrap layout">
<h2>Desaturated heading</h2>
<Tile desaturated>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<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>
</Tile>
</div>
<div className="wrap layout">
<h2>Disabled</h2>
<Tile disabled>
<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>
</Tile>
</div>
<div className="wrap layout">
<h2 id="compact">Compact</h2>
<Tile compact>
<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>
</Tile>
<Tile compact>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<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>
</Tile>
<Tile compact>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<h2 slot="headline"><a href="#top">Link</a></h2>
</Tile>
<Tile compact bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<Icon slot="icon" set="standard" icon="cloud-automation" />
<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>
</Tile>
<Tile compact>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile compact bleed>
<a href="#top" slot="image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="100%" height="100%" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
</a>
</Tile>
</div>
<div className="wrap layout">
<h2>Checkboxes</h2>
<Tile checkable>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile checkable checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile checkable bleed disabled>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</div>
<div className="wrap">
<h2>Tile Group</h2>
<TileGroup>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<div slot="title">Title</div>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
</div>
<div className="wrap">
<h2>Tile Group, Disabled</h2>
<TileGroup disabled>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
</div>
<div className="wrap">
<h2>Tile Group, Radio</h2>
<TileGroup radio>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
</div>
<div className="wrap">
<h2>Tile Group, Radio, Disabled</h2>
<TileGroup radio disabled>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
</div>
</ContextDemo>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Color Palettes
Tiles using each available color-palette value from darkest to lightest.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';
import '@rhds/elements/rh-cta/rh-cta.js';<rh-tile color-palette="darkest">
<h2 slot="headline">Darkest</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>
<rh-tile color-palette="darker">
<h2 slot="headline">Darker</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>
<rh-tile color-palette="dark">
<h2 slot="headline">Dark</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>
<rh-tile color-palette="light">
<h2 slot="headline">Light</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>
<rh-tile color-palette="lighter">
<h2 slot="headline">Lighter</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>
<rh-tile color-palette="lightest">
<h2 slot="headline">Lightest</h2>
<rh-cta href="#">Call to Action</rh-cta>
</rh-tile>import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile color-palette="darkest">
<h2 slot="headline">Darkest</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
<Tile color-palette="darker">
<h2 slot="headline">Darker</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
<Tile color-palette="dark">
<h2 slot="headline">Dark</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
<Tile color-palette="light">
<h2 slot="headline">Light</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
<Tile color-palette="lighter">
<h2 slot="headline">Lighter</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
<Tile color-palette="lightest">
<h2 slot="headline">Lightest</h2>
<Cta href="#">Call to Action</Cta>
</Tile>
);Compact Link With Fullwidth Image And Icon
Compact link tile with a full-width bleed image and an icon.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile rh-icon {
color: var(--rh-color-brand-red);
}<rh-tile compact="" bleed="">
<rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="320" height="120" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile compact bleed>
<Icon slot="icon" set="standard" icon="mug" />
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="320" height="120" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Compact Link With Icon
Compact link tile with a desaturated heading and a slotted icon.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile rh-icon {
color: var(--rh-color-brand-red);
}<rh-tile compact="" desaturated="">
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile compact desaturated>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<Icon slot="icon" set="standard" icon="mug" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Compact Link With Image And Icon
Compact link tile with both an image and a slotted icon.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile rh-icon {
color: var(--rh-color-brand-red);
}<rh-tile compact="">
<rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
<title>A placeholder image in a card header slot</title>
<rect x="0" y="0" width="320" height="120" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile compact>
<Icon slot="icon" set="standard" icon="mug" />
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
<title>A placeholder image in a card header slot</title>
<rect x="0" y="0" width="320" height="120" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Compact Link With Image
Compact link tile with a desaturated heading and image slot.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile rh-icon {
color: var(--rh-color-brand-red);
}<rh-tile compact="" desaturated="">
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<rh-icon slot="icon" set="standard" icon="mug"></rh-icon>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile compact desaturated>
<h2 slot="headline"><a href="#top">Compact link tile</a></h2>
<Icon slot="icon" set="standard" icon="mug" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.</p>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Compact
Compact tile variants with reduced padding, including text-only, icon, image, and full-width image configurations.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-md, 8px);
}<rh-tile compact="">
<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>
<rh-tile compact="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<title>Red Hat</title>
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<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>
<rh-tile compact="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<title>Red Hat</title>
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<h2 slot="headline"><a href="#top">Link</a></h2>
</rh-tile>
<rh-tile compact="" bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="300" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<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>
<rh-tile compact="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="296" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile compact="" bleed="">
<a href="#top" slot="image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="300" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
</a>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile compact>
<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>
</Tile>
<Tile compact>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<title>Red Hat</title>
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<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>
</Tile>
<Tile compact>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<title>Red Hat</title>
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<h2 slot="headline"><a href="#top">Link</a></h2>
</Tile>
<Tile compact bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="300" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<Icon slot="icon" set="standard" icon="cloud-automation" />
<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>
</Tile>
<Tile compact>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="296" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile compact bleed>
<a href="#top" slot="image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 50">
<title>A placeholder image in a tile image slot</title>
<rect x="0" y="0" width="300" height="50" fill="var(--rh-color-interactive-primary-default)" fill-opacity="0.2" stroke="var(--rh-color-interactive-primary-hover)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
</a>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Custom Props
Tiles with overridden CSS custom properties for border, background, interactive, and link colors.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';rh-context-demo::part(demo) {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
}
rh-tile {
--rh-tile-background-color: #f2f2f2;
--rh-tile-border-color: red;
--rh-tile-interactive-color: rebeccapurple;
--rh-tile-link-color: green;
}<rh-context-demo color-palette="light">
<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 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
<rh-tile>
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>
</rh-context-demo>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo color-palette="light">
<Tile>
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
<Tile>
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
<Tile>
<h2 slot="headline"><a href="#top">Link 2</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Tile>
</ContextDemo>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Desaturated Heading Slotted Icon
Tile with desaturated heading color and a slotted SVG icon.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}<rh-tile desaturated="">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z"></path>
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00"></path>
</svg>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile desaturated>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M40.3 20.3c.1.3.1.6.1.9 0 3.7-4.5 4.4-7.7 4.4-12.2 0-21.2-7.6-21.2-9.9 0-.2 0-.3.1-.5l-1 2.3c-.2.6-.4 1.2-.4 1.8 0 4.5 10.2 11.4 21.9 11.4 5.2 0 9.1-1.9 9.1-5.4-.1-.9-.2-1.7-.4-2.5l-.5-2.5z" />
<path d="M32.7 25.5c3.1 0 7.7-.6 7.7-4.4 0-.3 0-.6-.1-.9l-1.9-8.1c-.4-1.8-.8-2.6-3.9-4.2-2.4-1.2-7.7-3.3-9.3-3.3-1.5 0-1.9 1.9-3.6 1.9s-2.9-1.4-4.5-1.4c-1.5 0-2.5 1-3.2 3.1 0 0-2.1 5.9-2.4 6.8 0 .2-.1.3-.1.5 0 2.5 9.1 10 21.3 10m8.1-2.8c.2.8.4 1.7.4 2.5 0 3.5-3.9 5.4-9.1 5.4-11.7 0-21.9-6.8-21.9-11.4 0-.6.1-1.3.4-1.8-4.2.2-9.6 1-9.6 5.8 0 7.9 18.6 17.6 33.4 17.6 11.3 0 14.2-5.1 14.2-9.2-.1-3.1-2.8-6.8-7.8-8.9" fill="#e00" />
</svg>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Desaturated Heading
Tile with desaturated heading color using the icon attribute.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}<rh-tile desaturated="" icon="cloud-automation">
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile desaturated icon="cloud-automation">
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Disabled
Disabled tile with muted colors and no pointer interaction.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}<rh-tile disabled="">
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile disabled>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Form Control
Tile groups used as form controls with radio and checkbox modes, submitting values via FormData.
Edit element properties
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tile/rh-tile-group.js';
const form = document.getElementById('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
const data = new FormData(form);
const mergedFormData = Array.from(data.entries())
.reduce((acc, [k, v]) => ({
...acc, [k]: k in acc ? [acc[k], v].flat() : v,
}), {});
form.output.value = JSON.stringify(mergedFormData, null, 2);
});<form id="form">
<rh-tile-group radio="">
<rh-tile name="radio" value="1"><span slot="headline">Radio 1</span></rh-tile>
<rh-tile name="radio" value="2"><span slot="headline">Radio 2</span></rh-tile>
</rh-tile-group>
<rh-tile-group checkable="">
<rh-tile name="check" value="1"><span slot="headline">Check 1</span></rh-tile>
<rh-tile name="check" value="2"><span slot="headline">Check 2</span></rh-tile>
</rh-tile-group>
<rh-button type="submit">Submit</rh-button>
<output name="output"></output>
</form>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<form id="form">
<TileGroup radio>
<Tile name="radio" value="1"><span slot="headline">Radio 1</span></Tile>
<Tile name="radio" value="2"><span slot="headline">Radio 2</span></Tile>
</TileGroup>
<TileGroup checkable>
<Tile name="check" value="1"><span slot="headline">Check 1</span></Tile>
<Tile name="check" value="2"><span slot="headline">Check 2</span></Tile>
</TileGroup>
<Button type="submit">Submit</Button>
<output name="output" />
</form>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Full Width Images
Tiles with full-width (bleed) images that extend to the tile edges.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';
import '@rhds/elements/rh-icon/rh-icon.js';<rh-tile bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" width="100%">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 170" width="100%">
<title>300 X 170 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<rh-icon slot="headline" set="standard" icon="cloud-automation"></rh-icon>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" width="100%">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 170" width="100%">
<title>300 X 170 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<Icon slot="headline" set="standard" icon="cloud-automation" />
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Icon With Full Width Image
Tiles with both a full-width bleed image and an icon.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
width: 300px;
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-md, 8px);
}<rh-tile bleed="">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile bleed="">
<rh-icon slot="icon" icon="cloud-automation"></rh-icon>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile bleed="" icon="cloud-automation">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile bleed>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile bleed>
<Icon slot="icon" icon="cloud-automation" />
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile bleed icon="cloud-automation">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Icon With Image
Tiles with both an image and an icon displayed together.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-md, 8px);
}<rh-tile>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<rh-tile icon="cloud-automation">
<rh-icon slot="icon" icon="cloud-automation"></rh-icon>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile>
<svg slot="image" xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<Tile icon="cloud-automation">
<Icon slot="icon" icon="cloud-automation" />
<svg slot="image" xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<title>300 X 200 placeholder image</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Icon
Tiles with icons via slotted rh-icon, the icon attribute, and slotted SVG.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-md, 8px);
}<rh-tile>
<rh-icon slot="icon" icon="cloud-automation"></rh-icon>
<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>
<rh-tile icon="cloud-automation">
<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>
<rh-tile>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1"></rect>
</svg>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile>
<Icon slot="icon" icon="cloud-automation" />
<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>
</Tile>
<Tile icon="cloud-automation">
<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>
</Tile>
<Tile>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>A placeholder image in a tile icon slot</title>
<rect x="0" y="0" width="99%" height="99%" fill="none" stroke="var(--rh-color-icon-primary)" stroke-width="1" stroke-dasharray="1 1" />
</svg>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);In Flex Container
Tiles placed in a flex container, showing layout flexibility.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
margin-block-end: var(--rh-space-md, 8px);
}<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>
<rh-tile>
<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>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<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>
</Tile>
<Tile>
<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>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Link Types
Tiles with private (padlock icon) and external (external-link icon) link types.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';rh-tile {
width: 375px;
margin: var(--rh-space-md, 8px);
}<rh-tile link="private" icon="bank-safe" icon-set="standard">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#super-secret-section">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile link="external" icon="globe-abstract" icon-set="standard">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#super-public-section">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tile link="private" icon="bank-safe" icon-set="standard">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#super-secret-section">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile link="external" icon="globe-abstract" icon-set="standard">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#super-public-section">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Tile Group Disabled
Disabled tile group where all child tiles are non-interactive.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile-group.js';<rh-tile-group disabled="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<TileGroup disabled>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Tile Group Radio Disabled
Disabled radio tile group where all tiles are non-interactive.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile-group.js';<rh-tile-group radio="" disabled="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<TileGroup radio disabled>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Tile Group Radio
Tile group with radio-style single-selection, one tile pre-checked.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile-group.js';<rh-tile-group radio="">
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<TileGroup radio>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Tile Group
Tile group with checkbox-style multi-selection, one tile pre-checked.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile-group.js';<rh-tile-group>
<rh-tile checked="">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<rh-tile>
<div slot="title">Title</div>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
</rh-tile-group>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
import { TileGroup } from "@rhds/elements/react/rh-tile-group/rh-tile-group.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<TileGroup>
<Tile checked>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
<Tile>
<div slot="title">Title</div>
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</Tile>
</TileGroup>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Without Footer Content
Tiles without footer content, including headline-only variants.
Edit element properties
import '@rhds/elements/rh-tile/rh-tile.js';.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rh-space-xl);
padding: var(--rh-space-xl);
}<section class="grid">
<rh-tile>
<h2 slot="headline"><a href="#top">Tile w/ no footer</a></h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati
soluta sapiente?
</rh-tile>
<rh-tile>
<h2 slot="headline"><a href="#top">Tile w/ no footer</a></h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati
soluta sapiente?
</rh-tile>
<rh-tile>
<h2 slot="headline"><a href="#top">Tile w/ only headline</a></h2>
</rh-tile>
<rh-tile>
<h2 slot="headline"><a href="#top">Tile w/ only headline</a></h2>
</rh-tile>
</section>
<link rel="stylesheet" href="../rh-tile-lightdom.css">import { Tile } from "@rhds/elements/react/rh-tile/rh-tile.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<section className="grid">
<Tile>
<h2 slot="headline"><a href="#top">Tile w/ no footer</a></h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati
soluta sapiente?
</Tile>
<Tile>
<h2 slot="headline"><a href="#top">Tile w/ no footer</a></h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati
soluta sapiente?
</Tile>
<Tile>
<h2 slot="headline"><a href="#top">Tile w/ only headline</a></h2>
</Tile>
<Tile>
<h2 slot="headline"><a href="#top">Tile w/ only headline</a></h2>
</Tile>
</section>
<link rel="stylesheet" href="../rh-tile-lightdom.css" />
);Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
