Build Tile: Color

Page Content

Tile: Color

Use the Tile: Color content type to add a single, double, or triple width tile with a background color to a Studio Site page. Tiles can form a grid or slider when used alongside other tile content. Tile: Color background color options include black, blue, gray, light gray, teal, white, and yellow. You can also optionally include an icon image on a Tile: Color content type. 

Examples

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.

How to add a new Tile: Color content type to a page

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

  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: 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, options include black, blue, gray, light gray, teal, white, and yellow.
    • 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 blue "Save changes" button to save content as a draft, or press the arrow and select "Save and approve" to save and publish updates.
menu
Close