The Spotlight Landscape Block behaves like the original Content Spotlight block. It combines an image, adjacent text, and a call to action. Use this Block to highlight or promote your featured content.
Spotlight Landscape Block
- Requires an image and copy
- Supports robust copy and an option to include a subheading and call to action
- Includes image placement and focus style options
- Can be used concurrently
- Can improve wayfinding when used on homepages and landing pages
- When using multiple Spotlight Blocks, alternate your image placement and consider including Dividers between your Blocks
Spotlight Landscape Design Options
- Heading Level: For the optional heading, you can choose either the Heading 1 or Heading 2 level. For Heading 1, the title of the page will be hidden, while the heading for this block is displayed instead.
- Color: The Spotlight Landscape block has no color by default. However, you can also choose between multiple other themes based on the color palette of your site.
- Image Position: Position your image on the right or left of your block. The image will appear side-by-side with the text.
- Image Size: Choose between a medium or large sized image.
- Focus: With this option, you can choose have equal focus on both the image and the text, or focus solely on the image.
Spotlight Landscape Examples
Below are examples of the spotlight landscape block being used on this page
Heading 2
In this example, the heading is displayed. The size of the image is large and and aligned to the left. The focus is on the image and text equally.
With a character limit of 500 characters, this block provides a text section large enough for a detailed description while maintaining the function of a visual break. Consider the amount of text when selecting the focus option in order to prevent large amounts of empty space.
This example shows a medium sized image on the right. With the focus on the image, the text takes up a smaller percentage of the block.
The optional links have been utilized and are displayed below. You can use the Spotlight Block for the same purpose as the Callout Block, by drawing attention to an important call to action.
Heading 2
Subheading
This Example shows a Spotlight Landcape Block with both a heading and subheading. The image size is medium with a focus on the image. Keep in mind that both medium and large image sizes will appear bigger with an image focus.
Tips and Tricks
- Enhance Layout with Stacked Callouts: Shine a spotlight on multiple elements at a time. Clearly separate content and create visual interest by alternating themes and image placement.
- Start your page with a Spotlight: By choosing H1 as the heading level, you can replace the title of your page.
Building With Blocks
This resource will help you understand the Blocks available and how to use them to make your content shine.