Tile Card Component

Always break up your content to ensure users can scan it quickly. Decide which content to prioritize by checking Google Analytics and your data dashboard. Tile cards of different kinds present a scannable and clean way to organize links, especially when there are a lot of them and they are important enough to be displayed prominently.

You may also use the tile cards without links to provide more descriptive copy and to emphasize important points and steps. Headers are a great place to add search engine-optimized (SEO) keywords or phrases.

You’ll find different ways to prioritize content with this component, depending on traffic. For example, the Collaborative Software and Services page gets 2,000 unique visitors monthly, while Tech Services only gets 200. Use a lead story card to offset and emphasize the Collaborative Software page, then incorporate a tile card for Tech Services.

Tile card with icon

If you want to feature different links prominently, tile cards with icons show the reader precisely what content each tile offers. Icons provide quick visual markers for users to find what they need, which is especially handy as readers are often skimming and reading on mobile devices.

For example, you can use a magnifying glass icon if you have a tile card that links to a jobs portal. That way, when users quickly scan through the page, they can easily identify these visual cues that signify the content they need.

Tile card with headline and call-to-action

If you have essential content that doesn’t need to feature it as prominently, the tile card with a call-to-action is a good choice. Briefly describe what the user will find when they click the link. A clear call-to-action will direct them to the next step.

For example, if you want to direct the user to the IT Services page, which is not as popular as the other pages, add the title, “IT Services,” then a quick one-liner to describe what the linked page contains. Then, add a clear call-to-action telling the user what to do and where to go, such as “Call today.” You can also remove the call-to-action to use the tile to offset important information.

You can also eliminate the call-to-action and use the tile as a call-out for messages or essential steps.

Tile card with call-to-action

This tile features clear steps for the user. The small tile is a good choice for even more straightforward, clean-looking content that’s significant but not as big of a priority. This component saves space, links out, and provides a quick and accessible description of what the user will find. If you want to feature individual services that merit some brief description, incorporate the title card with a call-to-action linking directly to the next page gets users where they need to go.

You can also eliminate the call-to-action and use the tile as a call-out for messages or essential steps.