Skip to content
DOL Studio

Text content

Design: Stable Code: Coded typography 1 Figma set Text content/Date difference

Live preview

3 styles — same date, different verbosity
style="short"
style="medium"
style="long"
10 ranges — past + future, medium style
just now (3s)
minutes ago
hours ago
yesterday
days ago
weeks ago
months ago
year+ ago
in days
in weeks
Vietnamese locale
3 tones — default / emphasized / muted
default
emphasized
muted

Import & files

Import
import { Text content } from "@dol/ui/text-content";
Source file
packages/@dol/ui/src/text-content/DateDifference.tsx

Figma source

Figma source 1 set
Page
Text content
Sets
1
Primary set
Text content/Date difference · 10 variants Open in Figma →
Showing: Text content/Date difference

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Text content
Slug: `text-content`
Domain: general · Category: display
Design: stable · Code: coded


## Description
Text-only treatments. Currently single set: Date difference display.


## Import
```ts
import { Text content } from "@dol/ui/text-content";
```
Source: `packages/@dol/ui/src/text-content/DateDifference.tsx`


## Figma source
Page: Text content
Sets: 1
Primary: Text content/Date difference
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=9874-116353

Related

  • DOL English logo

    Logo

    Coded

  • Avatar, User

    Coded
  • Tag label

    Tag

    Coded
  • Field
    Value
    Name
    DOL Edu

    Table

    Coded

  • Divider

    Coded

  • Order number

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).