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.


interface BylineData {
  author: string;
  href?: string;
  title?: string;
  location?: string;
  ariaLabel?: string;
}

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

Francis ElliottPolitical Editor, UK|

Didi TangBeijing Correspondent, UK/Beijing

Byline Data

author

href

title

location

author

href

title

location

Style Preset OverridesDefaultbuttonMinimalPrimary

Typography Preset OverridesDefaulteditorialParagraph030

Margin Preset OverridesDefaultincreaseSpacing

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.