Timestamp

A timestamp is a consistently formatted visual that displays date and time values.

Examples

Basic

Thursday, 21 January 2019, 9:38 PM EST

21 January 2019, 9:38 PM EST

21 Jan. 2019, 9:38 PM EST

1 hour ago

Tomorrow

Tomorrow

Documentation

Usage

Class	Applied to	Outcome
`.pf-v6-c-timestamp`	`<span>`	Creates a timestamp. Required
`.pf-v6-c-timestamp__text`	`<time>`	Creates the visual text of the timestamp. Required
`.pf-m-help-text`	`.pf-v6-c-timestamp`	Modifies styling for a timestamp that has help text.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-timestamp	--pf-v6-c-timestamp--FontSize	0.75rem
--pf-v6-c-timestamp--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-timestamp	--pf-v6-c-timestamp--Color	(In light theme) #151515
--pf-v6-c-timestamp--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-timestamp	--pf-v6-c-timestamp--OutlineOffset	0.1875rem
	.pf-v6-c-timestamp	--pf-v6-c-timestamp--m-help-text--TextDecorationLine	underline
--pf-v6-c-timestamp--m-help-text--TextDecorationLine --pf-t--global--text-decoration--help-text--line--default --pf-t--global--text-decoration--line--200 underline
	.pf-v6-c-timestamp	--pf-v6-c-timestamp--m-help-text--TextDecorationStyle	dashed
--pf-v6-c-timestamp--m-help-text--TextDecorationStyle --pf-t--global--text-decoration--help-text--style--default --pf-t--global--text-decoration--style--200 dashed
	.pf-v6-c-timestamp	--pf-v6-c-timestamp--m-help-text--TextUnderlineOffset	0.25rem
	.pf-v6-c-timestamp	--pf-v6-c-timestamp--m-help-text--Color	(In light theme) #4d4d4d
--pf-v6-c-timestamp--m-help-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-timestamp	--pf-v6-c-timestamp--m-help-text--hover--Color	(In light theme) #151515
--pf-v6-c-timestamp--m-help-text--hover--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-timestamp	--pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine	underline
--pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine --pf-t--global--text-decoration--help-text--line--hover --pf-t--global--text-decoration--line--200 underline
	.pf-v6-c-timestamp	--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle	dashed
--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle --pf-t--global--text-decoration--help-text--style--hover --pf-t--global--text-decoration--style--200 dashed
	.pf-v6-c-timestamp.pf-m-help-text	--pf-v6-c-timestamp--Color	(In light theme) #4d4d4d
--pf-v6-c-timestamp--Color --pf-v6-c-timestamp--m-help-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-timestamp.pf-m-help-text:is(:hover, :focus)	--pf-v6-c-timestamp--Color	(In light theme) #151515
--pf-v6-c-timestamp--Color --pf-v6-c-timestamp--m-help-text--hover--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-timestamp.pf-m-help-text:is(:hover, :focus)	--pf-v6-c-timestamp--m-help-text--TextDecorationLine	underline
--pf-v6-c-timestamp--m-help-text--TextDecorationLine --pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine --pf-t--global--text-decoration--help-text--line--hover --pf-t--global--text-decoration--line--200 underline
	.pf-v6-c-timestamp.pf-m-help-text:is(:hover, :focus)	--pf-v6-c-timestamp--m-help-text--TextDecorationStyle	dashed
--pf-v6-c-timestamp--m-help-text--TextDecorationStyle --pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle --pf-t--global--text-decoration--help-text--style--hover --pf-t--global--text-decoration--style--200 dashed

Edit this page on GitHub