Example One
The example below uses the Medium Blue color option and has the Title Accent Underline (small yellow bar under the Title).听The Image Width Percent is set to 50% which means the image and text block will have the same width. The Image Minimum Height was left at the default 350 pixels. The image dimensions are 1,200 x 631 pixels. The image dimensions are 1,200 x 613 pixels.
Example Two
The example below uses the Dark Blue color option with the image placed on the right-hand side. The Image Width Percent is set to 60% which means the image will take up 60% of the banner while the text block gets the remaining 40%. The image dimensions are 1,000 x 433 pixels. The image dimensions are 1,000 x 433 pixels.
Image crop: below is the image used in this banner. Most likely you won't see the full width of this wide pano image. How much you see depends on the width of your browser window and where the cell is being used (in the body content of a page with left-hand navigation, without left-hand navigation or in the Featured Content area). When cropping occurs, the image will display from the center.
Example Three
The example below is from the ReGaiN Lab web site. It uses the Light Gray color option and no Title Accent Underline or button. It displays a sticker that doesn't link because no url was provided. The Image Width Percent is set to 50% which means the image and text block will have the same width. The image dimensions are 863 x 829 pixels. The image dimensions are 863 x 829 pixels.
Example Four
This example uses the Medium Blue color option and a YouTube Video rather than an image. The Image Width Percent is set to 60% which means the video will take up 60% of the banner while the text block gets the remaining 40%.
Example Five
This example uses the White color option and a Panopto Video rather than an image. The Image Width Percent is set to 50% which means the video and text block will have the same width.
Example Six
This example uses the Medium Blue color option with a Custom Menu as well as a Sticker that links out. The Image Width Percent is set to 60% which means the photo will take up 60% of the banner while the text block gets the remaining 40%. The image dimensions are 2,000 x 1363 pixels. The image dimensions are 2,000 x 1,363 pixels.
Example Seven
This example is from the Department of Urology. It uses the Medium Blue color option with a Custom Menu and a YouTube Video. The Image Width Percent is set to 60% which means the video will take up 60% of the banner while the text block gets the remaining 40%.
Example Eight
The example below is from the Department of Radiology. It uses the White color option with a Title Accent Underline and a button. The Image Width Percent is set to 50% which means the image and text block will have the same width. The image dimensions are 1,000 x 667 pixels. The image dimensions are 1,0000 x 667 pixels.
Example Nine
This example uses the Dark Blue color option and displays the Title Accent Underline. The Image Width Percent is set to 40% which means the image will take up 40% of the banner while the text block gets the remaining 60%. The image dimensions are 700 x 1,050 pixels and the image alignment is set to Center and Center.
Example Ten
This example is the same as example nine (above), except a couple of the settings were modified. These two examples emphasizes the importance of adjusting settings to suit specific placement scenarios. In this example, the Image Width Percent was changed to 30% and the Image Minimum Height was set to 550 pixels. These adjustments were made so that the content would look good in a wider space, such as on a page without left-hand navigation or when placed in the Featured Content area. Also, the image alignment is set to Center and Top. Resize the width of your browser window (from really large to really small), to see the effect the alignment setting has on the image.
Example Eleven
This is the same as the example above except that the Image Minimum Height was set to 0 pixels. This will hide the image at small screen sizes.
In Example Nine, vertical alignment was set to center, causing the top of Dr. Page's head to be cut off when viewed at a small screen size. Example Ten adjusted alignment to top, resulting in the bottom of Dr. Page's head being cut off. Setting alignment to bottom would only exacerbate the issue. Increasing the Image Minimum Height would display more of the image, but it might be too large for small screens. By setting Image Minimum Height to zero in this example, the image is hidden on small screens, presenting a cleaner layout without cropping issues.听Resize your browser window to see this in action.