Build Fifty-Fifty

Page Content

How to Use the Fifty-Fifty Content Type

The fifty-fifty content type is used to display prominent information on a page alongside an image, with the option to add a button or "arrow" links. This content type is quite versatile and offers a variety of formats and background colors. In this module, you will learn how to add a fifty-fifty content type to a page.

Learning objectives

  • Understand the purpose of the fifty-fifty content type
  • Learn how to create and format fifty-fifty sections, including displaying text, images, buttons, quotes, and videos

Instructions

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

How to add a fifty-fifty content type

  1. Click the Add Content button.
  2. Select Studio Site - Fifty-Fifty from the list of content types.
  3. The content elements you use depend largely on how you'd like the fifty-fifty to look on the page. At a minimum, use the following content elements:
    • Name: Add descriptive name of content type to be used within T4 Site Structure.
    • Background color: Select a background color. Options include black, blue, gray, light gray, teal, white, and yellow.
    • Full bleed: Select Yes to expand the fifty-fifty to touch the outer margins of the page. Leave blank to add white space between the edge of the fifty-fifty and the edge of the page.
    • Media left/right: Select if you'd like the image to appear on the left or right side of the fifty-fifty.
    • Text alignment: Select if you'd like the text to be center, left, or right aligned.
    • Image: Click Select Media to choose an image from the T4 Media Library. This content type uses the CDN PXL, so you do not need to resize the image prior to uploading it to the T4 Media Library.
    • Heading: Optional, used to add bold heading text.
    • Sub Heading: Optional, used to add a subheading.
    • Description: Optional, used to add a short description.
    • Follow the additional content element instructions by the examples below to match the layout and design of the example.
  4. After you've added the desired content elements, 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.

Video tutorial

Best practices

  • Ensure the text and image are balanced to avoid overwhelming one side of the layout
  • Use this content type to highlight key information
  • Include buttons or "arrow" links only when they are essential to the user experience
  • Make sure text, images, and buttons are aligned in a visually appealing way; consistent spacing between elements ensures a cohesive look

Common issues and troubleshooting

  • Images may be displayed differently on different browsers
  • Sometimes the size of the text will limit image height, sometimes image height will be preserved and there will be extra height on the description to match
  • If you add multiple media types (image, video, quote), the content type will attempt to incorporate them all
  • At certain screen sizes, Internet Explorer images will start to be distorted, due to the "object-fit" property not being supported
  • All quotes currently show up as links

Additional resources

You should now be able to effectively create and configure the fifty-fifty content type to display text, images, quotes, videos, and buttons in an organized and visually consistent manner.

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.

Examples of the content type

Due to the versatility of this content type, there are several examples provided below. Click on the accordion under the example to review the specific content elements needed to achieve that layout. 

Example fifty-fifty with image and button link

Two Mayo Clinic employees speak together in the hallway at Mayo Clinic.

Bold heading goes here

Sub heading goes here

Add description text here.

This example shows what a fifty-fifty with a "call to action button" looks like. 

Example button

Content elements

  • Name: Add descriptive name of content type to be used within T4 Site Structure.
  • Background color: Select desired background color - this example shows yellow.
  • Full bleed: Select "Yes"
  • Media left/right: Select "Left"
  • Text alignment: Select "Left"
  • Image: Click "Select media" to choose an image from the T4 Media Library. This content type uses the CDN PXL, so you do not need to resize the image prior to uploading it to the T4 Media Library.
  • Add desired text for Heading, Sub Heading, and Description.
  • Do not fill in content elements for Quote/Name/Title, Research interests, YouTube/Brightcove Video Embed.
  • CTA text: Add desired text (examples: "Learn more" "Contact us" "Apply now")
  • Use only one of the following:
    • Link (internal): Use to link to a different section or a specific content type within your Studio Site.
    • Link (external): Paste the URL to an external website (any webpage that is not part of your Studio Site, including other Mayo Clinic websites).
  • Links: Leave blank.
  • White border on Image: Optional, left blank for this example.
  • Leave remaining content elements blank.

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.

Example fifty-fifty with image and arrow link

Trainee at Mayo Clinic works in the lab with test tubes.

Another example

Sub heading goes here

This example shows what a fifty-fifty with arrow links looks like.

Content elements

  • Name: Add descriptive name of content type to be used within T4 Site Structure.
  • Background color: Select desired background color - this example shows white.
  • Full bleed: Select "Yes"
  • Media left/right: Select "Left"
  • Text alignment: Select "Left"
  • Image: Click "Select media" to choose an image from the T4 Media Library. This content type uses the CDN PXL, so you do not need to resize the image prior to uploading it to the T4 Media Library.
  • Add desired text for Heading, Sub Heading, and Description.
  • Do not fill in content elements for Quote/Name/Title, Research interests, YouTube/Brightcove Video Embed, CTA text, or CTA link (internal or external).
  • Links:
    1. Add a bulleted list.
    2. Next to each bullet, add the text you'd like to display on the arrow link. 
    3. Highlight all of the text next to one bullet point.
    4. Click on the insert/edit link icon. 
    5. Use only one of the following:
      • Insert section link: Click then navigate to the page you'd like to link to within your Studio Site website.
      • Insert content link: Click then navigate to a page within your Studio Site website. Select the content type on that page that contains the content that you'd like to link to.
      • Link to external site: Click and paste the URL to an external website (any webpage that is not part of your Studio Site, including other Mayo Clinic websites).
    6. Repeat steps 3-5 for all bullet points/arrow links. 
  • White border on Image: Optional, selected "yes" for this example.
  • Leave remaining content elements blank.

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.

