Build Tile: Quote

Page Content

Tile: Quote

Use the Tile: Quote content type to add a tile with a quote and the name of the person who said the quote to a Studio Site page.

Like other tiles, Tile: Quote content types are available in square (single), double, or triple-width tiles. Quote tiles can be used on their own as triple-width tiles. They also tend to pair nicely next to a Studio Site—Tile: Photo or a Studio Site—Tile: Video content type, like the examples below. 

Learning objectives

  • Understand the purpose of a quote 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: Quote content type to a page:

  1. Click the 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: Not recommended for Tile: Quote content types.
    • 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 (required).
    • 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.
    • 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

  • In general, don't link these tiles; the text color will change to indicate that it's linked, but it would be unusual for there to be enough context to demonstrate to the user where the link will go
  • 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

Additional resources

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

This first example shows a square Studio Site - Tile: Picture content type next to a double width Tile: Quote content type (full bleed, no margin). 

Losing family members to liver disease motivated Essa Mohamed to get a Ph.D.
Example of Tile: Picture

Persons Name

Use this Tile content type to add a quote in a square, double, or triple width tile. The Tile: Quote content type pairs well as a double width tile next to a square Tile: Picture content type.

Persons Name
(Example of Tile: Quote)

You might also choose to pair a square Tile: Quote content type with a short quote from a video next to a double width Studio Site - Tile: Video content type (with the quoted video embedded), similar to this example:

Heading text

Example of Studio Site - Tile: Video

Heading text

You can use a square tile for short quotes.

Persons Name
(Example of Tile: Quote)

Ready to enhance your content further?

Check out the next module.

Tile: Stats
menu
Close