Design System React

AlphaThis a work in progress. Your input will help us to improve it. Report issues or raise questions on GitHub.

Feature header

Last updated
22/04/2026
Package version
1.0.1
JSX for this example
<React.Fragment />

Feature header configuration

FeatureHeader components use the following props:

backgroundColor (optional)
The background colour to use. Permitted values are secondary, tertiary and brand.
className (optional)
A CSS class name to pass to the component.
hasCoverImage (optional)
Makes the header image, if used, fill the available space. Boolean.
hasNoImagePadding (optional)
Removes vertical padding from the header image. Boolean.
isFullWidth (optional)
Spreads the feature header across the full page with. This inserts a ds_wrapper element inside the parent element. Boolean.
isWideText (optional)
Uses two thirds of the header area for text when there's an image, instead of the default half and half split. Boolean.
isTopAlignImage (optional)
Makes the image and text align to the top of the header container. Boolean.
tagName (optional)
Tag name to use for the feature header container. Default is div.

Feature header primary (text) configuration

FeatureHeader.Primary components use the following prop:

title
The text content of the H1 in the feature header.
Back to top