Tile

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" />
);

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 { 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 = () => (
  <rh-context-demo>
    <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>
  </rh-context-demo>
  <link rel="stylesheet" href="../rh-tile-lightdom.css" />
);

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" />
);

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 { 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 = () => (
  <rh-context-demo>
    <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>
  </rh-context-demo>
  <link rel="stylesheet" href="../rh-tile-lightdom.css" />
);

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>
);

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" />
);

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" />
);

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" />
);

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" />
);

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">