Relative Date Time generator

Activity timelines, comments and notification feeds use lightning-relative-date-time for "3 days ago" / "in 2 hours" style labels that update automatically. Style the accompanying clock icon and text color so these secondary labels stay unobtrusive next to primary content.

Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.

Live preview

Generated code

<template>
    <div class="studio-relative-date-time">
        <lightning-icon icon-name="utility:clock" size="xx-small" class="studio-relative-date-time__icon"></lightning-icon>
        <lightning-relative-date-time value={dateValue} class="studio-relative-date-time__value"></lightning-relative-date-time>
    </div>
</template>

Design tips for relative date times

Pair with a real timestamp in a tooltip (title attribute) so precise timing is still available for anyone who needs it.
Keep this smaller and more muted than the content it’s labeling — relative time is context, not the headline.
Avoid relative time for anything legally or operationally precise (contract dates, SLAs) — use formatted-date-time there instead.

Related components

Components developers commonly compare against or pair with Relative Date Time.

Formatted Date Time Avatar Pill Icon