Build Tile: Stats

Page Content

Tile: Stats

Use the Tile: Stats content type to display a statistic in a grid or slider. These tiles can be linked or simply used to display information. 

Learning objectives

  • Understand the purpose of a stat 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 new Tile: Stats content type to a page:

  1. Click the Add Content button.
  2. Select Tile: Stats 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 (recommended for stats)
      • Triple Width: 1440x480 rectangular tile
    • Background color: Select color of tile, options include black, blue, gray, light gray, teal, white, and yellow.
    • Statistics: Add the stat, ideally a number or just a few words.
    • Description: Required, adds descriptive text to the tile to explain the stat.
    • 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

  • Keep numbers concise and readable; avoid cluttering a tile with too much text
  • Use short labels for what the number represents
  • 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

  • These tiles are square by default, but will take on a flexible size if content grows, and the height will be maintained for the row with any other tiles
  • Max size is listed as 150, but is likely between 4 and 6; actual limit varies based on the characters being used

Additional resources

By now, you should feel confident selecting and applying stat tiles 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.

#

Brief description of stat goes here. Square stat tiles look nice in a row of 3. Can also look nice next to other kinds of tiles.

5

Tile content types available to use on a Studio Site webpage (Example of Tile: Stats)

Icon-Patient-Care-Black

Tile: Color with Icon

Tile: Color content types can look nice next to Tile: Stats as well. (Example of Tile: Color)

Ready to enhance your content further?

Check out the next module.

Deleting content
menu
Close