Newskit Logo
Newskit Logo
View Github

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.
paddingInlineMQ<string>
It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints.
paddingInlineStartMQ<string>
It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints.
paddingInlineEndMQ<string>
It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints.
paddingBlockMQ<string>
It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints.
paddingBlockStartMQ<string>
It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints.
paddingBlockEndMQ<string>
It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints.
marginInlineMQ<string>
It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints.
marginInlineStartMQ<string>
It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints.
marginInlineEndMQ<string>
It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints.
marginBlockMQ<string>
It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints.
marginBlockStartMQ<string>
It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints.
marginBlockEndMQ<string>
It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints.
Refer to the defaults below for the object structure:

An error occurred loading this code example.

Playground

ArticleKicker

Heading Content

Render Heading as
Render Kicker as
1import React from 'react';
2import { Headline } from 'newskit';
3
4export default () => (
5  <Headline kickerText="ArticleKicker">
6    Heading Content
7  </Headline>
8);
9

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