Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @rhds/elementsThen import this component into your project by using a bare module specifier:
import '@rhds/elements/rh-tile/rh-tile.js';Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.
Usage
Warning
Tiles require light DOM CSS to be included on the page in order to style links properly.
<rh-tile>
<img slot="image" src="https://fakeimg.pl/296x50" alt="296 X 50 placeholder image">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>
<script type="module">
import '@rhds/elements/rh-tile/rh-tile.js';
</script>
<link rel="stylesheet" href="../rh-tile-lightdom.css">
<style>
rh-tile {
margin-inline-end: var(--rh-space-md, 8px);
}
</style>
rh-tile
Slots
-
image -
optional image on top of tile
-
icon -
optional icon
-
title -
optional title
-
headline -
optional headline / link title
- Default Slot
-
optional body content
-
footer -
optional footer
Attributes
bleed-
Whether image is full-width (i.e. bleeds into the padding)
- DOM Property
bleed- Type
-
boolean - Default
-
false
desaturated-
Whether headline link text is a desaturated color instead of blue;
truesets headline color to white on dark tiles or black on light tiles- DOM Property
desaturated- Type
-
boolean - Default
-
false
compact-
Reduces tile padding for more compact spaces
- DOM Property
compact- Type
-
boolean - Default
-
false
icon-
Icon (must be a member of the fontawesome "far" icon set)
- DOM Property
icon- Type
-
string | undefined - Default
-
unknown
accessible-label-
When checkable, the accessible (visually hidden) label for the form control If not set, the text content of the tile element will be used instead.
- DOM Property
accessibleLabel- Type
-
string | undefined - Default
-
unknown
name-
Form name
- DOM Property
name- Type
-
string | undefined - Default
-
unknown
value-
Form value
- DOM Property
value- Type
-
string | undefined - Default
-
unknown
checkable-
When true, tile behaves like a checkbox unless it is part of an
<rh-tile-group radio>, in which case it behaves like a radio button- DOM Property
checkable- Type
-
boolean - Default
-
false
checked-
If tile is checkable, whether it is currently checked
- DOM Property
checked- Type
-
boolean - Default
-
false
disabled-
Whether tile interaction is disabled
- DOM Property
disabled- Type
-
boolean - Default
-
false
color-palette-
Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values
Tile always resets its context to
base, unless explicitly provided with acolor-palette.- DOM Property
colorPalette- Type
-
ColorPalette | undefined - Default
-
unknown
Methods
formDisabledCallback()formStateRestoreCallback(state: string, mode: string)setCustomValidity(message: string)checkValidity()reportValidity()
Events
force-
Event Type:
TileSelectEvent select-
when tile is clicked
Event Type:TileSelectEvent
CSS Shadow Parts
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-tile-text-color |
color of text - |
var(--rh-color-text-primary-on-light, #151515)
|
--rh-tile-text-color-secondary |
disabled text and icons - |
var(--rh-color-text-secondary-on-light, #4d4d4d)
|
--rh-tile-interactive-color |
color of interactive elements - |
var(--rh-color-border-interactive-on-light, #0066cc)
|
--rh-tile-link-color |
color of tile link - |
var(--rh-tile-interactive-color)
|
--rh-tile-link-text-decoration |
tile link text decoration - |
none
|
--rh-tile-background-color |
color tile surface - |
var(--rh-color-surface-lightest, #ffffff)
|
--rh-tile-focus-background-color |
color tile surface on focus/hover - |
var(--rh-color-surface-lighter, #f2f2f2)
|
--rh-tile-disabled-background-color |
color tile surface when disabled - |
var(--rh-color-surface-light, #e0e0e0)
|
--rh-tile-border-color |
color of tile border - |
var(--rh-color-border-subtle-on-light, #c7c7c7)
|
Design Tokens
rh-tile-group
A group of `
Slots
- Default Slot
-
tiles
Attributes
disabled-
Whether tile group interaction is disabled
- DOM Property
disabled- Type
-
boolean - Default
-
false
radio-
If tile is checkable, whether only one tile can be checked
- DOM Property
radio- Type
-
boolean - Default
-
false
color-palette-
Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values
Tile group always resets its context to
base, unless explicitly provided with acolor-palette.- DOM Property
colorPalette- Type
-
ColorPalette | undefined - Default
-
unknown
Methods
focus()-
Sets focus on active tile
selectItem(tile: RhTile)-
Programatically select a tile
toggleItem(tile: RhTile)-
Programatically toggle a tile
updateItems()-
Updates slotted tiles to set properties and keyboard navigation
Events
None
CSS Shadow Parts
None
CSS Custom Properties
None
Design Tokens
None
Related elements or patterns
Feedback
To give feedback about anything on this page, contact us.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit
Red Hat legal and privacy links
