Now note
A short, dated note of what someone is up to right now, with the availability as a badge in words. It adds how long ago it was updated and, past a stale-after limit, says plainly that it may be out of date. Quiet is a dated line; warm is a sticky note in the hand; playful is a café chalkboard in a wooden frame.
quiet warm playful
Open the live demo
npx susegad add now-note
Stands on: Badge, Core, Core: components, Engine, Tokens
The prompt
the prompt
What someone is up to right now: a studio's current work, a homestay's "open for the season", a restaurant's specials, an office's hours this week.
A line or two, an availability state in words, and the date it was last said, so a reader can tell whether to believe it.
<link rel="stylesheet" href="susegad/components/now-note/now-note.css">
<link rel="stylesheet" href="susegad/components/badge/badge.css">
<script type="module" src="susegad/components/now-note/now-note.js"></script>
<script type="module" src="susegad/components/badge/badge.js"></script>
<sg-now-note stale-after="45">
<section aria-labelledby="now">
<h2 id="now">Now</h2>
<p>Building an order page for a clothing brand in Aldona.</p>
<p class="sg-now-state"><sg-badge tone="success">Taking on one new project</sg-badge></p>
<p class="sg-now-updated">Updated <time datetime="2026-09-24">24 September 2026</time></p>
</section>
</sg-now-note>The prompt
Make a "now" note web component around a <section>: a small heading, a line or two of what's happening, the availability as a status badge whose words say it ("Taking on one new project", "Heads-down till October"), and "Updated" with a <time datetime>. With JavaScript, add after the date how long ago that was in words (today, yesterday, 3 days ago, 2 weeks ago, 3 months ago), counted by calendar days in the reader's own calendar, and once the note is older than a stale-after number of days (45 by default), add a plain line saying it may be out of date. Give it three registers. Quiet: a dated line under a hairline, the heading in small capitals. Warm: a sticky note in the hand, the highlighter's yellow by day and by night, set on at a small seeded lean with a strip of tape. Playful: a chalkboard outside a café, a slate board in a dark wooden frame whatever the page's theme, the words in chalky handwriting and the heading underlined with a wavy line. Nothing moves.
Words to code
| When you say | Technique | What happens |
|---|---|---|
| how long ago … in words | pure core | ageInWords(then, now) from whole calendar days (daysBetween, UTC day numbers, so no time zone shifts a day); a date in the future says nothing. |
| older than stale-after | honesty | isStale(then, now, days); an unreadable date counts as stale. The element adds .sg-now-stale and data-stale, and follows a changed stale-after. |
| the reader's own calendar | todayIso() | Local year, month and day. A today attribute pins it, for demos and tests. |
| by day and by night … whatever the page's theme | color-scheme | The sticky note sets color-scheme: light and the board color-scheme: dark, so every token inside resolves to that theme; the tests check their words at 4.5:1 in both palettes. |
| a small seeded lean | lean(seed) | 0.8 to 2 degrees, set once as --sg-now-lean. |
| a status badge | reuse | The state is <sg-badge>: its words are the meaning and its shape backs up the tone. |
Accessibility
- A section named by its heading; the state is words, not a colour.
- The age and the stale line are plain text in the section, read in order.
- Without JavaScript the note shows its date, and a reader can judge its age themselves.
<sg-now-note> is a short, dated "what I'm up to" note with an availability state in words. It enhances a <section> (or an <article>, <aside> or <div>).
Markup
| Element | What it is |
|---|---|
| a heading | "Now", or the business's own word |
<p> | what is happening |
p.sg-now-state with <sg-badge> | availability, in words: "Taking on one new project" (success), "Heads-down till October" (warning), "Booked till March" (neutral) |
p.sg-now-updated with <time datetime="YYYY-MM-DD"> | required: when it was last updated |
The element adds , 3 days ago after the date and, past stale-after days, a p.sg-now-stale saying "This note may be out of date."
Attributes
| Attribute | Values | Default |
|---|---|---|
stale-after | days | 45 |
today | an ISO date to count from, for demos, tests and print | the reader's today |
seed | the warm lean | heading and date |
register | quiet, warm, playful | inherited |
On a static site, the build can also compute the age with ageInWords() and isStale() from now-note.core.js, so a reader without JavaScript sees it. Use one or the other: the element adds its own age line whatever the HTML already says.
Registers
| Look | |
|---|---|
| quiet | a dated line under a hairline |
| warm | a sticky note in the hand, with tape, always daylight yellow |
| playful | a café chalkboard in a wooden frame, always dark |
Nothing moves.
Accessibility
- The state is words; the badge's shape and colour back it up.
- The sticky note and the board keep their own colours in either page theme; their words are tested at 4.5:1.