Project Felt
On this page
On this page
Try it out
Preview the Project Felt theme on the elements below. Toggle the switch to compare with the default styles.
Demos
Borderless (Default)
Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.
Panel content for item three.
Borderless — Large
Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.
Bordered
Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.
Panel content for item three.
Bordered — Large
Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h3>Borderless (Default)</h3>
<div class="example-row">
<rh-accordion>
<rh-accordion-header>Accordion item one</rh-accordion-header>
<rh-accordion-panel>
<p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</rh-accordion-panel>
<rh-accordion-header expanded="">Accordion item two</rh-accordion-header>
<rh-accordion-panel expanded="">
<p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</rh-accordion-panel>
<rh-accordion-header>Accordion item three</rh-accordion-header>
<rh-accordion-panel>
<p>Panel content for item three.</p>
</rh-accordion-panel>
</rh-accordion>
</div>
<h3>Borderless — Large</h3>
<div class="example-row">
<rh-accordion large="">
<rh-accordion-header>Accordion item one</rh-accordion-header>
<rh-accordion-panel>
<p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</rh-accordion-panel>
<rh-accordion-header expanded="">Accordion item two</rh-accordion-header>
<rh-accordion-panel expanded="">
<p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</rh-accordion-panel>
</rh-accordion>
</div>
<h3>Bordered</h3>
<div class="example-row">
<rh-accordion class="bordered">
<rh-accordion-header>Accordion item one</rh-accordion-header>
<rh-accordion-panel>
<p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</rh-accordion-panel>
<rh-accordion-header expanded="">Accordion item two</rh-accordion-header>
<rh-accordion-panel expanded="">
<p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</rh-accordion-panel>
<rh-accordion-header>Accordion item three</rh-accordion-header>
<rh-accordion-panel>
<p>Panel content for item three.</p>
</rh-accordion-panel>
</rh-accordion>
</div>
<h3>Bordered — Large</h3>
<div class="example-row">
<rh-accordion large="" class="bordered">
<rh-accordion-header>Accordion item one</rh-accordion-header>
<rh-accordion-panel>
<p>Panel content for item one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</rh-accordion-panel>
<rh-accordion-header expanded="">Accordion item two</rh-accordion-header>
<rh-accordion-panel expanded="">
<p>Panel content for item two. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</rh-accordion-panel>
</rh-accordion>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}Accordion
Inline alerts
Default alert
This is the default alert description.
Success alert
This is a success alert description.
Warning alert
This is a warning alert description.
Danger alert
This is a danger alert description.
Info alert
This is an info alert description.
Dismissable alerts
Default alert
This is the default alert description.
Success alert
This is a success alert description.
Warning alert
This is a warning alert description.
Danger alert
This is a danger alert description.
Info alert
This is an info alert description.
Toast alerts
Default toast
This is a toast alert description.
Success toast
This is a success toast description.
Danger toast
This is a danger toast description.
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h3>Inline alerts</h3>
<div class="example-row example-flex">
<rh-alert ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Default alert</h4>
<p>This is the default alert description.</p>
</rh-alert>
<rh-alert state="success" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Success alert</h4>
<p>This is a success alert description.</p>
</rh-alert>
<rh-alert state="warning" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Warning alert</h4>
<p>This is a warning alert description.</p>
</rh-alert>
<rh-alert state="danger" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Danger alert</h4>
<p>This is a danger alert description.</p>
</rh-alert>
<rh-alert state="info" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Info alert</h4>
<p>This is an info alert description.</p>
</rh-alert>
</div>
<h3>Dismissable alerts</h3>
<div class="example-row example-flex">
<rh-alert dismissable="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Default alert</h4>
<p>This is the default alert description.</p>
</rh-alert>
<rh-alert state="success" dismissable="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Success alert</h4>
<p>This is a success alert description.</p>
</rh-alert>
<rh-alert state="warning" dismissable="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Warning alert</h4>
<p>This is a warning alert description.</p>
</rh-alert>
<rh-alert state="danger" dismissable="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Danger alert</h4>
<p>This is a danger alert description.</p>
</rh-alert>
<rh-alert state="info" dismissable="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Info alert</h4>
<p>This is an info alert description.</p>
</rh-alert>
</div>
<h3>Toast alerts</h3>
<div class="example-row example-flex">
<rh-alert variant="toast" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Default toast</h4>
<p>This is a toast alert description.</p>
</rh-alert>
<rh-alert variant="toast" state="success" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Success toast</h4>
<p>This is a success toast description.</p>
</rh-alert>
<rh-alert variant="toast" state="danger" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header">
<h4 slot="header">Danger toast</h4>
<p>This is a danger toast description.</p>
</rh-alert>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}
.example-flex {
display: flex;
flex-direction: column;
gap: var(--rh-space-lg, 16px);
}Alerts
Hover, focus, or click the button to see its interactive states.
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<div class="example-row">
<p>Hover, focus, or click the button to see its interactive states.</p>
<rh-back-to-top visible="always" href="#top">Back to top</rh-back-to-top>
</div>.example-row {
/* `transform` establishes a new containing block for the fixed-position
`rh-back-to-top`, so it sticks to this demo box instead of escaping
to the real page viewport (where it would collide with the docs
site's own back-to-top button). */
transform: translate(0);
margin-block: var(--rh-space-2xl, 32px);
min-block-size: 8rem;
}import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';Back to top
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<div class="example-row example-flex">
<rh-badge number="7">7</rh-badge>
<rh-badge state="info" number="24">24</rh-badge>
<rh-badge state="success" number="12">12</rh-badge>
<rh-badge state="caution" number="3">3</rh-badge>
<rh-badge state="warning" number="5">5</rh-badge>
<rh-badge state="danger" number="99">99</rh-badge>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}
.example-flex {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-lg, 16px);
align-items: center;
}Badge
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css">
<div class="example-row">
<rh-breadcrumb>
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Section</a></li>
<li><a href="#">Subsection</a></li>
<li><a href="#" aria-current="page">Current page</a></li>
</ol>
</rh-breadcrumb>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}Breadcrumb
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<div class="example-row example-flex">
<rh-button>Primary</rh-button>
<rh-button variant="secondary">Secondary</rh-button>
<rh-button variant="tertiary">Tertiary</rh-button>
<rh-button variant="link">Link</rh-button>
<rh-button icon="ellipsis-vertical-fill" variant="icon" accessible-label="Menu"></rh-button>
<rh-button icon="close" icon-set="microns" variant="icon" accessible-label="Close"></rh-button>
</div>
<div class="example-row example-flex">
<rh-button danger="">Primary danger</rh-button>
<rh-button variant="secondary" danger="">Secondary danger</rh-button>
<rh-button variant="tertiary" danger="">Tertiary danger</rh-button>
<rh-button variant="link" danger="">Link danger</rh-button>
</div>
<div class="example-row example-flex">
<rh-button icon="add-circle">Primary</rh-button>
<rh-button icon="add-circle" variant="secondary">Secondary</rh-button>
<rh-button icon="add-circle" variant="tertiary">Tertiary</rh-button>
<rh-button icon="add-circle" variant="link">Link</rh-button>
</div>
<div class="example-row example-flex">
<rh-button icon="warning-fill" danger="">Primary</rh-button>
<rh-button icon="warning-fill" variant="secondary" danger="">Secondary</rh-button>
<rh-button icon="warning-fill" variant="tertiary" danger="">Tertiary</rh-button>
<rh-button icon="warning-fill" variant="link" danger="">Link</rh-button>
</div>
<div class="example-row example-flex">
<rh-button disabled="">Disabled</rh-button>
<rh-button disabled="" variant="secondary">Disabled</rh-button>
<rh-button disabled="" variant="tertiary">Disabled</rh-button>
<rh-button disabled="" variant="link">Disabled</rh-button>
<rh-button disabled="" icon="ellipsis-vertical-fill" variant="icon" accessible-label="Menu"></rh-button>
<rh-button disabled="" icon="close" icon-set="microns" variant="icon" accessible-label="Close"></rh-button>
</div>
<div class="example-row example-flex">
<rh-button compact="">Compact 1º</rh-button>
<rh-button compact="" variant="secondary">Compact 2º</rh-button>
<rh-button compact="" variant="tertiary">Compact 3º</rh-button>
<rh-button compact="" variant="link">Compact link</rh-button>
<rh-button compact="" icon="ellipsis-vertical-fill" variant="icon" accessible-label="Menu"></rh-button>
<rh-button compact="" icon="close" icon-set="microns" variant="icon" accessible-label="Close"></rh-button>
</div>
<div class="example-row example-flex">
<rh-button compact="" danger="">Compact 1º danger</rh-button>
<rh-button compact="" variant="secondary" danger="">Compact 2º danger</rh-button>
<rh-button compact="" variant="link" danger="">Compact link danger</rh-button>
</div>
<div class="example-row example-flex">
<rh-button variant="close" accessible-label="Close"></rh-button>
<rh-button variant="play">Play</rh-button>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}Button
Default sizes
Compact
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h3>Default sizes</h3>
<div class="example-row example-flex">
<rh-cta variant="primary" href="#">Primary</rh-cta>
<rh-cta variant="secondary" href="#">Secondary</rh-cta>
<rh-cta variant="tertiary" href="#">Tertiary</rh-cta>
<rh-cta href="#">Default</rh-cta>
<rh-cta variant="brick" href="#">Brick</rh-cta>
</div>
<div class="example-row example-flex">
<rh-cta variant="primary" icon="play-circle" href="#">Primary</rh-cta>
<rh-cta variant="secondary" icon="play-circle" href="#">Secondary</rh-cta>
<rh-cta variant="tertiary" icon="play-circle" href="#">Tertiary</rh-cta>
<rh-cta icon="play-circle" href="#">Default</rh-cta>
<rh-cta icon="play-circle" variant="brick" href="#">Brick</rh-cta>
</div>
<h3>Compact</h3>
<div class="example-row example-flex">
<rh-cta variant="primary" compact="" href="#">Primary</rh-cta>
<rh-cta variant="secondary" compact="" href="#">Secondary</rh-cta>
<rh-cta variant="tertiary" compact="" href="#">Tertiary</rh-cta>
<rh-cta compact="" href="#">Default</rh-cta>
</div>
<div class="example-row example-flex">
<rh-cta variant="primary" compact="" icon="play-circle" href="#">Primary</rh-cta>
<rh-cta variant="secondary" compact="" icon="play-circle" href="#">Secondary</rh-cta>
<rh-cta variant="tertiary" compact="" icon="play-circle" href="#">Tertiary</rh-cta>
<rh-cta icon="play-circle" compact="" href="#">Default</rh-cta>
<rh-cta compact="" icon="play-circle" variant="brick" href="#">Brick</rh-cta>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}
.example-flex {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-lg, 16px);
align-items: center;
}Call to action
Default
Example card - default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
Example card - secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
Example card - plain
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
Compact
Compact card - default
Tighter padding for compact layouts.
Compact card - secondary
Tighter padding for compact layouts.
Compact card - plain
Tighter padding for compact layouts.
Large
Large card - default
Extra padding for spacious layouts. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Large card - secondary
Extra padding for spacious layouts. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Large card - plain
Extra padding for spacious layouts. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<link rel="stylesheet" href="/styles/demo/styles.css" media="all">
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h3>Default</h3>
<div class="card-grid example-row">
<rh-card ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h4 slot="header">Example card - default</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<rh-cta href="#" slot="footer" variant="primary">Call to action</rh-cta>
</rh-card>
<rh-card variant="secondary" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h4 slot="header">Example card - secondary</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<rh-cta href="#" slot="footer">Call to action</rh-cta>
</rh-card>
<rh-card variant="plain" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h4 slot="header">Example card - plain</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<rh-cta href="#" slot="footer">Call to action</rh-cta>
</rh-card>
</div>
<h3>Compact</h3>
<div class="card-grid example-row">
<rh-card size="compact" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h4 slot="header">Compact card - default</h4>
<p>Tighter padding for compact layouts.</p>
<rh-cta href="#" slot="footer">Call to action</rh-cta>
</rh-card>
<rh-card size="compact" variant="secondary" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h4 slot="header">Compact card - secondary</h4>
<p>Tighter padding for compact layouts.</p>
<rh-cta href="#" slot="footer">Call to action</rh-cta>
</rh-card>
<rh-card size="compact" variant="plain" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h4 slot="header">Compact card - plain</h4>
<p>Tighter padding for compact layouts.</p>
<rh-cta href="#" slot="footer">Call to action</rh-cta>
</rh-card>
</div>
<h3>Large</h3>
<div class="card-grid example-row">
<rh-card size="large" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h4 slot="header">Large card - default</h4>
<p>Extra padding for spacious layouts. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<rh-cta href="#" slot="footer" variant="primary">Call to action</rh-cta>
</rh-card>
<rh-card size="large" variant="secondary" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h4 slot="header">Large card - secondary</h4>
<p>Extra padding for spacious layouts. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<rh-cta href="#" slot="footer">Call to action</rh-cta>
</rh-card>
<rh-card size="large" variant="plain" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h4 slot="header">Large card - plain</h4>
<p>Extra padding for spacious layouts. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<rh-cta href="#" slot="footer">Call to action</rh-cta>
</rh-card>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}
.card-grid {
display: flex;
gap: var(--rh-space-2xl, 32px);
rh-card {
height: auto;
}
}Card
Default (large)
Chip group large
Chip group small
Disabled
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h3>Default (large)</h3>
<div class="example-row example-flex">
<rh-chip>Chip</rh-chip>
<rh-chip>Another chip</rh-chip>
<rh-chip>Third chip</rh-chip>
</div>
<h3>Chip group large</h3>
<div class="example-row">
<rh-chip-group accessible-label="Chip group default">
<rh-chip>Small</rh-chip>
<rh-chip>Small</rh-chip>
<rh-chip>Small</rh-chip>
</rh-chip-group>
</div>
<h3>Chip group small</h3>
<div class="example-row">
<rh-chip-group size="sm" accessible-label="Chip group small">
<rh-chip>Small</rh-chip>
<rh-chip>Small</rh-chip>
<rh-chip>Small</rh-chip>
</rh-chip-group>
</div>
<h3>Disabled</h3>
<div class="example-row example-flex">
<rh-chip disabled="">Disabled chip</rh-chip>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}
.example-flex {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-lg, 16px);
align-items: center;
}Chips
Modal title
Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Modal title
Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Modal title
Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<link rel="stylesheet" href="/styles/demo/styles.css" media="all">
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<div class="example-row">
<rh-button id="dialog-trigger-sm">Open small dialog</rh-button>
<rh-button id="dialog-trigger-md">Open medium dialog</rh-button>
<rh-button id="dialog-trigger-lg">Open large dialog</rh-button>
<rh-button id="dialog-trigger-nh">Open no-header dialog</rh-button>
<rh-dialog trigger="dialog-trigger-sm" variant="small" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h3 slot="header">Modal title</h3>
<p>Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<rh-button slot="footer">Confirm</rh-button>
<rh-button slot="footer" variant="link">Cancel</rh-button>
</rh-dialog>
<rh-dialog trigger="dialog-trigger-md" variant="medium" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h3 slot="header">Modal title</h3>
<p>Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<rh-button slot="footer">Confirm</rh-button>
<rh-button slot="footer" variant="link">Cancel</rh-button>
</rh-dialog>
<rh-dialog trigger="dialog-trigger-lg" variant="large" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="header,footer">
<h3 slot="header">Modal title</h3>
<p>Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<rh-button slot="footer">Confirm</rh-button>
<rh-button slot="footer" variant="link">Cancel</rh-button>
</rh-dialog>
<rh-dialog trigger="dialog-trigger-nh" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="footer">
<p>Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<rh-button slot="footer">Confirm</rh-button>
<rh-button slot="footer" variant="link">Cancel</rh-button>
</rh-dialog>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}Dialog
Default
Collapsed disclosure
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expanded disclosure
Nulla vitae elit libero, a pharetra augue mollis interdum.
Compact
Collapsed compact disclosure
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expanded compact disclosure
Nulla vitae elit libero, a pharetra augue mollis interdum.
Borderless
Collapsed borderless disclosure
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expanded borderless disclosure
Nulla vitae elit libero, a pharetra augue mollis interdum.
Borderless compact
Collapsed borderless compact disclosure
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expanded borderless compact disclosure
Nulla vitae elit libero, a pharetra augue mollis interdum.
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h3>Default</h3>
<div class="example-row example-stack">
<rh-disclosure summary="Collapsed disclosure">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</rh-disclosure>
<rh-disclosure summary="Expanded disclosure" open="">
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</rh-disclosure>
</div>
<h3>Compact</h3>
<div class="example-row example-stack">
<rh-disclosure summary="Collapsed compact disclosure" variant="compact">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</rh-disclosure>
<rh-disclosure summary="Expanded compact disclosure" variant="compact" open="">
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</rh-disclosure>
</div>
<h3>Borderless</h3>
<div class="example-row example-stack">
<rh-disclosure summary="Collapsed borderless disclosure" variant="borderless">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</rh-disclosure>
<rh-disclosure summary="Expanded borderless disclosure" variant="borderless" open="">
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</rh-disclosure>
</div>
<h3>Borderless compact</h3>
<div class="example-row example-stack">
<rh-disclosure summary="Collapsed borderless compact disclosure" variant="borderless compact">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</rh-disclosure>
<rh-disclosure summary="Expanded borderless compact disclosure" variant="borderless compact" open="">
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</rh-disclosure>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}
.example-stack {
display: flex;
flex-direction: column;
gap: var(--rh-space-lg, 16px);
}Disclosure
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<div id="jump-links-demo-container">
<aside>
<h2 id="sections">Vertical</h2>
<rh-jump-links aria-labelledby="sections">
<rh-jump-link href="#section-1">Section 1</rh-jump-link>
<rh-jump-link href="#section-2" active="">Section 2</rh-jump-link>
<rh-jump-link href="#section-3">Section 3</rh-jump-link>
<rh-jump-link href="#section-4">Section 4</rh-jump-link>
<rh-jump-link href="#section-5">Section 5</rh-jump-link>
</rh-jump-links>
<h2 id="nested-sections">Nested</h2>
<rh-jump-links aria-labelledby="nested-sections">
<rh-jump-link href="#section-1">Jump link</rh-jump-link>
<rh-jump-links-list active="">
<rh-jump-link slot="parent" href="#section-2">Jump link with active subsection</rh-jump-link>
<rh-jump-link href="#section-2a" active="">Jump link subsection</rh-jump-link>
<rh-jump-link href="#section-2b">Jump link subsection</rh-jump-link>
</rh-jump-links-list>
<rh-jump-link href="#section-3">Jump link</rh-jump-link>
<rh-jump-link href="#section-4">Jump link</rh-jump-link>
</rh-jump-links>
</aside>
</div>
<div id="horizontal-demo">
<h2 id="horizontal-sections">Horizontal</h2>
<rh-jump-links orientation="horizontal" aria-labelledby="horizontal-sections">
<rh-jump-link href="#section-1">Jump link</rh-jump-link>
<rh-jump-link href="#section-2" active="">Jump link</rh-jump-link>
<rh-jump-link href="#section-3">Jump link</rh-jump-link>
<rh-jump-link href="#section-4">Jump link</rh-jump-link>
<rh-jump-link href="#section-5">Jump link</rh-jump-link>
<rh-jump-link href="#section-6">Jump link</rh-jump-link>
<rh-jump-link href="#section-7">Jump link</rh-jump-link>
<rh-jump-link href="#section-8">Jump link</rh-jump-link>
</rh-jump-links>
</div>#jump-links-demo-container {
display: grid;
grid-template-columns: max-content auto;
gap: var(--rh-space-2xl, 32px);
padding: var(--rh-space-lg, 16px);
aside {
h2 {
font-weight: var(--rh-font-weight-heading-medium, 500);
font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
font-size: var(--rh-font-size-body-text-md, 1rem);
line-height: var(--rh-line-height-body-text, 1.5);
margin-block-end: var(--rh-space-lg, 16px);
}
}
}
#horizontal-demo {
padding: var(--rh-space-lg, 16px);
h2 {
font-weight: var(--rh-font-weight-heading-medium, 500);
font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
font-size: var(--rh-font-size-body-text-md, 1rem);
line-height: var(--rh-line-height-body-text, 1.5);
margin-block-end: var(--rh-space-lg, 16px);
}
}Jump links
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<div id="menu-dropdown-container">
<h3>Basic</h3>
<rh-menu-dropdown ssr-hint-has-slotted-default="" ssr-hint-has-slotted="toggle-label">
<span slot="toggle-label">Basic toggle</span>
<rh-menu-item ssr-hint-has-slotted-default="">Action one</rh-menu-item>
<rh-menu-item ssr-hint-has-slotted-default="">Action two</rh-menu-item>
<rh-menu-item ssr-hint-has-slotted-default="">Action three</rh-menu-item>
<rh-menu-item disabled="" ssr-hint-has-slotted-default="">Disabled Action</rh-menu-item>
<hr>
<rh-menu-item ssr-hint-has-slotted-default="">Separated action</rh-menu-item>
</rh-menu-dropdown>
<h3>Items with descriptions</h3>
<rh-menu-dropdown ssr-hint-has-slotted-default="" ssr-hint-has-slotted="toggle-label">
<span slot="toggle-label">With descriptions</span>
<rh-menu-item ssr-hint-has-slotted-default="" ssr-hint-has-slotted="description">Action one <p slot="description">Description for the 1st action</p></rh-menu-item>
<rh-menu-item ssr-hint-has-slotted-default="" ssr-hint-has-slotted="description">Action two <p slot="description">Description for the 2nd action</p></rh-menu-item>
<rh-menu-item ssr-hint-has-slotted-default="" ssr-hint-has-slotted="description">Action three <p slot="description">Description for the 3rd action</p></rh-menu-item>
<rh-menu-item disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="description">Disabled Action <p slot="description">Description for a disabled action</p></rh-menu-item>
<hr>
<rh-menu-item ssr-hint-has-slotted-default="" ssr-hint-has-slotted="description">Separated action <p slot="description">Description for a separate action</p></rh-menu-item>
</rh-menu-dropdown>
<h3>Compact</h3>
<rh-menu-dropdown variant="borderless" layout="compact" accessible-label="Toggle menu" ssr-hint-has-slotted-default="">
<rh-menu-item ssr-hint-has-slotted-default="">Action one</rh-menu-item>
<rh-menu-item ssr-hint-has-slotted-default="">Action two</rh-menu-item>
<rh-menu-item ssr-hint-has-slotted-default="">Action three</rh-menu-item>
<rh-menu-item disabled="" ssr-hint-has-slotted-default="">Disabled Action</rh-menu-item>
<hr>
<rh-menu-item ssr-hint-has-slotted-default="">Separated action</rh-menu-item>
</rh-menu-dropdown>
</div>#menu-dropdown-container {
h3 {
margin-block: 1.5rem 0.5rem !important;
}
rh-menu-dropdown:not([layout='compact']) {
width: 296px;
}
}Menu
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<div class="example-row">
<rh-navigation-vertical accessible-label="Example side nav">
<rh-navigation-link href="#">Home</rh-navigation-link>
<rh-navigation-link href="#" current-page="">About</rh-navigation-link>
<rh-navigation-vertical-list summary="Get started" open="">
<rh-navigation-link href="#">Overview</rh-navigation-link>
<rh-navigation-vertical-list summary="Developers" open="">
<rh-navigation-link href="#">Installation</rh-navigation-link>
<rh-navigation-link href="#">Usage</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-link href="#">Designers</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-link href="#">Get support</rh-navigation-link>
</rh-navigation-vertical>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
max-width: 300px;
}Navigation (vertical)
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<rh-progress-stepper>
<rh-progress-step state="complete" description="This step has been completed successfully">
Complete Step
</rh-progress-step>
<rh-progress-step state="warn" description="This step has a warning that needs attention">
Warning Step
</rh-progress-step>
<rh-progress-step state="fail" description="This step has failed and needs to be retried">
Failed Step
</rh-progress-step>
<rh-progress-step state="active" description="Currently working on this step">
Active Step
</rh-progress-step>
<rh-progress-step description="This step is not yet started">
Inactive Step
</rh-progress-step>
</rh-progress-stepper>Progress stepper
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<div class="example-row example-flex">
<rh-spinner size="xl"></rh-spinner>
<rh-spinner></rh-spinner>
<rh-spinner size="md"></rh-spinner>
<rh-spinner size="sm"></rh-spinner>
</div>.example-flex {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
align-items: center;
}Spinner
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<div class="example-row">
<rh-subnav accessible-label="Example subnav">
<rh-navigation-link href="#">Nav item 1</rh-navigation-link>
<rh-navigation-link href="#" current-page="">Nav item 2</rh-navigation-link>
<rh-navigation-link href="#">Nav item 3</rh-navigation-link>
<rh-navigation-link href="#">Nav item 4</rh-navigation-link>
</rh-subnav>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}Subnav
Default
With labels
Disabled
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h3>Default</h3>
<div class="example-row example-flex">
<rh-switch message-on="On" message-off="Off"></rh-switch>
<rh-switch checked="" message-on="On" message-off="Off"></rh-switch>
</div>
<h3>With labels</h3>
<div class="example-row example-flex">
<rh-switch message-on="Enabled" message-off="Disabled"></rh-switch>
<rh-switch checked="" message-on="Enabled" message-off="Disabled"></rh-switch>
</div>
<h3>Disabled</h3>
<div class="example-row example-flex">
<rh-switch disabled="" message-on="On" message-off="Off"></rh-switch>
<rh-switch disabled="" checked="" message-on="On" message-off="Off"></rh-switch>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}
.example-flex {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
align-items: center;
}Switch
| Date | Event |
Venue |
|---|---|---|
| 12 February | Waltz with Strauss | Main Hall |
| 24 March | The Obelisks | West Wing |
| 14 April | The What | Main Hall |
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
<rh-table>
<table>
<caption>
Concerts
</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Event<rh-sort-button></rh-sort-button>
</th>
<th scope="col">Venue<rh-sort-button></rh-sort-button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>12 February</td>
<td><a href="#">Waltz with Strauss</a></td>
<td>Main Hall</td>
</tr>
<tr>
<td>24 March</td>
<td><a href="#">The Obelisks</a></td>
<td>West Wing</td>
</tr>
<tr>
<td>14 April</td>
<td><a href="#">The What</a></td>
<td>Main Hall</td>
</tr>
</tbody>
</table>
<small slot="summary">Dates and venues subject to change.</small>
</rh-table>import '@rhds/elements/rh-table/rh-table.js';Table
Horizontal
Box Inset
Overflow
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h2>Horizontal</h2>
<rh-tabs>
<rh-tab id="users" slot="tab" active="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Users <rh-icon slot="icon" icon="users" set="ui"></rh-icon></rh-tab>
<rh-tab-panel>Users</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Containers <rh-icon slot="icon" icon="container"></rh-icon></rh-tab>
<rh-tab-panel>Containers <a href="#">Focusable element</a></rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Database <rh-icon slot="icon" icon="datacenter"></rh-icon></rh-tab>
<rh-tab-panel>Database</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Servers <rh-icon slot="icon" icon="server"></rh-icon></rh-tab>
<rh-tab-panel>Servers</rh-tab-panel>
<rh-tab slot="tab" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Cloud <rh-icon slot="icon" icon="cloud"></rh-icon></rh-tab>
<rh-tab-panel>Cloud</rh-tab-panel>
</rh-tabs>
<h2>Box Inset</h2>
<rh-tabs box="inset">
<rh-tab slot="tab" active="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Users <rh-icon slot="icon" icon="users" set="ui"></rh-icon></rh-tab>
<rh-tab-panel>Users</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Containers <rh-icon slot="icon" icon="container"></rh-icon></rh-tab>
<rh-tab-panel>Containers</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Database <rh-icon slot="icon" icon="datacenter"></rh-icon></rh-tab>
<rh-tab-panel>Database</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Servers <rh-icon slot="icon" icon="server"></rh-icon></rh-tab>
<rh-tab-panel>Servers</rh-tab-panel>
<rh-tab slot="tab" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Cloud <rh-icon slot="icon" icon="cloud"></rh-icon></rh-tab>
<rh-tab-panel>Cloud</rh-tab-panel>
</rh-tabs>
<h2>Overflow</h2>
<rh-tabs>
<rh-tab slot="tab" active="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Users <rh-icon slot="icon" icon="users" set="ui"></rh-icon></rh-tab>
<rh-tab-panel>Users</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Containers <rh-icon slot="icon" icon="container"></rh-icon></rh-tab>
<rh-tab-panel>Containers</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Database <rh-icon slot="icon" icon="datacenter"></rh-icon></rh-tab>
<rh-tab-panel>Database</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Servers <rh-icon slot="icon" icon="server"></rh-icon></rh-tab>
<rh-tab-panel>Servers</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="">Cloud</rh-tab>
<rh-tab-panel>Cloud</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="">Network</rh-tab>
<rh-tab-panel>Network</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="">Storage</rh-tab>
<rh-tab-panel>Storage</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="">Security</rh-tab>
<rh-tab-panel>Security</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="">Monitoring</rh-tab>
<rh-tab-panel>Monitoring</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="">Logging</rh-tab>
<rh-tab-panel>Logging</rh-tab-panel>
<rh-tab slot="tab" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Alerts <rh-icon slot="icon" icon="bell" set="ui"></rh-icon></rh-tab>
<rh-tab-panel>Alerts</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="">Settings</rh-tab>
<rh-tab-panel>Settings</rh-tab-panel>
</rh-tabs>Tabs
Vertical
Vertical Box
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h2>Vertical</h2>
<rh-tabs vertical="">
<rh-tab slot="tab" active="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Users <rh-icon slot="icon" icon="users" set="ui"></rh-icon></rh-tab>
<rh-tab-panel>Users</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Containers <rh-icon slot="icon" icon="container"></rh-icon></rh-tab>
<rh-tab-panel>Containers <a href="#">Focusable element</a></rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Database <rh-icon slot="icon" icon="datacenter"></rh-icon></rh-tab>
<rh-tab-panel>Database</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Servers <rh-icon slot="icon" icon="server"></rh-icon></rh-tab>
<rh-tab-panel>Servers</rh-tab-panel>
<rh-tab slot="tab" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Cloud <rh-icon slot="icon" icon="cloud"></rh-icon></rh-tab>
<rh-tab-panel>Cloud</rh-tab-panel>
</rh-tabs>
<h2>Vertical Box</h2>
<rh-tabs vertical="" box="box">
<rh-tab slot="tab" active="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Users <rh-icon slot="icon" icon="users" set="ui"></rh-icon></rh-tab>
<rh-tab-panel>Users</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Containers <rh-icon slot="icon" icon="container"></rh-icon></rh-tab>
<rh-tab-panel>Containers <a href="#">Focusable element</a></rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Database <rh-icon slot="icon" icon="datacenter"></rh-icon></rh-tab>
<rh-tab-panel>Database</rh-tab-panel>
<rh-tab slot="tab" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Servers <rh-icon slot="icon" icon="server"></rh-icon></rh-tab>
<rh-tab-panel>Servers</rh-tab-panel>
<rh-tab slot="tab" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon">Cloud <rh-icon slot="icon" icon="cloud"></rh-icon></rh-tab>
<rh-tab-panel>Cloud</rh-tab-panel>
</rh-tabs>rh-tabs {
container: host;
}Tabs (vertical)
Filled
Outlined
Disabled
Linked Filled
Linked Outlined
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h3>Filled</h3>
<div class="example-row example-flex">
<rh-tag ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag icon="information-fill" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag size="compact" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag color="red" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag color="red" icon="information-fill" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag color="red" size="compact" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag color="red" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag color="red-orange" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag color="red-orange" icon="information-fill" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag color="red-orange" size="compact" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag color="red-orange" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag color="orange" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag color="orange" icon="information-fill" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag color="orange" size="compact" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag color="orange" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag color="yellow" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag color="yellow" icon="information-fill" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag color="yellow" size="compact" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag color="yellow" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag color="green" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag color="green" icon="information-fill" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag color="green" size="compact" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag color="green" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag color="teal" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag color="teal" icon="information-fill" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag color="teal" size="compact" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag color="teal" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag color="blue" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag color="blue" icon="information-fill" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag color="blue" size="compact" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag color="blue" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag color="purple" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag color="purple" icon="information-fill" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag color="purple" size="compact" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag color="purple" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Purple</rh-tag>
</div>
<h3>Outlined</h3>
<div class="example-row example-flex">
<rh-tag variant="outline" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag variant="outline" icon="information-fill" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag variant="outline" size="compact" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag variant="outline" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag variant="outline" color="red" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag variant="outline" color="red" icon="information-fill" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag variant="outline" color="red" size="compact" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag variant="outline" color="red" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag variant="outline" color="red-orange" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag variant="outline" color="red-orange" icon="information-fill" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag variant="outline" color="red-orange" size="compact" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag variant="outline" color="red-orange" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag variant="outline" color="orange" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag variant="outline" color="orange" icon="information-fill" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag variant="outline" color="orange" size="compact" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag variant="outline" color="orange" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag variant="outline" color="yellow" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag variant="outline" color="yellow" icon="information-fill" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag variant="outline" color="yellow" size="compact" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag variant="outline" color="yellow" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag variant="outline" color="green" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag variant="outline" color="green" icon="information-fill" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag variant="outline" color="green" size="compact" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag variant="outline" color="green" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag variant="outline" color="teal" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag variant="outline" color="teal" icon="information-fill" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag variant="outline" color="teal" size="compact" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag variant="outline" color="teal" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag variant="outline" color="blue" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag variant="outline" color="blue" icon="information-fill" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag variant="outline" color="blue" size="compact" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag variant="outline" color="blue" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag variant="outline" color="purple" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag variant="outline" color="purple" icon="information-fill" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag variant="outline" color="purple" size="compact" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag variant="outline" color="purple" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Purple</rh-tag>
</div>
<h3>Disabled</h3>
<div class="example-row example-flex">
<rh-tag disabled="" href="#" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag disabled="" color="red" href="#" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag disabled="" variant="outline" color="red" href="#" ssr-hint-has-slotted-default="">Red outline</rh-tag>
<rh-tag disabled="" variant="outline" color="blue" href="#" ssr-hint-has-slotted-default="">Blue outline</rh-tag>
</div>
<h3>Linked Filled</h3>
<div class="example-row example-flex">
<rh-tag href="#" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag href="#" icon="information-fill" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag href="#" size="compact" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag href="#" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag href="#" color="red" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag href="#" color="red" icon="information-fill" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag href="#" color="red" size="compact" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag href="#" color="red" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag href="#" color="red-orange" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag href="#" color="red-orange" icon="information-fill" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag href="#" color="red-orange" size="compact" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag href="#" color="red-orange" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag href="#" color="orange" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag href="#" color="orange" icon="information-fill" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag href="#" color="orange" size="compact" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag href="#" color="orange" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag href="#" color="yellow" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag href="#" color="yellow" icon="information-fill" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag href="#" color="yellow" size="compact" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag href="#" color="yellow" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag href="#" color="green" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag href="#" color="green" icon="information-fill" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag href="#" color="green" size="compact" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag href="#" color="green" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag href="#" color="teal" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag href="#" color="teal" icon="information-fill" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag href="#" color="teal" size="compact" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag href="#" color="teal" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag href="#" color="blue" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag href="#" color="blue" icon="information-fill" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag href="#" color="blue" size="compact" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag href="#" color="blue" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag href="#" color="purple" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag href="#" color="purple" icon="information-fill" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag href="#" color="purple" size="compact" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag href="#" color="purple" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Purple</rh-tag>
</div>
<h3>Linked Outlined</h3>
<div class="example-row example-flex">
<rh-tag href="#" variant="outline" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag href="#" variant="outline" icon="information-fill" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag href="#" variant="outline" size="compact" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag href="#" variant="outline" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Gray</rh-tag>
<rh-tag href="#" variant="outline" color="red" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag href="#" variant="outline" color="red" icon="information-fill" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag href="#" variant="outline" color="red" size="compact" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag href="#" variant="outline" color="red" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Red</rh-tag>
<rh-tag href="#" variant="outline" color="red-orange" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag href="#" variant="outline" color="red-orange" icon="information-fill" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag href="#" variant="outline" color="red-orange" size="compact" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag href="#" variant="outline" color="red-orange" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Red Orange</rh-tag>
<rh-tag href="#" variant="outline" color="orange" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag href="#" variant="outline" color="orange" icon="information-fill" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag href="#" variant="outline" color="orange" size="compact" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag href="#" variant="outline" color="orange" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Orange</rh-tag>
<rh-tag href="#" variant="outline" color="yellow" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag href="#" variant="outline" color="yellow" icon="information-fill" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag href="#" variant="outline" color="yellow" size="compact" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag href="#" variant="outline" color="yellow" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Yellow</rh-tag>
<rh-tag href="#" variant="outline" color="green" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag href="#" variant="outline" color="green" icon="information-fill" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag href="#" variant="outline" color="green" size="compact" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag href="#" variant="outline" color="green" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Green</rh-tag>
<rh-tag href="#" variant="outline" color="teal" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag href="#" variant="outline" color="teal" icon="information-fill" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag href="#" variant="outline" color="teal" size="compact" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag href="#" variant="outline" color="teal" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Teal</rh-tag>
<rh-tag href="#" variant="outline" color="blue" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag href="#" variant="outline" color="blue" icon="information-fill" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag href="#" variant="outline" color="blue" size="compact" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag href="#" variant="outline" color="blue" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Blue</rh-tag>
<rh-tag href="#" variant="outline" color="purple" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag href="#" variant="outline" color="purple" icon="information-fill" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag href="#" variant="outline" color="purple" size="compact" ssr-hint-has-slotted-default="">Purple</rh-tag>
<rh-tag href="#" variant="outline" color="purple" size="compact" icon="information-fill" ssr-hint-has-slotted-default="">Purple</rh-tag>
</div>.example-row {
margin-block: var(--rh-space-2xl, 32px);
}
.example-flex {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-lg, 16px);
align-items: center;
}Tags
Link tile
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Link tile (large)
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Link tile with padded image
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Link tile with bleed image
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Title
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Compact link tile
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Compact link tile with image
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas.Footer
Selectable tile (checkbox)
Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Footer
Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Footer
Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Footer
Selectable tile (radio)
Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Footer
Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Footer
Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Footer
<link rel="stylesheet" href="/styles/demo/styles.css" media="all">
<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">
<h3>Link tile</h3>
<div class="tile-grid example-row">
<rh-tile ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon,title,headline,footer">
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile desaturated="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon,title,headline,footer">
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon,title,headline,footer">
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
</div>
<h3>Link tile (large)</h3>
<div class="tile-grid example-row">
<rh-tile class="large" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon,title,headline,footer">
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile class="large" desaturated="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon,title,headline,footer">
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile class="large" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon,title,headline,footer">
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
</div>
<h3>Link tile with padded image</h3>
<div class="tile-grid example-row">
<rh-tile ssr-hint-has-slotted-default="" ssr-hint-has-slotted="image,icon,title,headline,footer">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" width="100%">
<title>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="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile desaturated="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="image,icon,title,headline,footer">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" width="100%">
<title>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="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="image,icon,title,headline,footer">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" width="100%">
<title>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="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
</div>
<h3>Link tile with bleed image</h3>
<div class="tile-grid example-row">
<rh-tile bleed="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="image,icon,title,headline,footer">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" width="100%">
<title>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="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile bleed="" desaturated="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="image,icon,title,headline,footer">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" width="100%">
<title>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="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile bleed="" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="image,icon,title,headline,footer">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" width="100%">
<title>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="icon" set="standard" icon="cloud-automation"></rh-icon>
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
</div>
<h3>Compact link tile</h3>
<div class="tile-grid tile-grid-compact example-row">
<rh-tile compact="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon,headline,footer">
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile compact="" desaturated="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon,headline,footer">
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile compact="" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="icon,headline,footer">
<rh-icon slot="icon" set="standard" icon="cloud-automation"></rh-icon>
<h2 slot="headline"><a href="#top">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
</div>
<h3>Compact link tile with image</h3>
<div class="tile-grid tile-grid-compact example-row">
<rh-tile compact="" bleed="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="image,icon,headline,footer">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 60">
<title>Placeholder image</title>
<rect x="0" y="0" width="360" height="60" 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">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile compact="" bleed="" desaturated="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="image,icon,headline,footer">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 60">
<title>Placeholder image</title>
<rect x="0" y="0" width="360" height="60" 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">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile compact="" bleed="" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="image,icon,headline,footer">
<svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 60">
<title>Placeholder image</title>
<rect x="0" y="0" width="360" height="60" 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">Heading</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas.
<div slot="footer">Footer</div>
</rh-tile>
</div>
<h3>Selectable tile (checkbox)</h3>
<div class="tile-grid example-row">
<rh-tile-group>
<rh-tile checkable="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="headline,footer">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile checkable="" checked="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="headline,footer">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile checkable="" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="headline,footer">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Footer</div>
</rh-tile>
</rh-tile-group>
</div>
<h3>Selectable tile (radio)</h3>
<div class="tile-grid example-row">
<rh-tile-group radio="">
<rh-tile checkable="" name="radio" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="headline,footer">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile checkable="" name="radio" checked="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="headline,footer">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Footer</div>
</rh-tile>
<rh-tile checkable="" name="radio" disabled="" ssr-hint-has-slotted-default="" ssr-hint-has-slotted="headline,footer">
<h2 slot="headline">Headline</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Footer</div>
</rh-tile>
</rh-tile-group>
</div>@import url('/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css');
.example-row {
margin-block: var(--rh-space-2xl, 32px);
}
.tile-grid {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
}
.tile-grid rh-tile {
width: 320px;
}
.tile-grid-compact rh-tile {
width: 360px;
}Tile
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other available themes
If the Project Felt theme does not fit your user needs right now, view all RHDS elements with default styles.
