Tile

tiles content layout

Introduction

A tile is a clickable area and represent e.g. entities. Tiles can contain other components. Currently, there are two types of tiles: list tiles and dashboard tiles.

View in Groundhog

Tiles are themable. Dashboard tile example

Styleguide - list tiles

List tiles use theme colors.

List tiles styleguide

List tiles styleguide

font-familiy: Bernina Sans Regular
border-width: 1px
background-color: #fff
border-color: $gray-200
border-radius: 3px
padding: 16px
margin: 24px
background-color: $gray-100
border: 1px
border-color: $gray-200
height: 52px //incl. border
border-top-left-radius: 3px
border-top-right-radius: 3px

Icon box

background-color: main theme color
height: 52px //incl. border
width: 52px //incl. border
border-top-left-radius: 3px
padding: 10px //results in a icon bounding box of 32px

Headline

font-size: 16px
line-height: 1.6
color: $gray-700

Subheadline

font-size: 12px
line-height: 1.6
color: $gray-500

Distances

x: 4px
y: 8px

Hover

List tiles styleguide

border-color: theme hover color

Active

List tiles styleguide

border-color: theme active color

Disabled state

List tiles styleguide

border-color: $gray-300
color: $gray-300
Iconbox:
background-color: $gray-300

Dashboard tiles

These tiles are only used on dashboards (dark background). There are 3 sizes of dashboard tiles, full size, half size and quarter size. Quarter sized tiles are used for giving an overview, e.g. how many hosts, applications, web checks, etc. the environment contains. Whereas, the half and full sized tiles show a preview of a more specific part. All full and half sized tiles use theme colors to be recognized immediately. Please use the defined chart colors.

font-familiy: Bernina Sans Regular
border-width: 1px
background-color: $gray-800
border-color: $gray-600
border-radius: 3px
padding: 20px
margin: 20px

Dashboard tiles styleguide

Headline

font-size: 10px
line-height: 1.6
color: #fff
Line next to headline: 1px solid $gray-700

Subheadline

font-size: 12px
line-height: 1.6
color: #fff

Icon

height: 12px
width: 12px
fill: chart-dependent

Metric

font-size: 10px
line-height: 1.6
color: $gray-500
Line next to metric: 1px dotted $gray-700

Number

font-size: 14px
line-height: 1.6
color: #fff

Unit

font-size: 10px
line-height: 1.6
color: $gray-500

Hover

Dashboard tiles hover state

border-color: $turquoise-600

Active

Dashboard tiles active state

border-color: $turquoise-700

Disabled state

Dashboard tiles can't be disabled.

Animation

The tile component is not animated at all.

Multiple metrics shown in one dashboard tile

To make a chart with different metrics better understandable, related metrics should rotate in a carousel. Every step is visible for 4 seconds. The y-axis can show several units in a carousel too. Colored lines are in front of the gray lines.

First, all metrics are shown combined. Multiple metrics in one dashboard tile

One metric is shown, the others are desaturated. Multiple metrics in one dashboard tile

Examples of multiple tiles

Multiple list tiles

Multiple dashboard tiles