Close menu Resources for... William & Mary
W&M menu close William & Mary

50-50 Row

The 50-50 row offers two side-by-side content areas of equal size — one presenting a large photo or YouTube video, the other a title, text and linked button.

Rows are available to specified users that have received the required training, consultation, and approval of their Cascade Manager.
Suggested Uses
  • Big idea presentation with one call-to-action
  • Profiles of people or testimonials
  • As a collection with other 50-50 rows — try alternating the layout of adjacent 50-50 rows
  • Replace a right-column widget (single image or video)
Create a New Row
  • Select your rows storage folder — this is likely labeled _rows or similar. If you don't have one yet, build one now.
  • From the top menu, select Add Content > Rows > 50-50.
Available Fields & Options
  • Page Name: Required field; this is your row's file name in Cascade; customize the default name of row-50-50.
  • Title: Required field; used as a section header for screen readers and should be meaningful.
  • Show Title? 
    • If unchecked: The title is used by screen readers but not visually displayed.
    • If checked: The is prominently displayed at the top of the text side of the row.
  • Row Theme: Select one of the available colors as the row's default theme. Elements within the row will be color-coordinated and optimized for design and accessibility. When placing the row on a page, the theme can be customized for that page.
  • Order of Elements: Applies only to the desktop view of the row; choose Media Left or Media Right; the text will appear on the opposite side of the row. The elements will always stack vertically on small devices with the media above the text.
  • Media Side: Required field; choose between Image or YouTube Video.
    • Right click a YouTube video and select "Stats for nerds" to get a YouTube Video ID.If Image is selected, use the file chooser to select an image uploaded to Cascade.
      • Preferred dimensions: 1288 x 860 pixels
      • Minimum image width: 644 pixels
    • If YouTube Video is selected, fill in the YouTube Video ID field. To get your ID, follow these steps:
      • Browse to the video on YouTube 
      • Right-click within the video
      • Select "Stats for nerds"
      • In the screen that appears, your Video ID is the short string of letters and symbols on the first line.
  • Show Caption and/or Credit?
    • If No: No caption and/or credit will visually display.
    • If Yes: Enter text to display a brief caption or photo credit below the media. Tip: when both a caption and photo credit are needed, italicize the photo credit text to help differentiate the information. The caption and/or credit will subtly display at the bottom of the media side of the row.
  • Text Side:
    • Text: Required field; enter text that appears below the title (if displayed) and above the optional button. 
    •  Button:
      • Button Text: Provide the text to appear on the button. Tip: The length of the text determines the size of the button — keep it short for an optimal appearance across devices.
      • Internal Link: Use to link the button to an available Cascade asset.
      • External Link: Use to link the button to an asset not available within Cascade.
      • Anchor: Use to specify an anchor for your internal or external link — no # symbol required. To link to an anchor located on the same page as the row, do not specify an internal or external link destination. New to anchors? Learn how to first create an anchor on your pages or rows.
Updating Row Content
  • To update the content of a row, edit and publish the row file. 
  • You do not need to publish the pages displaying the row.
  • If a row is unpublished or deleted, it will no longer appear on any live pages.

Tip: If you move or rename a row file, you will then need to publish any pages displaying the row. Not sure which pages are using the row? Check for relationships to the row.

Example 50-50 Rows

Below, we offer sample rows to demonstrate suggested uses and best practices.

A tour guide leading a tour of William & Mary's campus.

Explore Campus

Explore W&M on campus and from home through our tour opportunities, info sessions with a dean or counselor and virtual events to connect with current students. 

Alton Coston, III ’23

Alton Coston, III ’23

"Here, you can make yourself known... introduce your unique talents and passions to the greater community and create change, where you won’t be just another student — but a student supported with nurturing friendships and a professional network that will be happy to see you advance personally, academically and professionally."

How to Create a Content Page

Need to create a new basic page in Cascade? Watch a demonstration of the steps and follow along.

Keep Mobile in Mind

People are accessing the web from mobile devices now more than ever, so we always have to be thinking about how our content displays on devices other than our desktop screens. While the demonstrated website may look a little different now, this Cascade tip will guide you through easy methods for previewing your webpages on mobile devices.