Info

By First Lastname | 1/1/1970 9 AM EST

<Info
  authors={[
    {
      link: 'https://politico.com',
      name: 'First Lastname',
    },
  ]}
  published = {new Date('January 1, 1970 9:00:00').toISOString()}
  updated = {null}
/>
<Info
  authors={[
    {
      link: 'https://politico.com',
      name: 'First Lastname',
    },
  ]}
  published = {new Date('January 1, 1970 9:00:00').toISOString()}
  updated = {null}
/>

Import

import Info from '@politico/interactive-style/src/components/Info';
// or
import { Info } from '@politico/interactive-style';

Props

Name	Type	Default	Description
published	string		A parseable datestring signifying the date and time it was published
updated	string		A parseable datestring signifying the date and time it was last updated
defaultTimezone	string	America/New_York	A valid tz database timezone name to use as the default timezone if your user's timezone cannot be determined
authors	Author[]		An array of author objects (see below)
Author	object		Information about a particular author (used in 'authors' props)
Author.name	string		The author's name (used in 'Author' object)
Author.link	string		A link to the author's bio (used in 'Author' object)

CSS

Name	Global Class	Description
root	PibInfo-root	Styles applied to root element
container	PibInfo-container	Styles applied to container element
authorsContainer	PibInfo-authors	Styles applied to bylines container element
published	PibInfo-published	Styles applied to published dateline
updated	PibInfo-updated	Styles applied to updated dateline
timestamp	PibInfo-timestamp	Styles applied to timestamp element

Demos

Multiple Authors

Add another object to the "authors" props with a "link" and "name" to add another author. The component will concatenate all the names with proper english syntax. Try adding or removing names to see it work.

By Andrew Briz, Beatrice Jin and Lily Mihalik

<Info
  authors={[
    {
      link: 'https://politico.com',
      name: 'Andrew Briz',
    },
    {
      link: 'https://politico.com',
      name: 'Beatrice Jin',
    },
    {
      link: 'https://politico.com',
      name: 'Lily Mihalik',
    },
  ]}
  published = {null}
  updated = {null}
/>
<Info
  authors={[
    {
      link: 'https://politico.com',
      name: 'Andrew Briz',
    },
    {
      link: 'https://politico.com',
      name: 'Beatrice Jin',
    },
    {
      link: 'https://politico.com',
      name: 'Lily Mihalik',
    },
  ]}
  published = {null}
  updated = {null}
/>

Published and Updated Times

If you have an updated time, set the "updated" prop. Note that this will move the "<time />" element to reflect the updated time instead of the published time. Inspect the element below to see that.

By First Lastname | 1/1/1970 9 AM EST | Updated 1/3/1970 1 PM EST

<Info
  authors={[
    {
      link: 'https://politico.com',
      name: 'First Lastname',
    },
  ]}
  published = {new Date('January 1, 1970 9:00:00').toISOString()}
  updated = {new Date('January 3, 1970 13:00:00').toISOString()}
/>
<Info
  authors={[
    {
      link: 'https://politico.com',
      name: 'First Lastname',
    },
  ]}
  published = {new Date('January 1, 1970 9:00:00').toISOString()}
  updated = {new Date('January 3, 1970 13:00:00').toISOString()}
/>

Time Zones

This component will do its best to display published and updated dates in the user's local time.