Example fifty-fifty profile (with quote, image, and text)

Add short quote from person here.

FirstName LastName, M.D.
Title (optional)
720x480 photo of a person at Mayo Clinic as an example of a fifty fifty photo option

Person's name as heading

Add a short description about person here.

Research interests: Can add research interests in a list here (optional)

View publications

Content elements

  • Name: Add descriptive name of content type to be used within T4 Site Structure.
  • Background color: Select desired background color - this example shows yellow.
  • Full bleed: Select "Yes"
  • Media left/right: Select "Left"
  • Text alignment: Select "Left"
  • Image: Click "Select media" to choose an image from the T4 Media Library. This content type uses the CDN PXL, so you do not need to resize the image prior to uploading it to the T4 Media Library.
  • Add desired text for Heading, Sub Heading, and Description.
  • Quote: Add text of short quote.
  • Quote Persons Name: Add first and last name and credentials of the person that said the quote (optional).
  • Quote Persons Title: Add the title of the person that said the quote (optional).
  • Research interests (Profile only): Add research interests of the person that said the quote (optional)
  • Do not fill in content elements for YouTube/Brightcove Video Embed.
  • CTA text: Add desired button text (examples: "View publications" "Learn more" "Schedule consultation" etc)
  • Use only one of the following:
    • Link (internal): Use to link to a different section or a specific content type within your Studio Site.
    • Link (external): Paste the URL to an external website (any webpage that is not part of your Studio Site, including other Mayo Clinic websites).
  • Links: Leave blank.
  • White border on Image: Optional, selected "yes" for this example.
  • Quote with gray background color: Optional, select "yes" to add gray background to the quote - left blank for this example.

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.

Alternatively, you may want to consider using a Tile: Quote content type paired next to a Studio Site - Tile: Picture content type.

Example fifty-fifty quote with accompanying text (no image)

Without an image, there is space for a little bit longer quote here. You can even fit two sentences here and it still looks nice.

Someones Name
Title

Add a heading here

If you didn't want to use arrow links, a button would work here as well. Be sure to look at other quote options in Studio Sites outside of the fifty-fifty content type as well, especially if wanting to use a longer quote.

Content elements

  • Name: Add descriptive name of content type to be used within T4 Site Structure.
  • Background color: Select desired background color - this example shows teal.
  • Full bleed: Select "Yes"
  • Media left/right: Select "Left"
  • Text alignment: Select "Left"
  • Image: Leave blank.
  • Add desired text for Heading, Sub Heading, and Description.
  • Quote: Add text of short quote.
  • Quote Persons Name: Add first and last name and credentials of the person that said the quote (optional).
  • Quote Persons Title: Add the title of the person that said the quote (optional).
  • Do not fill in content elements for Research interests, YouTube/Brightcove Video Embed, CTA text, or CTA link (internal or external).
  • Links:
    1. Add a bulleted list.
    2. Next to each bullet, add the text you'd like to display on the arrow link. 
    3. Highlight all of the text next to one bullet point.
    4. Click on the insert/edit link icon. 
    5. Use only one of the following:
      • Insert section link: Click then navigate to the page you'd like to link to within your Studio Site website.
      • Insert content link: Click then navigate to a page within your Studio Site website. Select the content type on that page that contains the content that you'd like to link to.
      • Link to external site: Click and paste the URL to an external website (any webpage that is not part of your Studio Site, including other Mayo Clinic websites).
    6. Repeat steps 3-5 for all bullet points/arrow links. 
  • Leave remaining content elements blank.

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.

Alternatively, you may want to consider using a Tile: Quote content type.

Example fifty-fifty with video and button link

Add a heading here

Add a short description here that relates to the video and button link. Arrow links could here instead of a button if preferred.

Learn more

Content elements

  • Name: Add descriptive name of content type to be used within T4 Site Structure.
  • Background color: Select desired background color - this example shows blue.
  • Full bleed: Select "Yes"
  • Media left/right: Select "Left"
  • Text alignment: Select "Left"
  • Image: Leave blank.
  • Add desired text for Heading, Sub Heading, and Description.
  • Do not fill in content elements for Quote/Name/Title, or Research interests.
  • Choose only one: 
  • CTA text: Add desired text (examples: "Learn more" or "Watch now")
  • Use only one of the following:
    • Link (internal): Use to link to a different section or a specific content type within your Studio Site.
    • Link (external): Paste the URL to an external website (any webpage that is not part of your Studio Site, including other Mayo Clinic websites).
  • Leave remaining content elements blank.

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.

Ready to enhance your content further?

Check out the next module.

Profiles
menu
Close