Examples
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 | --pf-v6-c-timestamp--Color | (In light theme) #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 | --pf-v6-c-timestamp--m-help-text--TextDecorationStyle | 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 | --pf-v6-c-timestamp--m-help-text--hover--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-timestamp | --pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine | underline | ||
| ||||
| .pf-v6-c-timestamp | --pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle | dashed | ||
| ||||
| .pf-v6-c-timestamp.pf-m-help-text | --pf-v6-c-timestamp--Color | (In light theme) #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.pf-m-help-text:is(:hover, :focus) | --pf-v6-c-timestamp--m-help-text--TextDecorationLine | underline | ||
| ||||
| .pf-v6-c-timestamp.pf-m-help-text:is(:hover, :focus) | --pf-v6-c-timestamp--m-help-text--TextDecorationStyle | dashed | ||
| ||||