Tile
Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<rh-tile class="accented-tile">
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>@import url('/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css');
rh-tile.accented-tile {
position: relative;
overflow: hidden;
border-radius: var(--rh-border-radius-default);
&::before {
content: '';
position: absolute;
z-index: 2;
display: block;
inset-block-start: 0;
inset-inline: 0;
border-block-start-color: var(--rh-color-brand-red);
border-block-start-width: var(--rh-border-width-lg);
border-block-start-style: solid;
pointer-events: none;
}
}Accented tile
The accented tile pattern should be used to draw attention to a specific tile or set of tiles. Be careful not to apply the accented tile pattern to all tiles within a page, otherwise the accent effect will be lost. After all, "if everything is special, then nothing is special."
Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<rh-tile class="with-tag">
<rh-tag slot="image">Open Shift</rh-tag>
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</rh-tile>@import url('/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css');
rh-tile.with-tag {
& rh-tag {
display: inline-block;
margin-block-end: var(--rh-space-lg, 16px);
}
}