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.1
2interface BylineData {
3 author: string;
4 href?: string;
5 title?: string;
6 location?: string;
7 ariaLabel?: string;
8}
9
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.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. An error occurred loading this code example.
Playground
Francis ElliottPolitical Editor, UK|
Didi TangBeijing Correspondent, UK/Beijing
Byline Data
1import React from 'react';
2import { Byline } from 'newskit';
3
4export default () => (
5 <Byline
6 bylineData={[
7 {
8 author: 'Francis Elliott',
9 href:
10 'https://www.thetimes.co.uk/profile/francis-elliott',
11 title: 'Political Editor',
12 location: 'UK',
13 },
14 {
15 author: 'Didi Tang',
16 href:
17 'https://www.thetimes.co.uk/profile/didi-tang',
18 title: 'Beijing Correspondent',
19 location: 'UK/Beijing',
20 },
21 ]}
22 overrides={{ link: {}, divider: {} }}
23 />
24);
25
For more information on overriding component defaults, see the docs here.