Standard component for large headings at the top of content pages. Composed by the larger molecule, <WordPressContentPageHeader />
.
Variants
Multiple authors
No byline HREF
Development
import ContentPageHeader from '@nerdwallet/react-content-page-header';<ContentPageHeader />;
<WordPressContentPageHeader>
<WordPressContentPageHeader>
(WPCPH) is used to standardize some of the article headers across React-based WordPress (WP) apps like article-client
and universal-roundup-client
. It takes vanilla WP entities from the WP API and provides them to an underlying <ContentPageHeader />
.
Here's a small example of its usage:
import { WordPressContentPageHeader } from '@nerdwallet/react-content-page-header';// Consuming a sample WP API entity<WordPressContentPageHeader wordPressEntity={{ authors: [ { name: 'Courtney Jespersen', description: 'Courtney Jespersen is a retail expert!', link: 'https://www.nerdwallet.com/blog/author/courtney/', }, ], nw_data: { editorial_disclaimer: 'show', advertiser_disclosure: 'show', }, title: 'Article title!', synopsis: 'Longer synopsis...',}} />
Props
<ContentPageHeader>
advertiserDisclosureType
= PRODUCT_TYPES.CREDIT_CARDS
PRODUCT_TYPES.CREDIT_CARDS | PRODUCT_TYPES.INVESTING
Type of messaging the advertiser disclosure will render. Currently supports "investing" or the default. See the AdvertiserDisclosure propTypes for more information.
authors
Array<Object>
1 or more authors that will be rendered (as a Type or optional Link) in the byline.
authoringDate
string
Accepts an ISO 8601 date string. Will be formatted to:
Month date, year - eg. January 27, 2020
category
string
Content category.
enableAnalytics
boolean | Object
Flag indicating whether or not to enable bedrock analytics tracking.
hideAdvertiserDisclosure
boolean
Flag indicating whether or not to show the AdvertiserDisclosure component.
hideAuthorByline
boolean
Flag indicating whether or not to show the author by line
hideEditorialStandards
boolean
Flag indicating whether or not to show the EditorialStandards component.
title
string
Title content string.
synopsis
node | string
Synopsis (main body).
<WordPressContentPageHeader>
enableAnalytics
boolean | Object
Flag indicating whether or not to enable bedrock analytics tracking.
wordPressEntity
Object
Vanilla object from the WordPress API. Mapped and passed down to ContentPageHeader. See styleguide.jsx for an example of the shape.