NewsKit Mobile Logo

Byline

Overview

The byline is a small line of text which lists the authors of an article, along with their titles if provided.

Usage

The Byline component requires an array of bylineData. Each bylineData object in the array must contain an author. You can optionally provide a href property to link to that author's page and a title for that author.

Theming

The byline uses a typography preset meta02 and inherits its font color from its parent, apart from author links which use the default Link theme color tokens.

Props

bylineDataarray
An array of byline data to populate the byline authors. Byline data objects must contain an author string, and can contain optional href and title strings.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
stylePresetMQ<string>
If provided, this overrides the style preset of the component.
typographyPresetMQ<string>
If provided, this overrides the typography preset of the component.
spaceStackMQ<string>
If provided, this overrides the vertical space between each line when the bylines items wrap onto a new line.
linkobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the passed link.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the passed link.
dividerobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the divider.
spaceInlineMQ<string>
If provided, this overrides the horizontal space between the divider and the text.
Refer to the defaults below for the full object structure:
{
  stylePreset: "inkSubtle",
  typographyPreset: "utilityMeta020",
  spaceStack: "space020",
  link: {
    stylePreset: "linkInline",
    typographyPreset: "utilityMeta020"
  },
  divider: {
    stylePreset: "inkNonEssential",
    spaceInline: "space020"
  }
}

Playground

Political Editor, UK|
Beijing Correspondent, UK/Beijing
Props
Byline Data
Style Preset Overrides
Typography Preset Overrides
Margin Preset Overrides
import React from 'react';
import { Byline } from 'newskit';

export default () => (
  <Byline
    bylineData={[
      {
        author: 'Francis Elliott',
        href:
          'https://www.thetimes.co.uk/profile/francis-elliott',
        title: 'Political Editor',
        location: 'UK'
      },
      {
        author: 'Didi Tang',
        href:
          'https://www.thetimes.co.uk/profile/didi-tang',
        title: 'Beijing Correspondent',
        location: 'UK/Beijing'
      }
    ]}
    overrides={{ link: {}, divider: {} }}
  />
);

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