Due Date Badges - Everyday Interface Patterns

A static task detail strip shows due date July 18, 2026 and priority High as display badges without date pickers or reminder services.

Program

Due and priority displays should show date and urgency as readable task details without running pickers, reminders, or timers.

due_date_priority_badge.html

Visuals: captured from real browser rendering

<section class="task-meta" aria-labelledby="meta-title">
  <h2 id="meta-title">Task schedule</h2>
  <p><strong>Due</strong> <time datetime="2026-07-18">July 18, 2026</time></p>
  <p><strong>Priority</strong> <span class="badge high">High</span></p>
  <p class="status">High priority task due July 18, 2026.</p>
  <p class="note">Static task metadata only; no date picker, reminder service, timer, save, or task API runs.</p>
</section>
<style>
  .task-meta { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .task-meta p, .note { margin: 0; }
  .badge { border-radius: 999px; padding: 2px 8px; }
  .high { background: #fee2e2; color: #991b1b; }
  .status { border: 1px solid #f59e0b; background: #fef3c7; padding: 8px; }
  .note { color: #475569; }
</style>

Label the task metadata section.
The section is labelled by its visible heading.
Use time for the due date.
The visible date has a machine-readable datetime value.
Show the priority badge.
The badge makes the priority visible.
Show the user-facing readback.
The status sentence reads date and priority together.
Show the no-service note.
The note says no picker, reminder, timer, save, or task API runs.
Check due-date honesty.
Due date, priority badge, readback, and no reminder service.

machine-readable date The visible due date is paired with a datetime value.

priority badge High is visible as a task priority badge.

no date service The lesson should not imply date pickers, reminders, timers, saves, or task APIs.