- Consistency. Never mix different types of content tiles in one section.
- Circular image. Every tile contains either an icon or a picture.
- Tile indicator. You can either select tiles or delete tiles. There will never be a "check" replaced by a "remove" on hover.
- Remove tiles. The indicator to remove a tile is only visible when hovering the tile. Note: Not every tile is a removable tile.
These content tiles based on the same HTML structure. Depending on the information which should be displayed you can choose between three different types. Appart from the circular image the different content tiles have:
- One additional info. One text in (max.) two lines.
- Two additional infos. Two one-liners.
- Three additional infos. A headline with two one-liners.
One additional info
Default icon
Default picture
Selected tile with indicator
Delete indicator
```html
Two lines of text
```
Two additional infos
Default icon
Default picture
Selected tile with indicator
Delete indicator
```html
Delete indicator
Note the focus
```
Three additional infos
Default icon
Default picture
Selected tile with indicator
Delete indicator
```html
Headline
Telete indicator
Note the focus
```
The point of tiles is to give a good overview to users and provide them with key information. The overview can get quite complex when using these content tiles. So we try to avoid them whenever possible. If there are heaps of information which can't be deprived use the content tile (infinite infos). But always keep in mind: Sometimes less is more.
- Consistency. Never mix different types of content tiles in one section.
- Remove tiles. To remove a content tile use the icon button within the footer.
- Circular image. Every tile contains either an icon or a picture.
- Structure. Tiles contain a header, body, and footer. The footer is quite flexible and may imply a link, buttons or both.
Headline is truncated after two lines
The point of tiles is to give a good overview to users and provide them with key information. The overview can get quite complex when using the content tiles (infinite infos). So we try to avoid these type of tiles whenever possible.
Headline is truncated after two lines
The point of tiles is to give a good overview to users and provide them with key information. The overview can get quite complex when using the content tiles (infinite infos). So we try to avoid these type of tiles whenever possible.
Headline is truncated after two lines
The point of tiles is to give a good overview to users and provide them with key information. The overview can get quite complex when using the content tiles (infinite infos). So we try to avoid these type of tiles whenever possible.
Headline is truncated after two lines
The point of tiles is to give a good overview to users and provide them with key information. The overview can get quite complex when using the content tiles (infinite infos). So we try to avoid these type of tiles whenever possible.
```html
h6>Headline is truncated after two lines
The point of tiles is to give a good overview to users and provide them with key information. The overview
can get quite complex when using the content tiles (infinite infos). So we try to avoid these type of tiles whenever possible.
```