Layout & Component Blocks

Spotlights

Overview

The Spotlight component organizes content into a vertically stacked section, similar to an accordion, but with enhanced visual appeal by including an image. It’s ideal for creating engaging, story-driven layouts that combine text and visuals for better impact.

View Spotlights Component Demo

When to Use

Use Spotlights to highlight high-value or narrative content, such as:

  • Value propositions or key benefits.
  • Step-by-step processes or guides.
  • Feature highlights or success stories.
How To

How To

Create a Spotlight Component

  1. Navigate to the page you’d like to update, and enter the Edit Mode for the page.
  2. Choose the Section you would like to add the block, click the plus (+) icon.
  3. Select the Spotlight component from the component list.

Add Image

This is the image that will be on the left of the component beside the text and accordion options. 

  1. Click Add Media button and upload or select the file that you would like to link to.
Example of the 'add media' button in the spotlight component
Screenshot of the spotlight component highlighting where to add the heading, subheading, and text for the introduction section above the accordions within the spotlight component.

Add Intro Text

  1. Heading: this is the heading introducing the accordions below.
  2. Eyebrow: this is optional and sits above the heading and as not meant to be longer than 50 characters.
  3. Text: enter body text to give more information about the accordions below. 

Add Accordion Item

  1. Click plus sign (+) icon button under Add Items to add an item.
    1. This component requires two accordion items or the page will not save. 
Screenshot of spotlight component highlighting the add item button to add an accordion item to the component

Add Content to Accordion Item

  1. Heading: (required) this is the accordion heading that will display whether the component is open or closed.
  2. Content: All accordion items will accept text, button group, and/or an image component types as content.
    1. To add text, click the Add Text button to add text.
    2. To add an image or button group, click the Dropdown Arrow to select the appropriate component.
  3. Click Save once you have added all the components you want to the accordion item. 
     
Showcase of the accordion item section and where the heading and accordion panel content

To Add Multiple Accordion Items

  1. Hover or tab to an existing accordion item until the add item option appears.
  2. Click the plus (+) icon above an item to add a new one above it.
  3. Click the plus (+) icon below an item to add a new one below it.
  4. After adding all items, click Save button.
Screenshot of spotlight component and showcasing how to add an accordion item to the component

Reorganize Accordion Items

Placed an item in the wrong spot? You can easily reorder items within the accordion component:

  • Drag and drop
    1. Hover over the item you want to move.
    2. Click the six-dot handle in the menu and drag the item to the desired position.
  • Keyboard navigation
    1. Tab to the item, select it, then use arrow keys to move it up or down.
  • Manual Move
    1. In the accordion settings, click the up or down arrows to reposition the item.
      Once all items are in the correct order, click Save.
An accordion item with the accordion item settings displayed showing how to select and drag and drop or to manually move with up and down arrows.

User Experience Best Practices

  • Enhance Content Discoverability. Use accordions thoughtfully to organize content without hiding critical information. Ensure headings are clear and descriptive so users can easily identify what’s inside.
  • Reduce interaction cost. Keep accordion usage minimal and purposeful. When used, make sure the most important content is visible by default and that expanding panels feels intuitive and effortless.

Related Components

  • Accordions: this would be a great option when you have a longer list of accordions or need something that is more text focused.