Hoppa till innehåll

Deadlines

Both components style deadlines automatically based on the build date:

  • Bold — the next upcoming deadline
  • Normal — future deadlines after the next one
  • Strikethrough + faded — deadlines that have already passed

DeadlineList

Section titled “DeadlineList”

The component takes an items array where each entry has a date (the last relevant date for that row, format YYYY-MM-DD) and a label (the text shown).

<DeadlineList items={[
  { date: "2025-11-07", label: "Deadline 2025-11-04 5pm, oral examination 2025-11-06–07." },
  { date: "2026-10-09", label: "Deadline 2026-10-09 5pm" },
  { date: "2027-01-08", label: "Deadline 2027-01-08 5pm (re-examination)" },
  { date: "2027-06-11", label: "Deadline 2027-06-11 5pm (re-examination, last opportunity)" },
]} />

Result

Section titled “Result”
  • Deadline 2025-11-04 5pm, oral examination 2025-11-06–07.
  • Deadline 2027-01-08 5pm (re-examination)
  • Deadline 2027-06-11 5pm (re-examination, last opportunity)

When every deadline has passed

Section titled “When every deadline has passed”

If every date lies in the past, every row renders struck through — no row renders bold.

  • Deadline 2024-11-04 5pm
  • Deadline 2024-11-18 5pm (re-examination)
  • Deadline 2025-06-13 5pm (re-examination)

Deadline

Section titled “Deadline”

<Deadline> is the single-item building block <DeadlineList> renders internally — it takes one date prop and styles whatever is in its slot. Use it directly only when deadlines need to live inside markup <DeadlineList> can’t produce, such as a custom list with extra content per row.

<ul>
  <Deadline date="2025-11-07">Deadline 2025-11-04 5pm, oral examination 2025-11-06–07.</Deadline>
  <Deadline date="2026-10-09">Deadline 2026-10-09 5pm</Deadline>
</ul>

Result

Section titled “Result”
  • Deadline 2025-11-04 5pm, oral examination 2025-11-06–07.
  • Deadline 2026-10-09 5pm
CCBY