Skip to content

ContentPageHeader

Status: Stable

Latest released: 2019

Current version: v2.1.4

Storybook
GitHub

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

Variants

Multiple authors

editorial review

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 WealthApril 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.
Open in Playroom

No byline HREF

Tips and tricks

Frugality Tips by Sam

Even with no link.

Sam FrugalApril 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.
Open in Playroom

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>

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.

enableAnalytics

boolean | Object

Flag indicating whether or not to enable bedrock analytics tracking.

bool | {
onClick: bool
onHover: bool
}

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

Required

Title content string.

synopsis

node | string

Synopsis (main body).

<WordPressContentPageHeader>

enableAnalytics

boolean | Object

Flag indicating whether or not to enable bedrock analytics tracking.

bool | {
onClick: bool
onHover: bool
}

wordPressEntity

Object

Required

Vanilla object from the WordPress API. Mapped and passed down to ContentPageHeader. See styleguide.jsx for an example of the shape.