Build Tiles

Page Content

Tiles

There are a variety of "Tile" content types that can be used to add content in a single, double, or triple width tile. Tiles can form a grid or a slider when used alongside other tile content. 

Use the Tile: Stat content type to add a tile with a number and description of a stat to a page. These content types often look best as a single width (square) tile.

Important note about stats: 

Programs are welcome to supply stats that are specific to their program/department such as:

  • Length of program
  • # of positions open per year
  • # of graduates since xxxx
  • # of patients seen each year
  • # of procedures completed each year
  • # of board-certified faculty members

However, any stat that claims a specific rank for the program/department/hospital ("#1 Hospital for xyz..." etc) or that comes from an outside source (U.S. News & World Report, Doximity, etc) must be added by the ESDE team.

Tile: Stat

Use the Tile: Stat content type to add a tile with a number and description of a stat to a page. These content types often look best as a single width (square) tile.

Adding or editing a Tile: Stat content type

Navigate to the page your updating through the T4 Site Structure or through Direct Edit Mode. 

  1. Click the green 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: Do not use.
    • 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 background color of tile.
    • 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 (only if adding a link).
    • Choose only one of the following (or leave blank): 
      • Link (internal): Use to link to a different section or content type within the college.mayo.edu website
      • Link (external): Paste URL to an external website (any website that does not include "college.mayo.edu" in the URL, including other Mayo Clinic websites).
  4. Click the blue Save changes button to save content as a draft. Preview your updates an ensure the content displays appropriately, follows MCCMS Styles and Standards, and is free of errors. If everything displays correctly in the preview, approve the updates to be published.

*The margins of the tile you select in the "Type of tile" field must match surrounding tile content types (ie. all tiles set to "full bleed")

Tile: Color

Use the Tile: Color content type to add a single, double, or triple width tile with a background color. You can also optionally include an icon image on a Tile: Color content type.

Adding or editing a Tile: Color content type

  1. Click Add content.
  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: Do not use.
    • 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 background color of tile.
    • Icon: If you have access to icon images in 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 the college.mayo.edu website
      • Link (external): Paste URL to an external website (any website that does not include "college.mayo.edu" in the URL, including other Mayo Clinic websites).
  4. Click Save Changes button to save content as a draft. Preview your updates and ensure the content displays appropriately, follows MCCMS Styles and Standards, and is free of errors. If everything displays correctly in the preview, approve the updates to be published.

*The margins of the tile you select in the "Type of tile" field must match surrounding tile content types (ie. all tiles set to "full bleed")

Tile: Quote

Use the Tile: Quote content type to add a tile with a quote and the name of the person that said that quote. 

Like other tile content types, the Tile: Quote content types are available in square (single), double, or triple width tiles. Quote tiles can be used on their own as a triple width tile. As a double-width tile, they also tend to pair nicely next to a square tile with a photo or a video of the person that said the quote. Quotes are typically too long to add to a square-width Tile: Quote content type. 

Adding or editing a Tile: Quote content type

Navigate to the page you're updating through the T4 Site Structure or through Direct Edit Mode. 

  1. Click the green Add content button.
  2. Select Tile: Quote 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: Do not use.
    • 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 desired background color of tile (often white is used for quotes).
    • Quote: Add text of quote (required).
    • Persons Name: Add first and last name and credentials of the person that said the quote (required).
    • Persons Title: Add the title of the person that said the quote (optional).
    • Open link in new tab: Select to have the link open in a new tab (only if adding a link).
    • Choose only one of the following (or leave blank): 
      • Link (internal): Use to link to a different section or content type within the college.mayo.edu website
      • Link (external): Paste URL to an external website (any website that does not include "college.mayo.edu" in the URL, including other Mayo Clinic websites).
  4. Click the blue Save changes button to save content as a draft. Preview your updates an ensure the content displays appropriately, follows MCCMS Styles and Standards, and is free of errors. If everything displays correctly in the preview, approve the updates to be published.

*The margins of the tile you select in the "Type of tile" field must match surrounding tile content types (ie. all tiles set to "full bleed")

Tile: Picture

Use the Tile: Picture content type to add a single, double, or triple width tile containing an image.

Prior to adding this content type, you should upload the image to the T4 Media Library. The Tile: Picture content type uses CDN PXL so you do not need to resize the image prior to uploading it to the T4 Media Library.

Learn more about adding a Tile: Picture to the college.mayo.edu website. 

Tile: Video

Use the Tile: Video content type to add a single, double, or triple width tile containing a link to a YouTube video.

Prior to adding this content type, you should upload the overlay image to the T4 Media Library. The Tile: Video content type uses CDN PXL so you do not need to resize the image prior to uploading it to the T4 Media Library.

Learn more about adding videos to the college.mayo.edu website. 

menu
Close