Event

The Event component presents a dated event summary with a visible month and day block, an optional full-item native link, and lightweight metadata.

Component

Use fd-event when people need to scan upcoming, current, or past events quickly. When navigation is needed, the component promotes the whole event row to one native link target instead of layering custom click handlers around a static shell.

When to use

• Short event summaries with a clear primary destination — use Event when the dated row should read as one primary destination people can open quickly.
• Time-based lists that benefit from lightweight tone guidance — the visible date block helps people scan repeated event rows quickly.
• Metadata that can stay brief and inline — use the metadata row for a few short descriptors such as audience, format, or event type.

When not to use

• Do not use Event for multi-action cards — the component supports one primary destination, not stacked buttons or secondary inline actions.
• Do not use it for rich schedules or agenda content — if the content needs times, speakers, descriptions, or actions, use a broader content pattern.
• Do not rely on tone alone to communicate timing or status — the visible text still needs to explain the event.

Examples

Event keeps one primary native destination for the full row when linked. Open Storybook to inspect linked, unlinked, and tone variations. View in Storybook →

Basic usage

<fd-event
  id="ffiec-event"
  tone="cool"
  month="SEP"
  day="18"
  date="2026-09-18"
  title="FFIEC International Banking Conference"
  href="/events/ffiec-international-banking-conference"
></fd-event>

<script type="module">
  const event = document.getElementById("ffiec-event");

  event.metadata = ["FDIC-wide", "Conference"];
</script>

Structured date

Use date when the visible month and day represent a single calendar date. The component keeps month and day author-controlled, but wraps the visible date block in a machine-readable <time datetime> element.

<fd-event
  tone="cool"
  month="SEP"
  day="18"
  date="2026-09-18"
  title="FFIEC International Banking Conference"
  href="/events/ffiec-international-banking-conference"
></fd-event>

Use start-date and end-date when the source system owns a range or timestamp. start-date supplies the internal <time datetime> value when date is omitted. end-date is reflected for CMS and integration use, but the component does not render a visible date range in v1.

Implementation guide

• Use href when the whole row should open one destination. When href is present, fd-event renders one native link target for the complete event row instead of exposing only the title text as the click target.
• Pass metadata as a JavaScript property. Use metadata for short supporting details so the component can keep punctuation and wrapping consistent.
• Use visible month and day text. The date block is part of the event content. Treat it as user-facing information, not as purely decorative ornament. Add date or start-date when the same fact should be machine-readable.
• Keep date formatting outside the component. fd-event does not parse, localize, or derive visible month/day text. The CMS or application should provide both the visible label and the machine-readable value.
• Use tone as supporting context only. Follow the Figma guidance: warm for official public-facing events, neutral for past events, and cool for future events. Do not rely on tone alone to convey timing.
• Let the date chip keep its shipped tone defaults. The default warm/cool/neutral surfaces and hover states are part of the component contract and already match the Figma spec for event chips. Only override the tone hooks when a product has a documented token mapping change.
• Do not add extra spacing inside the date chip. The month/day stack uses trimmed text-box approximations and a tighter internal gap so it keeps the compact Figma rhythm without requiring custom CMS overrides.
• Keep the title short enough to scan. The component clamps the title to two lines, so use concise event names and move extra detail elsewhere.

Properties

Name	Type	Default	Description
tone	"neutral" | "cool" | "warm"	neutral	Decorative tone applied to the visible month and day block.
month	string	``	Visible month text shown in the date block. Author uppercase abbreviations when that presentation matters.
day	string	``	Visible day text shown in the date block.
date	string | undefined	undefined	Machine-readable single-day event date for the internal date block <time datetime>. Use YYYY-MM-DD when possible. Visible month and day text remains author-controlled.
start-date	string | undefined	undefined	Machine-readable event start date or datetime used for <time datetime> when date is omitted.
end-date	string | undefined	undefined	Optional machine-readable event end date or datetime reflected on the host for source-system and integration use. The component does not render a date range in v1.
title	string	``	Visible event title. When href is supplied, the title renders as the primary native link.
href	string | undefined	undefined	Optional destination for the event title. When omitted, the title renders as plain text.
target	string | undefined	undefined	Native link target applied to the title link.
rel	string | undefined	undefined	Native relationship tokens applied to the title link. target="_blank" always adds noopener noreferrer.
metadata	string[]	[]	Lightweight metadata items rendered in a single wrapped list below the title. Set this as a JavaScript property.

• fd-event keeps visible date display author-controlled. Use date, or start-date when date is omitted, to expose machine-readable semantics without asking the component to parse, localize, or format dates.
• fd-event is static in v1. It owns presentation only; the application owns event routing, sorting, filtering, analytics, and lifecycle.
• The host shell is intentionally non-interactive. Keyboard focus lands only on the rendered native title link when present.

CSS custom properties

Name	Default	Description
--fd-event-gap	12px	Gap between the date block and the text column.
--fd-event-link-color	var(--fdic-color-text-link, #1278b0)	Linked title color.
--fd-event-metadata-color	var(--fdic-color-text-secondary, #595961)	Metadata text color.
--fd-event-date-size	48px	Visible month/day block size.

• Date block tone defaults use the same foreground/background token pairs as fd-visual so event dates and decorative visuals stay visually aligned.
• The component exposes tone-specific date-block hooks such as --fd-event-date-bg-warm and --fd-event-date-bg-cool when a product needs to align the event family to a different token mapping without changing the public API.

Shadow parts

Name	Description
base	Root article wrapper.
date	Visible month and day block.
month	Month text inside the date block.
day	Day text inside the date block.
content	Text column containing the title and metadata.
title	Title wrapper.
metadata	Wrapped metadata list.
metadata-item	Individual metadata list item.

Accessibility

• fd-event is not hidden from assistive technology. The visible month/day text remains part of the exposed event content.
• The shell is not independently focusable. Keyboard users move only to the native row link when href is provided.
• The host does not add custom keyboard shortcuts, roving focus, or composite navigation behavior.
• Metadata renders as a semantic list so assistive technology does not depend on visual separator characters alone.
• When the title has no href, it renders as plain text instead of a fake link.

Known limitations

• Metadata is provided through the metadata JavaScript property, not through arbitrary slotted markup.
• The component intentionally accepts visible month and day strings. Structured date attributes add machine-readable semantics, but do not add parsing, localization, timezone conversion, or visible date-range formatting.
• Event does not provide action buttons, dismissal, selection, or expanded details in v1.

Related components

• Event List — use fd-event-list to arrange multiple events in a responsive set.
• Tile — review Tile when the content is more destination-oriented than date-oriented.
• Link — use clear event titles and destination text when the event row opens a destination.