refrakt.mdnote
This rune is part of @refrakt-md/places. Install with npm install @refrakt-md/places and add "@refrakt-md/places" to the packages array in your refrakt.config.json.
Event
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">
<meta content="2025-06-15" data-field="date" property="startDate">
<meta content="2025-06-17" data-field="end-date" property="endDate">
<meta content="San Francisco, CA" data-field="location">
<meta content="https://example.com/register" data-field="url" property="url">
<header>
<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>
</header>
<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.
- 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-rune="event" data-density="full">
<div data-name="header" class="rf-event__header" data-section="header">
<div data-name="meta" class="rf-event__meta">
<span data-name="meta-item" data-meta-type="temporal" data-meta-rank="primary" class="rf-event__meta-item">
<span data-meta-label="">Date:</span>
<span data-meta-value="">2025-06-15</span>
</span>
<span data-name="meta-item" data-meta-type="temporal" data-meta-rank="primary" class="rf-event__meta-item">
<span data-meta-label="">—</span>
<span data-meta-value="">2025-06-17</span>
</span>
<span data-name="meta-item" data-meta-type="category" data-meta-rank="primary" class="rf-event__meta-item">
<span data-meta-label="">Location:</span>
<span data-meta-value="">San Francisco, CA</span>
</span>
</div>
</div>
<div data-name="content" class="rf-event__content" data-section="body">
<meta content="2025-06-15" data-field="date" property="startDate" />
<meta content="2025-06-17" data-field="end-date" property="endDate" />
<meta content="San Francisco, CA" data-field="location" />
<meta content="https://example.com/register" data-field="url" property="url" />
<header data-name="preamble" class="rf-event__preamble" data-section="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>
<div data-name="body" class="rf-event__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>
</div>
<a data-name="register" href="https://example.com/register" class="rf-event__register">Register</a>
</article>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
date | string | — | Event start date |
endDate | string | — | Event end date |
location | string | — | Venue name or "Online" |
url | string | — | Event or registration URL |
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.
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |