Tiles
Tiles are a popular and useful framework for displaying, grouping, and showcasing content, such as images, text, or a combination of both. Learn more about the structure, construction and layout of tiles in print and digital media.
-
Essentials
-
Examples
-
Placement
-
Padding and spacing
-
Background and borders
-
Dos and Don'ts
Essentials
Tiles are effective because they have a clean and organized look and feel while easily adapting to a variety of canvas and device sizes. Tiles can be subdivided vertically and horizontally, much like the whole layout canvas. In digital media, you can also use Cards as interactive tiles.
Examples
Placement
Align tiles preferably with the text in the type area. In some layouts, it may make sense to align the tiles with the Postyellow gradient in the branding area. In this case, be sure to align the text inside the tiles with the type area.
Padding and spacing
In print media, we recommend the following:
- Spacing between tiles: 0.5 base units
- Padding inside tiles: 1 base unit
Background and borders
Feel free to to design tiles with a background color, image, and borders as needed. Choose an image or color that fits the overall look and feel. Strive for a harmonious relationship between section colors and the background behind the group of tiles. We recommend gray tones for borders and extending images to the edge of the tile.
Dos and Don'ts
Fill tile background with white, gray tones, Postyellow or the full-format gradient.
Don’t format tile backgrounds in DHL Red, black or transparent shades, and don’t use multiple background colors within one group of tiles.
Fill tile background with white or gray tones on Postyellow section backgrounds.
Don’t format tile backgrounds as a gradient or place them on Postyellow section backgrounds.
Place tiles within one layout section.
Don’t allow tiles to overlap layout sections.