Skip to content

ContentPageHeader

Status: Stable
Storybook
GitHub

Standard component for large headings at the top of content pages. Composed by the larger molecule, <WordPressContentPageHeader />.

Examples

Multiple authors

E-Trade Review of 2018

E-Trade’s $6.95 trade commission isn’t the cheapest, but its superb educational resources and portfolio-building tools make it worth a look.
Pat Finance, Sherry Savings, Sam Frugal, Tim Chen, Wanda WealthApr 16, 2019

Many or all of the products featured here are from our partners who compensate us. This may influence which products we write about and where and how the product appears on a page. However, this does not influence our evaluations. Our opinions are our own. Here is a list of our partners and here's how we make money.

Open in Playroom

No byline link

Frugality Tips by Sam

Even with no link.
Sam FrugalApr 16, 2019

Many or all of the products featured here are from our partners who compensate us. This may influence which products we write about and where and how the product appears on a page. However, this does not influence our evaluations. Our opinions are our own. Here is a list of our partners and here's how we make money.

Open in Playroom

Props

<ContentPageHeader>

advertiserDisclosureShouldDelay

boolean

advertiserDisclosureType

"credit_cards" | "investing"
Type of messaging the advertiser disclosure will render. Currently supports "investing" or the default. See the AdvertiserDisclosure component for more information.

authoringDate

Required
string
Accepts an ISO 8601 date string. Will be formatted to:
Month date, year - eg. January 27, 2020

authors

Required
Array<{ name: string; url?: string | undefined; }>
1 or more authors that will be rendered (as a Type or optional Link) in the byline.

editorialStandardsType

"investing"
Possible product types that can be used to modify the Editorial Standards message.

enableAnalytics

false | true | { onClick: boolean; onHover: boolean; }
Flag indicating whether or not to enable bedrock analytics tracking.

featuredImage

{
altText?: string
mediaDetails?: { sizes?: { sourceUrl: string; width: number; height: number; size: string; }[] | undefined; }
}
MediaItem containing data of the featured image.

hideAdvertiserDisclosure

boolean
Flag indicating whether or not to show the AdvertiserDisclosure component.

hideAuthorByline

boolean
Flag indicating whether or not to show the author byline.

hideEditorialStandards

boolean
Flag indicating whether or not to show the EditorialStandards component.

synopsis

ReactNode
Synopsis (main body).

title

Required
string
Title content string.

width

ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "10" | "11" | "12" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">
Number of columns that the components should take in the screen (defaults to 8)

ref

(instance: any) => void | RefObject<any>