v5 · block
MediaCTA
A bold call-to-action card paired with a single image. Best used near the end of a marketing page to drive the next step — sign up, post a job, contact sales.
Canonical render
alignMedia="end", alignContent="start",
hue="blue".
Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
Media alignment
alignMedia places the image left, right, or above. The
card overlaps the image edge facing it.
alignMedia="start"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
alignMedia="end"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
alignMedia="center"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
Content alignment
alignContent aligns the heading + description + actions
inside the card.
alignContent="start"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
alignContent="center"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
Hues
Six palette presets. The card rebinds all four substrate primitives
via [data-hue] so buttons inside the card auto-invert —
no inverse prop needed.
hue="blue"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
hue="aqua"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
hue="earth"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
hue="green"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
hue="magenta"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
hue="purple"Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
With secondary CTA
Optional — only add when there's a meaningful second path.
Ready to try Indeed?
Employers who post jobs and interview on Indeed are on average 22% more likely to make a hire.
When to use
- End of a marketing page to drive the next step.
- When a single image and one strong call-to-action carries the moment.
- One per page is typical; two starts to compete.
When not to use
- For multiple equal-weight CTAs. Use a card group instead.
- As a hero. The block reads as a closing moment, not an opener.
v4 → v5 diff
- Flattened: compound API (Root + 8 sub-components) collapsed to one props interface.
- Retired: 24-col substrate grid. Layout is now block-local 12-col grid.
- Retired:
background_color(page composes its own outer section). - Retired:
inversebutton mode. Card rebinds primitives so substrate.btn-*auto-adapts. - Retired: primary-button locked to earth tone. Button follows hue now.
- Redesigned: color cascade. v4 set
data-theme+ pulled--expressive-primary-stronger; v5 sets the four primitives directly on the card per[data-hue]. - Ported: Shape01 + Shape05 paths as block-local SVGs.