Project Felt
On this page
On this page
Try it out
To apply the Project Felt preview theme to all of the elements below, toggle the switch.
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
<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" aria-label="Menu"></rh-button>
<rh-button icon="close" icon-set="microns" variant="icon" aria-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" aria-label="Menu"></rh-button>
<rh-button disabled="" icon="close" icon-set="microns" variant="icon" aria-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" aria-label="Menu"></rh-button>
<rh-button compact="" icon="close" icon-set="microns" variant="icon" aria-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
<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);
font-family: var(--rh-font-family-body-text);
font-size: var(--rh-font-size-body-text-md);
line-height: var(--rh-line-height-body-text, 1.5);
margin-block-end: var(--rh-space-lg);
}
}
}
#horizontal-demo {
padding: var(--rh-space-lg, 16px);
h2 {
font-weight: var(--rh-font-weight-heading-medium);
font-family: var(--rh-font-family-body-text);
font-size: var(--rh-font-size-body-text-md);
line-height: var(--rh-line-height-body-text, 1.5);
margin-block-end: var(--rh-space-lg);
}
}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="#">Nav item 1</rh-navigation-link>
<rh-navigation-link href="#" current-page="">Nav item 2</rh-navigation-link>
<rh-navigation-vertical-list summary="Nav group">
<rh-navigation-link href="#">Sub item 1</rh-navigation-link>
<rh-navigation-link href="#">Sub item 2</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-link href="#">Nav item 3</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
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>@import "../../../styles/grid.css";
.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
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.
