Tiles

Tiles are functional, organized UI components for navigation and content grouping. They improve user experience, increase engagement through clickable areas, and ensure design consistency. Tiles, often arranged in grids, provide a clean, organized layout that makes websites easy to navigate and visually appealing.

Tiles are effective for grouping related information, allowing for the display of large amounts of content in a structured manner. Because they are frequently interactive, tiles can improve user engagement and encourage users to explore more of the site.

We have a few variations of tiles that can be used for different purposes across the website to improve the overall experience on a webpage.

.Tile Class

By adding the .Tile class to an html element you can create an appealing UI element that can be used on the website.

In it's base form it is a flex-column display that adds border and box shadow to the container with padding. Content remains left aligned. It fills the space its given 100%. This isn't ideal in most cases so we want to use the tile in certain scenarios/layouts with additional content within it to create a better UI element and experience for the user.

First, lets add some additional content to the tile. Tiles across our website consistently use icons. We will also fill in some Lorem Ipsum to show how it will look with descriptive content.

Our tiles can take additional content if the design calls for it. In this next example we add a heading.

Tiles can also include a button. You can use any of our buttons in place of the one in the example.

Clickable Tiles

Tiles often function as jump off points to more content across the website. You may find them with buttons like the previous example. You will sometimes see them with headings that are links as well. To create a better experience for the user, you can make the entire tile clickable by using the .Tile-link class. The html within it is structured slightly different with an anchor tag to achieve this.

The example below uses the .Tile-link class and makes the entire tile clickable. You can hover over it to see the effect. NOTE: Clicking the example below won't have any effect, because the href isn't set to a specific link. After you add it to the website you can link it properly to the desired page.

Clickable tiles are available in different formats, and it all depends on the content within the tile. The example above uses a paragraph tag to wrap the text. If the content is meant to be a heading you can replace the p tag and use an h2, h3, or h4 tag as the wrapper within the tile. The below example uses an h3. Note: The icon and font take on the font size for the heading used.

You may require more content within a clickable tile. To give it a proper heading with supportive text you will need to wrap the inner tile in a span tag and apply the .Tile-heading class to the heading text. The example below uses this technique. It creates a visually appealing tile with structure that can be linked to more content.

Tile Layout

So far tiles have been displayed full width in their container. Using a tile to stretch full screen is rarely used on our website unless it is a mobile screen size. Ideally you would use a tile when it is in a layout where it's container isn't stretching the whole screen. This is achieved by using a specific column layout with Grid and Flex, or by adding additional tiles with it.

Lets create a few more tiles in a grid layout to see how it will improve the UI. This will create a better experience for the user and allow you to present more organized content. We will use a three column layout with Grid to show this.

You can display tiles in various Grid layouts that fit the design. Let's look at a scenario where you have a two column Grid where general content is in the left column, and four tiles are stacked in the right column.

Tiles Without Border

Some designs may require no border on the tile. Using the class .Tile-noBorder will strip the box shadow and border from the tiles. Let's take the three column tile display above and strip the border.

Tile CTA

Certain designs may call for more attention to a single tile. It may be a situation where there is a main CTA requiring more focus on a specific tile. The .Tile-cta class can be used on that tile. Below is a grid layout with four clickable tiles with one using the .Tile-cta class to make it stand out.

Rules for Tiles

Tiles are a great way for improving the UI/UX on a webpage. Due to this, you may find yourself trying to utilize them in a way they are not meant for. Below will help you choose when to use a tile, and when it may not be the best fit.

Purpose

Tiles shoud be used to organize and break up multiple pieces of content in a visually appealing way. It is implemented on a webpage with other tiles either stacked or side by side, usually three or more. They may be used for a jump off point to another page with more content/details. If content is extensive, with large bodies of copy (multiple paragraphs) for each individual Tile, then Tiles are most likely not the best fit. Content for each Tile should be coincise and meaningful. Our tiles follow a similiar layout: Icon, Heading (optional), Paragraph, Button (optional), all stacked in a verticle layout.

Overriding Tile Styles

In order to create a consistent web experience for the user, certain UI components should be similiar across the website. The tile design should remain consistent to maintain that experience. It is important to maintain global styles for site management. If you find yourself needing to alter the built in styles for the Tile, then it is most likely a situation where tiles are not the best fit. Certain styles within the tile should not need to change:

• Margin/Padding - The tiles already have built in margin/padding. 
• Border/Box-shadow - Tiles have this built in to the design. Use the .Tile-noBorder class if the design is to remove it.
• Font Size - Headings, paragraphs and buttons are all predefined with proper size
• Font Color and Background - the tile is set as white background with our global font color. If a tile needs a background change it should fall under the use case for Tile-cta.

Icons

Icons can change based on the design. Sometimes they may need to be slightly bigger or smaller from the built in styles. This should be clearly defined by the designer, not assumed, before making a change to icon size. Fontawesome has classes that can be entered inline to adjust the size of icons in these situations. Only use Fontawesome's built in classes, do not create new ones. You can also alter Icon color when needed to fit the design using our exisiting color classes.

Buttons

Standard Tiles can have buttons in them. However, we should not be using clickable tiles with buttons. It needs to be one or the other. Buttons should not be altered. Use our existing buttons within the tile.

Headings

Using headings within the tile depends on the section, content layout, and proper semantics. In some cases the tiles are supportive in a section that doesn't require a heading, because one already exists. Other times, the content within the tile may require a heading. This is all determined on a case by case basis. It is acceptable to have a tile that is only paragraph text when the section already has a proper heading.

Examples of UI elements that are not Tiles, but look similiar

There are cases when UI elements could use a Tile class based on how they are visually presented in the design. However, just because the Tile class would help create the same visual design of the element doesn't mean it should be used if it doesn't fit the purpose. Instead, you should use other classes in the design system to create the element.

The element below has an icon, a title, and descriptive copy. However, the layout is different from a standard Tile. You also need to evaluate how it is being used to support other content on the webpage. In it's current use, it's purpose doesn't fit a Tile. The desired visual design can easily be accomplished using Flex, border, and image classes in the design system.

Visit Us

Find a location, attend an event or schedule a personal appointment.

This element has a border, heading, copy and a button, but it isn't a tile. The border is used to break up content from another section on the page. It can easily be created using grid and flex layouts. If this was grouped with several other pieces of similiar content, then the Tile class would make sense to use on them all, but that isn't the use case for this element.

Conclusion

Tiles are an effective way to improve the user experience across the website. They help to organize content in a visually appealing way and can provide jump off points for users to access more content on the website. Take a look at our advance layout section to view different ways to better utilize tiles across the website.