NewsKit Mobile Logo

Headline

The Headline is a simple component that comprises two element: a Kicker (text) and Heading (text).

The kicker is optional. They can be both be rendered as different HTML elements.

Overview

Usage

No special requirements.

Theming

Props

childrenstring
The Heading text of the Headline component is passed as the child of the component.
kickerTextstring
The optional Kicker content, which appears before the Heading.
headingAsstring = h1
This is a string name with one of the following html elements: h1, h2, h3, h4, h5, h6 or span, that the heading can be converted to. Heading defaults as a h1 element, but it can be converted to another heading element or div by `as="h2"` prop.
kickerAsstring = span
This is a string name with one of the following html elements: h1, h2, h3, h4, h5, h6 or span, that the kicker can be converted to. Kicker defaults as a span element, but it can be converted to another heading element or div by `as="h2"` prop.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to both the heading and kicker sub components.
headingobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the heading.
kickerobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the kicker.
spaceInlineMQ<string>
If provided, this overrides the horizontal space between the kicker and heading.
Refer to the defaults below for the object structure:
{
  typographyPreset: {
    xs: "editorialHeading060",
    sm: "editorialHeading060",
    lg: "editorialHeading070",
    xl: "editorialHeading080"
  },
  heading: {
    stylePreset: "inkContrast"
  },
  kicker: {
    stylePreset: "uppercaseInkBrand010",
    spaceInline: {
      xs: "space030",
      sm: "space030",
      lg: "space040",
      xl: "space040"
    }
  }
}

Playground

ArticleKicker

Heading Content

Props
Render Heading as
Render Kicker as
import React from 'react';
import { Headline } from 'newskit';

export default () => (
  <Headline kickerText="ArticleKicker">
    Heading Content
  </Headline>
);

For more information on overriding component defaults, see the docs here.