Diggi Docs

Tile

Tiles sind visuell stark und leiten per Interaktion auf eine weitere Seite weiter. Sie können vielfältig eingesetzt werden, um Inhalte hervorzuheben und Seiten zu gliedern.

Info! Die gezeigten Abstände und Größen in der Live Demo dienen lediglich zu Demonstrationszwecken und sind nicht Teil der Tile styles im Fronend Kit. Für eine Verwendung der Tile zur Erstellung einer anderen Komponente, z. B. eines Teasers, müssen die Abstände und Größen dem Digital Design System entsprechen.

Tiles können mit unterschiedlichen Hintergründen kombiniert werden. Durch den Einsatz von Highlight colors (Blue, Purple, Turquoise, Green) können farbliche Akzente gesetzt werden.

Die Kombination von unterschiedlichen Highlight Farben innerhalb einer Komponente ist möglich.
Eine Mischung zwischen Standard Farben und Highlight Farben ist wiederum nicht möglich.

Verwendung

Achtung: Tiles sind auf der gesamten Fläche sensitiv: die gesamte Fläche hovert. Eine Platzierung zusätzlicher Interaktionselemente wie Button, Link, etc. sind auf einer Tile nicht möglich.

Es können mehrere Tiles nebeneinander oder untereinander stehen.
Nur Tiles mit dem gleichen Innenabstand (Padding) können miteinander kombiniert werden.
Die nebeneinander angeordneten Tiles haben die gleiche Höhe – dabei bestimmt das Tile mit den meisten Textzeilen die Höhe aller Tiles.
Im Mobile Screens stehen Tiles untereinander.
Je nach Anforderungen dürfen Innen-, Außenabstand und Schriftgröße der Tile angepasst werden.
Bilder können oberhalb oder seitlich einer Tile stehen und schließen seitlich bündig mit ihnen ohne Lücke ab.

Tiles werden unter anderem in folgenden Komponenten eingesetzt:

Decision Teaser
Strategic Teaser
Storyteaser
Text Image Jumbotron
Gallery

Eigenschaften

Name	Type	Default Value	Description
link	string \| undefined	undefined	Url to link to
name	string \|undefined	undefined	Name of the Tile, used for aria label
target	'_blank' \| '_self' \| '_parent' \| '_top' \| string \| undefined	undefined	target attribute for link (e.g. _blank)
background	'primary' \| 'secondary' \| 'contrast'	undefined	background color
fill	'purple' \| 'blue' \| 'turquoise' \| 'green' \| undefined	undefined	Fill color
preloadData	"hover" \| "tap" \| undefined	undefined	The type of data preload. "hover" means that preloading will start if the mouse comes to a rest over a link. "tap" means that preloading will start as soon as a touchstart or mousedown event is registered.
preloadCode	"eager" \| "viewport" \| "hover" \| "tap" \| undefined	undefined	Specifies when and what to preload for the link
reload	true \| "" \| "off" \| null \| undefined	undefined	If true a data-sveltekit-reload attribute will be added to this link. It will cause a full-page navigation when the link is clicked.
replaceState	true \| "" \| "off" \| null \| undefined	undefined	If true it won't create a new entry in the browser's session history.
noScroll	true \| "" \| "off" \| null \| undefined	undefined	If true it will prevent scrolling after the link is clicked.
style	string \| undefined	undefined	Additional css styles