This rune is part of @refrakt-md/places. Install with npm install @refrakt-md/places and add "@refrakt-md/places" to the plugins array in your refrakt.config.json.

Event

Name: Tech Conference 2025
Start: 2025-06-15
End: 2025-06-17
Location: San Francisco, CA

Event information with date, location, and agenda. Lists become speaker/agenda items, links become registration URLs.

Basic usage

An event with date, location, agenda, and a registration link.

{% event date="2025-06-15" endDate="2025-06-17" location="San Francisco, CA" url="https://example.com/register" %}
# Tech Conference 2025

Join us for three days of talks, workshops, and networking with the web development community.

- Keynote: The Future of Web Development
- Workshop: Building with Semantic Content
- Panel: Open Source Sustainability
- Networking Dinner
{% /event %}

<article data-field="content-section" data-rune="event" typeof="Event" data-rune-fields="{&quot;date&quot;:&quot;2025-06-15&quot;,&quot;endDate&quot;:&quot;2025-06-17&quot;,&quot;location&quot;:&quot;San Francisco, CA&quot;,&quot;url&quot;:&quot;https://example.com/register&quot;}">
  <meta content="2025-06-15" property="startDate">
  <meta content="2025-06-17" property="endDate">
  <meta content="https://example.com/register" property="url">
  <h1 id="tech-conference-2025" data-name="headline" property="name">Tech Conference 2025</h1>
  <p data-name="blurb" property="description">Join us for three days of talks, workshops, and networking with the web development community.</p>
  <div data-name="body">
    <ul>
      <li>Keynote: The Future of Web Development</li>
      <li>Workshop: Building with Semantic Content</li>
      <li>Panel: Open Source Sustainability</li>
      <li>Networking Dinner</li>
    </ul>
  </div>
  <span typeof="Place" property="location">
    <meta property="name" content="San Francisco, CA">
  </span>
</article>

Tech Conference 2025

Join us for three days of talks, workshops, and networking with the web development community.

Date: 2025-06-15
Ends: 2025-06-17
Location: San Francisco, CA

Keynote: The Future of Web Development
Workshop: Building with Semantic Content
Panel: Open Source Sustainability
Networking Dinner

<article data-field="content-section" typeof="Event" class="rf-event rf-event--2025-06-15 rf-event--2025-06-17 rf-event--San Francisco, CA rf-event--https://example.com/register" data-date="2025-06-15" data-end-date="2025-06-17" data-location="San Francisco, CA" data-url="https://example.com/register" data-elevation="flat" data-rune="event" data-density="full">
  <header data-name="preamble" class="rf-event__preamble">
    <h1 id="tech-conference-2025" data-name="headline" property="name" class="rf-event__headline" data-section="title">Tech Conference 2025</h1>
    <p data-name="blurb" property="description" class="rf-event__blurb" data-section="description">Join us for three days of talks, workshops, and networking with the web development community.</p>
  </header>
  <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-event__metadata">
    <div data-name="row" data-field="date" class="rf-event__row">
      <dt data-meta-label="">Date</dt>
      <dd data-meta-type="temporal">2025-06-15</dd>
    </div>
    <div data-name="row" data-field="endDate" class="rf-event__row">
      <dt data-meta-label="">Ends</dt>
      <dd data-meta-type="temporal">2025-06-17</dd>
    </div>
    <div data-name="row" data-field="location" class="rf-event__row">
      <dt data-meta-label="">Location</dt>
      <dd>
        <span class="rf-badge" data-meta-type="category">San Francisco, CA</span>
      </dd>
    </div>
  </dl>
  <div data-name="body" class="rf-event__body" data-section="body">
    <ul>
      <li>Keynote: The Future of Web Development</li>
      <li>Workshop: Building with Semantic Content</li>
      <li>Panel: Open Source Sustainability</li>
      <li>Networking Dinner</li>
    </ul>
  </div>
  <meta content="2025-06-15" property="startDate" />
  <meta content="2025-06-17" property="endDate" />
  <meta content="https://example.com/register" property="url" />
  <span typeof="Place" property="location">
    <meta property="name" content="San Francisco, CA" />
  </span>
</article>

Attributes

