Sample Headline 1
Sample content goes here.
Sample Call to Action
3 Boxes with Parallax Background
This article explains how to use the Boxes with Parallax Background component, which is designed to showcase multiple clear, high-level options that direct users to key sections of your site. While the component is commonly used with three boxes, you can add more as needed. Additional boxes will align beneath the box above them, starting from the left, creating a structured, grid-like layout. This component works best on landing pages where you want to highlight primary audiences, pathways, or calls to action in a visually organized way.
The parallax effect keeps the background image fixed while the boxes move as the page scrolls, adding subtle visual depth. All boxes automatically match the height of the box with the most content, so keep content relatively even across boxes to maintain a balanced, cohesive appearance.
What This Component Is
The Boxes with Parallax Background component presents a set of high-level options within a single, visually unified section, helping guide users to the most important areas of a site without relying on long explanations or dense navigation.
When to Use
Use this component when:
- You want to highlight several primary pathways (ex: undergraduate, graduate, and professional programs; audiences; or major initiatives) on a landing page.
- Each option can be summarized with a short headline, brief description, and a single strong call to action.
Avoid this component if:
- Your content requires detailed explanations or multiple links per item (this component is meant for high-level entry points, not deep navigation).
- Visitors need to compare many options side-by-side or scan a long list of links (use link lists or directory-style components instead).