Interstitial component

The first option for the interstitial is the “Layout” option which will determine the layout of the component.

• Stacked: The stacked option presents the component information in a vertical layout, where all the information is stacked on top of each other.
• Inline: The inline alternative provides a horizontal arrangement of the information.

The lead-in is a useful addition to the component to add some context and intrigue to the copy. This highlights the text and helps lead the user into reading to the title of the interstitial.

The title field is where to add the title of the interstitial. Ideally, the title should be attention grabbing but not too long.

The copy for the interstitial can be added into the content field. With the copy, make sure to include enough context to give an idea of what the interstitial is about while not going overboard. In the end, the goal is get people to click for more information.

The call to action is the most important field for the interstitial. This is where to add a button which is the main point of the interstitial. Choosing “select link” will bring up the url options. The important thing to note here is, in order for the link to be presented as a button, the text for button has to be added into the “link text” field.

The last option is the background color for the component. The navy background pairs well with the stacked layout option and the yellow background works well with the in-line option. In the end, choose whatever will work best for the site.

One final note for the Interstitial component. To ensure consistency across the site, the best practice is to keep the use of interstitials consistent. For example, if one page has a yellow stacked interstitial mid-page and blue interstitial at the page footer, continue to follow that page structure across other similar pages where possible.