refrakt.md

Docs Runes Plan Blog Changelog

note

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

Organization

Structured business or organization information. Headings become the organization name, images become the logo, and links become website/social profiles.

Local business

A local business listing with address, hours, and contact info.

{% organization type="LocalBusiness" %}
# Acme Coffee Shop

Your neighborhood coffee shop since 2015. We serve locally roasted coffee and fresh pastries every day.

- **Address:** 123 Main St, Portland, OR 97201
- **Hours:** Mon–Fri 7am–6pm, Sat–Sun 8am–5pm
- **Phone:** (503) 555-0123
- [Website](https://acme.coffee)
{% /organization %}
<article data-field="content-section" data-rune="organization" typeof="LocalBusiness">
  <meta content="LocalBusiness" data-field="type">
  <header>
    <h1 id="acme-coffee-shop" data-name="headline" property="name">Acme Coffee Shop</h1>
    <p data-name="blurb" property="description">Your neighborhood coffee shop since 2015. We serve locally roasted coffee and fresh pastries every day.</p>
  </header>
  <div data-name="body">
    <ul>
      <li>
        <strong marker="**">Address:</strong>
        123 Main St, Portland, OR 97201
      </li>
      <li>
        <strong marker="**">Hours:</strong>
        Mon–Fri 7am–6pm, Sat–Sun 8am–5pm
      </li>
      <li>
        <strong marker="**">Phone:</strong>
        (503) 555-0123
      </li>
      <li>
        <a href="https://acme.coffee">Website</a>
      </li>
    </ul>
  </div>
</article>

Acme Coffee Shop

Your neighborhood coffee shop since 2015. We serve locally roasted coffee and fresh pastries every day.

  • Address: 123 Main St, Portland, OR 97201
  • Hours: Mon–Fri 7am–6pm, Sat–Sun 8am–5pm
  • Phone: (503) 555-0123
  • Website
<article data-field="content-section" typeof="LocalBusiness" class="rf-organization" data-rune="organization" data-density="full">
  <meta content="LocalBusiness" data-field="type" />
  <header data-name="preamble" class="rf-organization__preamble" data-section="preamble">
    <h1 id="acme-coffee-shop" data-name="headline" property="name" class="rf-organization__headline" data-section="title">Acme Coffee Shop</h1>
    <p data-name="blurb" property="description" class="rf-organization__blurb" data-section="description">Your neighborhood coffee shop since 2015. We serve locally roasted coffee and fresh pastries every day.</p>
  </header>
  <div data-name="body" class="rf-organization__body" data-section="body">
    <ul>
      <li>
        <strong marker="**">Address:</strong>
         123 Main St, Portland, OR 97201
      </li>
      <li>
        <strong marker="**">Hours:</strong>
         Mon–Fri 7am–6pm, Sat–Sun 8am–5pm
      </li>
      <li>
        <strong marker="**">Phone:</strong>
         (503) 555-0123
      </li>
      <li>
        <a href="https://acme.coffee">Website</a>
      </li>
    </ul>
  </div>
</article>

Corporation

A corporation profile with structured data.

{% organization type="Corporation" %}
# Acme Inc.

Enterprise solutions for the modern web.

- **Founded:** 2018
- **Headquarters:** San Francisco, CA
- [Website](https://acme.example.com)
- [GitHub](https://github.com/acme)
{% /organization %}
<article data-field="content-section" data-rune="organization" typeof="Corporation">
  <meta content="Corporation" data-field="type">
  <header>
    <h1 id="acme-inc." data-name="headline" property="name">Acme Inc.</h1>
    <p data-name="blurb" property="description">Enterprise solutions for the modern web.</p>
  </header>
  <div data-name="body">
    <ul>
      <li>
        <strong marker="**">Founded:</strong>
        2018
      </li>
      <li>
        <strong marker="**">Headquarters:</strong>
        San Francisco, CA
      </li>
      <li>
        <a href="https://acme.example.com">Website</a>
      </li>
      <li>
        <a href="https://github.com/acme">GitHub</a>
      </li>
    </ul>
  </div>
</article>

Acme Inc.

Enterprise solutions for the modern web.

<article data-field="content-section" typeof="Corporation" class="rf-organization" data-rune="organization" data-density="full">
  <meta content="Corporation" data-field="type" />
  <header data-name="preamble" class="rf-organization__preamble" data-section="preamble">
    <h1 id="acme-inc." data-name="headline" property="name" class="rf-organization__headline" data-section="title">Acme Inc.</h1>
    <p data-name="blurb" property="description" class="rf-organization__blurb" data-section="description">Enterprise solutions for the modern web.</p>
  </header>
  <div data-name="body" class="rf-organization__body" data-section="body">
    <ul>
      <li>
        <strong marker="**">Founded:</strong>
         2018
      </li>
      <li>
        <strong marker="**">Headquarters:</strong>
         San Francisco, CA
      </li>
      <li>
        <a href="https://acme.example.com">Website</a>
      </li>
      <li>
        <a href="https://github.com/acme">GitHub</a>
      </li>
    </ul>
  </div>
</article>

Attributes

AttributeTypeDefaultDescription
typestringOrganizationOrganization type: Organization, LocalBusiness, Corporation, EducationalOrganization, GovernmentOrganization, NonProfit

Section header

Organization supports an optional eyebrow, headline, and blurb above the section above 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.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration