Tiles in online documentation

Tiles are particularly useful for the start or home page of an online documentation to create some kind of visual table of contents there. Each tile contains links to a specific chapter. Either the entire tile can be clickable, or only a specific link on the tile.

Depending on the width of the browser window, the tiles are dynamically arranged according to the available space.

Example 1: Tiles with a shadow

Links (1)
The entire tile is a link

Links (2)
Specific links to click

Dogs
All about dogs

Cats
All about cats

Fish
All about fish

Frogs
All about frogs

Monsters
All about monsters

Example 2: Tiles without a shadow

Links (1)
The entire tile is a link

Links (2)
Specific links to click

Dogs
All about dogs

Cats
All about cats

Fish
All about fish

Frogs
All about frogs

Monsters
All about monsters

Implementation

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

For the variant with a shadow from example 1, the code is:


.tiles-row {
  column-gap: 30px;
  row-gap: 30px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.tiles-box {
  height: 135px;
  width: 200px;
  align-items: center;
  background-color: rgba(251, 251, 251, 1);
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.tiles-box::after {
  border-radius: 5px;
  box-shadow: 2px 3px 15px rgba(0, 0, 0, 0.1);
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 100%;
  z-index: -1;
}
.tiles-box:hover {
  transform: scale(1.10, 1.10);
  z-index: 10;
  opacity: 1;
  transition: 0.2s;  
}
.tiles-box:hover::after {
  opacity: 1;
}

For the variant without a shadow from example 2, the code is:


.tiles-row {
  column-gap: 30px;
  row-gap: 30px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.tiles-box {
  height: 135px;
  width: 200px;
  align-items: center;
  background-color: rgba(252, 252, 252, 1);
  border-radius: 3px;
  border-style: solid;
  border-width: 3px;
  border-color: rgba(0, 102, 153, 0.035);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.tiles-box:hover {
  transform: scale(1.15, 1.15);
  z-index: 10;
  border-color: rgba(0, 102, 153, 0.3);  
  opacity: 1;
  transition: 0.2s;  
}

Step 2: Design the content of the individual tiles using the on-board functions of your authoring tool.

Enclose all tiles that should be on the same line if there is enough space in the following two HTML snippets:


<div class="tiles-row">


</div>

Step 3: In addition, enclose each individual tile in the two following HTML snippets:


<div class="tiles-box">


</div>

Linking from the tiles: To link a tile to a specific topic, you have two options:

> In the most basic case, you create a link on the tile using the on-board tools of your authoring tool. This can be a link in the text, a linked icon, or both. In this case, only this link will be clickable later, but not the entire tile.

> If you want the entire tile to become an active link, you need to enclose the entire tile in the link, which is only possible in the HTML snippets. In this case, the code of Step 3 looks like this:


<a href="YOUR-LINK-TARGET" style="text-decoration: none">
 <div class="tiles-box">


 </div>
</a>

___

Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!