Overview
A tile is a flexible layout with a clickable and contained surface.
Sample element
Title
Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Suspendisse eu turpis elementum
Demo
View a live version of this element and see how it can be customized.
<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>
demo in a new tabWhen to use
- When you need to group content in a linked container
- When you need an alternative to a group of cards with the same calls to action
- When you need to group content for a radio button or checkbox in a form
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