ContentPageHeader

Storybook
GitHub

Standardize large headings on the top of content pages.

Also supports the following higher order components:

  • WordPressContentPageHeader />

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 entites 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/wordpress-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...',
}} />

Loading examples...

<ContentPageHeader>

advertiserDisclosureType

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.

Default

PRODUCT_TYPES.CREDIT_CARDS

authors

Array<Object>

Required

1 or more authors that will be rendered (as a Type or optional Link) in the byline.

Array<{
name: string Required
url: string
}>

authoringDate

string

Required

Accepts an ISO 8601 date string. Will be formatted to:

Month date, year - eg. January 27, 2020


category

string

Content category.

Default

null

enableAnalytics

boolean

Flag indicating whether or not to enable bedrock instrumentation.

Default

false

hideAdvertiserDisclosure

boolean

Flag indicating whether or not to show the AdvertiserDisclosure component.

Default

false

hideAuthorByline

boolean

Flag indicating whether or not to show the author by line

Default

false

hideEditorialStandards

boolean

Flag indicating whether or not to show the EditorialStandards component.

Default

false

title

string

Required

Title content string.


synopsis

string

Synopsis (main body) string.

Default

null

Usage

import ContentPageHeader from '@nerdwallet/react-content-page-header';
<ContentPageHeader
authors={[
{
name: 'Sam Frugal',
url: 'https://nerdwallet.com',
},
]}
category="Tips and tricks"
authoringDate={new Date().toISOString()}
synopsis="Even with no link."
title="Frugality Tips by Sam"
/>

Best Practices

The containing component of <ContentPageHeader /> should generally have margin-vertical-3 applied to provide adequate vertical spacing above the <AdvertiserDisclosure /> and below the <EditorialStandards />.

Maintainers

This component was created by Piper Chester.

See Also