landing lead
Displays a full-width image and heading at the top of a page. Combines a hero image with heading and subheading text using CdrSplitSurface layout.
import { CdrLandingLead } from '@rei/cedar'
The landing lead is featured at the top of a landing page. It introduces the page with a prominent image and clear heading.
It's primarily intended for landing pages, as the first content element below the main navigation.
When to use
- Introducing the page content on a simple landing page
- Making a visual impact
#dont - Introducing a new content section in the middle of the page
- Creating a promotional landing page that requires a prominent CTA at the top of the page
::
When not to use
Heading
- Use the navigation heading as your lead heading on category hub pages
- Heading copy should not exceed two lines on the smallest mobile breakpoint (343px width)
- Most headings are in sentence case with no end punctuation
- Two-sentence headline constructions require periods, but avoid unless necessary
Subheading (optional)
- Subheading copy should not exceed two lines on the smallest mobile breakpoint (343px width)
What Cedar provides
- Sets heading level to semantic
<h1> - Alt text falls back to an empty string if none is provided
Development responsibilities
When using this component, here's what you are responsible for:
- Ensure heading text is provided so that the landing page has an
<h1> - Ensure alt text is provided if available
CdrLandingLead
Props
| Name | Type | Default |
|---|---|---|
imgSrc Required Sets the landing lead's image source | string | |
imgSrcset Comma-separated list of img srcsets | string | |
imgAlt Sets the landing lead's image alt | string | |
heading Required Sets the landing lead's heading | string | |
subheading Sets the landing lead's subheading | string |