Kacheln in Onlinedokumentation – Tiles

Kacheln (englisch Tiles) eignen sich insbesondere für die Startseite einer Onlinedokumentation, um dort eine Art visuelles Inhaltsverzeichnis zu schaffen. Jede Kachel verlinkt auf ein bestimmtes Kapitel. Dabei kann entweder die gesamte Kachel anklickbar sein oder nur ein spezifischer Link auf der Kachel.

Je nach Breite des Browserfensters richtet sich die Anordnung der Kacheln dynamisch nach dem zur Verfügung stehenden Platz.

Beispiel 1: Kacheln mit Schatten

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

Beispiel 2: Kacheln ohne Schatten

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

Implementierung

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

Für die Variante mit Schatten aus Beispiel 1 lautet der Code:

.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;
}

Für die Variante ohne Schatten aus Beispiel 2 lautet der Code:

.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;  
}

Schritt 2: Gestalten Sie den Inhalt der einzelnen Kacheln mit den Bordmitteln Ihres Redaktionssystems.

Schließen Sie alle Kacheln, die bei ausreichend Platz in derselben Zeile stehen sollen, in die folgenden beiden HTML-Schnipsel ein:

<div class="tiles-row">

</div>

Schritt 3: Schließen Sie zusätzlich jede einzelne Kachel in folgende beiden HTML-Schnipsel ein:

<div class="tiles-box">

</div>

Kacheln verlinken: Um eine Kachel mit einem bestimmten Topic zu verlinken, haben Sie zwei Möglichkeiten:

> Im einfachsten Fall erstellen Sie auf der Kachel einen Link mit den Bordmitteln Ihres Redaktionssystems. Dies kann ein Link im Text sein, ein verlinktes Symbol, oder beides. In diesem Fall ist später ausschließlich dieser Link anklickbar und nicht die gesamte Kachel.

> Wenn Sie möchten, dass die gesamte Kachel ein aktiver Link wird, müssen Sie die gesamte Kachel in den Link einschließen, was nur in den HTML-Schnipseln geht. In diesem Fall sieht der Code von Schritt 3 wie folgt aus:

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

 </div>
</a>