Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Text

Byline

A byline is a line of text that lists the authors of an article, with options to add author’s title, location and link.

Status

Supported

Introduced

v0.18.0

View codeView Storybook

Interactive demo

This demo lets you preview the byline component, its variations, and configuration options.

Deputy Rugby Correspondent|
West Coast Technology Reporter, London|
Columnist
Byline Data
Typography Preset Overrides
Style Preset Overrides
1import React from 'react';
2import { Byline } from 'newskit';
3
4export default () => (
5  <Byline
6    bylineData={[
7      {
8        author: 'Alex Lowe',
9        href:
10          'https://www.thetimes.co.uk/profile/alex-lowe',
11        title: 'Deputy Rugby Correspondent',
12      },
13      {
14        author: 'Tom Knowles',
15        href:
16          'https://www.thetimes.co.uk/profile/tom-knowles',
17        title: 'West Coast Technology Reporter',
18        location: 'London',
19      },
20      {
21        author: 'David Aaronovitch',
22        href:
23          'https://www.thetimes.co.uk/profile/david-aaronovitch',
24        title: 'Columnist',
25      },
26    ]}
27    overrides={{
28      typographyPreset: 'utilityMeta020',
29      link: { typographyPreset: 'utilityMeta020' },
30      stylePreset: 'inkBase',
31    }}
32  />
33);
34

Anatomy

The byline contains one required element and one optional element.

ItemNameDescriptionComponentOptional

Options

The byline has options for different use cases:

Author’s title

Option to add the author’s title, following their name.

Author’s location

Option to add the author’s location, following their name and title.

Divider

A vertical divider between each author allows visual separation.

Link

If supplied, adds a link to the author’s name. This typically goes to the author’s page.

If the link is external, the external link trailing icon is shown.

Author’s title

Option to add the author’s title, following their name.

Author’s location

Option to add the author’s location, following their name and title.

Divider

A vertical divider between each author allows visual separation.

Link

If supplied, adds a link to the author’s name. This typically goes to the author’s page.

If the link is external, the external link trailing icon is shown.

Behaviours

The following guidance describes how the byline behaves.

Breaks responsively

When viewed responsively, the byline breaks onto a new line for each author.

Breaks responsively

When viewed responsively, the byline breaks onto a new line for each author.

Accessibility considerations

The byline has the following accessibility considerations:

Focus order
OrderElementRole
Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser supplied

API

The byline has a range of props that can be used to define an appropriate experience for different use cases.

Byline
NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?