Tile
Installation
Usage
Warning
Tiles require light DOM CSS to be included on the page in order to style links properly.
rh-tile
| Slot Name | Description |
|---|---|
image |
optional image on top of tile |
icon |
optional icon |
title |
optional title |
headline |
optional headline / link title |
|
optional body content |
footer |
optional footer |
| DOM Property | Description | Type | Default |
|---|---|---|---|
bleed |
Whether image is full-width (i.e. bleeds into the padding) |
|
|
desaturated |
Whether headline link text is a desaturated color instead of blue;
|
|
|
compact |
Reduces tile padding for more compact spaces |
|
|
icon |
Icon (must be a member of the fontawesome "far" icon set) |
|
|
accessibleLabel |
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. |
|
|
name |
Form name |
|
|
value |
Form value |
|
|
checkable |
When true, tile behaves like a checkbox unless it is part of an
|
|
|
checked |
If tile is checkable, whether it is currently checked |
|
|
disabled |
Whether tile interaction is disabled |
|
|
colorPalette |
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 |
|
|
| Method Name | Description |
|---|---|
formDisabledCallback() |
|
formStateRestoreCallback(state: string, mode: string) |
|
setCustomValidity(message: string) |
|
checkValidity() |
|
reportValidity() |
| Event Name | Description |
|---|---|
force |
|
select |
when tile is clicked |
None
| 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)
|
None
rh-tile-group
| Slot Name | Description |
|---|---|
|
Put one or more |
| DOM Property | Description | Type | Default |
|---|---|---|---|
disabled |
Whether tile group interaction is disabled |
|
|
radio |
If tile is checkable, whether only one tile can be checked |
|
|
colorPalette |
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 |
|
|
| Method Name | Description |
|---|---|
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 |
None
None
None
None