Attribute	Type	Required	Description
`date`	`string`	—	Start date of the event (e.g. 2025-06-15).
`endDate`	`string`	—	End date for multi-day events.
`location`	`string`	—	Venue or place name where the event is held.
`url`	`string`	—	Link to the event page or ticket source.

Universal attributes

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

Attribute	Type	Required	Description
`bg`	`string`	—	Background preset applied to this block
`bg-from`	`string`	—	Gradient start colour — a semantic token name (→ var(--rf-color-*))
`bg-gradient`	`"to-t" \| "to-b" \| "to-l" \| "to-r" \| "to-tr" \| "to-br" \| "to-bl" \| "to-tl"`	—	Gradient direction (bounded named set)
`bg-gradient-type`	`"linear" \| "radial" \| "conic"`	—	Gradient type
`bg-to`	`string`	—	Gradient end colour — a semantic token name
`bg-via`	`string`	—	Optional middle gradient stop — a semantic token name
`scrim`	`"top" \| "bottom" \| "left" \| "right" \| "none"`	—	Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
`scrim-blur`	`"none" \| "sm" \| "md" \| "lg"`	—	Frost scrim blur amount
`scrim-strength`	`"sm" \| "md" \| "lg"`	—	Gradient scrim strength
`scrim-tone`	`"dark" \| "light"`	—	Whether the scrim darkens (for light text) or lightens (for dark text)
`scrim-type`	`"gradient" \| "frost"`	—	Scrim treatment: gradient (default) or frost (backdrop blur)

Per-instance drop-cap opt-in (SPEC-108).

Attribute	Type	Required	Description
`dropcap`	`boolean`	—	Style the opening letter of a prose body as a drop cap (SPEC-108). Honoured only when the body reads as prose; ignored otherwise.

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`elevation`	`"sunken" \| "flush" \| "flat" \| "raised" \| "floating" \| "overlay" \| "none" \| "sm" \| "md" \| "lg"`	—	Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases

Internal padding override.

Attribute	Type	Required	Description
`inset`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Inner padding of this block

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

Attribute	Type	Required	Description
`reveal`	`"none" \| "fade" \| "slide" \| "scale" \| "blur"`	—	Scroll-reveal entrance character (none\|fade\|slide\|scale\|blur); the theme owns the choreography
`stagger`	`boolean`	—	Cascade this block's items in as it reveals (no-op on single-child runes)

Header emphasis (SPEC-107). Scales a rune's page-section header; the skin maps it to a type register by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`prominence`	`"quiet" \| "normal" \| "prominent" \| "display"`	—	Section-header emphasis (only on page-section-header family runes)

Editorial register for body text (SPEC-108). The author picks the register; the theme owns the magnitude.

Attribute	Type	Required	Description
`reading`	`"fine" \| "ui" \| "prose"`	—	Reading register for this block’s body (SPEC-108): fine \| ui \| prose. The theme owns the editorial treatment.

Block-level rhythm override.

Attribute	Type	Required	Description
`spacing`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Vertical spacing above and below this block

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

Attribute	Type	Required	Description
`substrate`	`"dots" \| "grid" \| "lines" \| "cross" \| "checker" \| "none"`	—	Generated surface pattern
`substrate-fill`	`"inherit" \| "inset"`	—	Surface fill the pattern sits on (full colour stays with tint)
`substrate-opacity`	`"sm" \| "md" \| "lg"`	—	Pattern ink strength
`substrate-size`	`"sm" \| "md" \| "lg"`	—	Pattern cell size
`substrate-target`	`"self" \| "media"`	—	Which surface the pattern fills (overrides the rune/theme default)

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

Attribute	Type	Required	Description
`tint`	`string`	—	Color tint preset applied to this block
`tint-mode`	`"auto" \| "dark" \| "light"`	—	Whether the tint adapts to auto, dark, or light mode

The track a block rune occupies.

Attribute	Type	Required	Description
`width`	`"compact" \| "narrow" \| "content" \| "wide" \| "full"`	—	Maximum width constraint for this block

Not available	Why
frame	this rune declares neither a `frameTarget` nor a media section

Section header

Event supports an optional eyebrow, headline, and blurb above the section above event details. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan