Skip to content

CSS

Wrap the date in a <time> element with an ISO 8601 datetime attribute, and make the author a real <a> with tng-link is-neutral. The styles carry no date format — pass the text already formatted for the market. The separator between date and author is drawn by CSS and is only shown when an author follows the date.

<p class="tng-date-author">
  <time datetime="2026-01-22">January 22, 2026</time>
  <a class="tng-link is-neutral" href="#">Name Surname</a>
</p>
Open in playground

Name Surname

Variants

Section titled “Variants”

Vertical

Section titled “Vertical”

Add is-vertical to stack the author below the date. The separator is dropped.

<p class="tng-date-author is-vertical">
  <time datetime="2026-01-22">January 22, 2026</time>
  <a class="tng-link is-neutral" href="#">Name Surname</a>
</p>
Open in playground

Name Surname

Date only

Section titled “Date only”

Leave out the author when there is none.

<p class="tng-date-author">
  <time datetime="2026-01-22">January 22, 2026</time>
</p>
Open in playground

Plain-text author

Section titled “Plain-text author”

When there is no author page to link to, use a <span>. It takes the date’s style.

<p class="tng-date-author">
  <time datetime="2026-01-22">January 22, 2026</time>
  <span>Name Surname</span>
</p>
Open in playground

Name Surname