Spotlight(s)
Spotlight(s)
This is a Short Spotlight, right aligned, in the default color.
Banner Images
Click your site's color palette from the left sidebar to see how each Component will look on your website.
Jump to:
Types of Banner Images:
- Banner Image(s) with Partial Overlay and Text (formerly Hero (Gradient) - Slider
- Banner Image(s) with Text Box (formerly Hero (Layered) - Slider
- Banner Image (formerly Hero (No Text))
- Banner Image with Full Overlay and Text (formerly Hero (Overlay))
- Spotlight(s) (formerly Spotlight - Slider)
What is a Banner Image?
This Component is essentially a large image with a variety of different styling options.
They can be placed in one of two locations:
- At the top of the page, above all of the content and side navigation bars. This area is called the full-width region. As the name suggests, inserting a Banner Image in the full-width region allows your image to span the entire width of the page.
Only one type of Banner Image can be added in the full-width region of a page, and depending on the style chosen, multiple images may be selected. The types with multiple image capabilities are those with "image(s)" in the name. - Within the main body of the page. Banner Images are a type of Component that you can add to any flexible page. You can add as many as you want within the page. When choosing a Banner Image Component in the main region, the image will not span the entire width of the page; instead it will be limited to the same area as any other Component type.
Banner Image Styles
Your site is equipped with 5 different styles of Banner Image. This page provides examples of each in the main region of your page.
Examples of the different Banner Image styles in the full-width region can be found at the top of each of the other Component Reference Pages on this site.
Banner Image(s) with Partial Overlay and Text
The Partial Overlay Banner style is a large image with optional text. It has a gradient from black to transparent that provides enough contrast for the text to be legible while allowing a large portion of the image to also remain visible.
The gradient can begin from the left or the right.
It can have a single or multiple images.
An example in the full-width region can be found on the Text Areas and Typography Styles page.
Here is an example in the Main Region.
Banner Image(s) with Partial Overlay and Text
The gradient in this example comes from the right.
Banner Image(s) with Partial Overlay and Text
The gradient in this example comes from the left.
Banner Image(s) with Text Box
The Text Box Banner style is a large image with optional text. It has a box of text layered over a portion of the image. The text overlay box can be shown in a handful of colors, which are determined by your theme and color palette.
This style of Banner Image can have a single or multiple images.
An example in the full-width region can be found on the Elements to Highlight Information page.
Here is an example in the Main Region.
Banner Image
The Banner Image style is simply a large image without any text. Only one image can be used in this style, and links cannot be included.
An example in the full-width region can be found on the Postcard Layouts page.
Here is an example in the Main Region.
Banner Image with Full Overlay and Text
The Full Overlay and Text Banner style includes text on a translucent colored background that completely covers an image. The color of the background can be selected from a handful of choices based on your website's theme and color palette. An optional link can be included. This style only allows one image to be used.
An example in the full-width region can be found on the Collections page.
Here is an example in the Main Region.
Spotlight(s)
The Spotlight(s) Banner style includes text and an image or images in a colored box. Spotlights can be tall or short and their image(s) can be right or left aligned. They can also include a link, which appears as a secondary button. The background will either be the default that is determined by your site's theme and color palette, or gray.
This style of Banner Image can have a single or multiple images.
An example of the Tall Spotlight(s) in the full-width region can be found on the Layouts for Photos and Media page. A Short Spotlight(s) example can be found at the top of this page.
Here are examples in the Main Region.
Tall Spotlight Right Aligned, Default Color
Spotlights can be tall or short. They can include an image which is right or left aligned. They can also include a link, which appears as a secondary button.
Spotlights are a great way to highlight a piece of news or new publication. They can also be used to break up long sections of text, or as headings to introduce different areas within a degree program (e.g. different subplans).
Spotlight Second Image
The styling of each Spotlight within a group doesn't have to be uniform! In this example, the first image is on the default background and right aligned, while the second image is on a gray background and left aligned.
Short Spotlight left Aligned, gray background
Short Spotlight left Aligned, gray background
Content in a Spotlight is limited. Tall Spotlights allow 125 words (~625 characters) and Short Spotlights allow 60 words (~300 characters).
Text formatting options are somewhat limited compared to other Component types. Options include bulleted or numbered lists, vertical line, or bold/italic text.
Resources
Additional information, including step by step instructions for using Heroes as shown above can be found in our Drupal 9 Wiki Guide: