Build Tile: Color

Page Content

Tile: Color

Tile: Color is a dynamic, visual content type you can use to display images and calls-to-action in grids or sliders. Choosing effective tile background colors helps convey your message, enhances readability, and reinforces visual branding. You can add a single, double, or triple-width tile with a background color to a page. When used alongside other tile content, tiles can form a grid or slider. Color tile background color options include many different color options based on the Mayo Clinic color palette. You can also optionally include an icon image on a color tile content type. 

Learning objectives

  • Understand the purpose of a color tile
  • Learn how to select and apply colors to individual tiles based on content
  • Explore how to organize tiles into grids or sliders to enhance visual appeal and usability

Instructions

From the T4 Site Structure, navigate to the page you are updating. 

How to add a color tile content type

  1. Click the Add Content button.
  2. Select Tile: Color from the list of content types.
  3. Use the following content elements:
    • Name: Add descriptive name of content type to be used within T4 Site Structure.
    • Type of tile:
      • Full bleed: Stretches the tile to touch the surrounding content (or the edge of the page).
      • Not full bleed (w/ margin): Adds a white space margin between the edge of the tile and the surrounding content (or the edge of the page).
      • Not full bleed w/ slider (w/ margin): Adds a left and right arrow on the sides of the page to scroll through all of the tile content that has this option selected. Recommended to use with a minimum of four tiles (Also includes white space margin between the edge of the tile and the surrounding content).
    • Slider Autoplay: Select to have the page automatically scroll through a minimum of four tiles at timed intervals. Use sparingly.
    • Width of tile:
      • Double Width: 1024x512 rectangular tile
      • Round (Tile: Picture only): 512x512 round tile
      • Square: 512x512 square tile
      • Triple Width: 1440x480 rectangular tile
    • Background color: Select color of tile.
    • Icon: If you have an icon image uploaded to the T4 Media Library, you can click Select Media to choose an icon to include with your color tile.
    • Heading: Required, adds bold heading text at top of tile.
    • Description: Optional, adds smaller text to the tile.
    • Open link in new tab: Select to have the link open in a new tab.
    • Choose only one of the following (or leave blank): 
      • Link (internal): Use to link to a different section or content type within your Studio Site.
      • Link (external): Paste URL to an external website (any website that does not include "education.mayo.edu" in the beginning of the URL). 
  4. Click the Save Changes button to save content as a draft, or press the arrow and select Save and Approve to save and publish updates.

Best practices

  • When using non-linked texts on tiles, don't use the blue color tile
  • Be mindful of character limits and be mindful that phrases with long words must be shorter to allow the words to break correctly without expanding the size of the tile
  • Limit the number of tile background colors to maintain a cohesive taste and avoid visual clutter
  • Preview tiles across different screen sizes and devices to ensure color fidelity and accessibility remain intact

Common issues and troubleshooting

  • Content was intended to expand the height of the row as necessary, but this functionality doesn't work correctly in Internet Explorer, causing wrapping issues and hidden content on certain screen sizes
  • On mobile displays, content will take as much space as necessary (not locked to a square)

Additional resources

By now, you should feel confident selecting and applying tile background colors that enhance readability, align with brand standards, and support your content.

Explore the possibilities: Content type examples

Browse through the examples below to see how the type can be used in different scenarios and design choices.

Icon-Patient-Care-Black

Heading text

Description text can go here. Can choose to add an icon image if desired.

Heading space can also be used to just add bolded text on a tile, especially if skipping the description field.

contact icon

Have a question?

Submit a request on Workfront to reach out to our team.

Triple width tiles work well for a lot of text. Put text to emphasize here.

You can also add a description with additional text if you'd like. There is significantly more space to include text in the description of a double or triple width Tile: Color content type (as opposed to the single width "square" tile). Background color options include Black, blue, gray, light gray, teal, white, and yellow. This example uses light gray.

menu
Close