refrakt.md

Docs

Runes

Themes

Extend

Project

Business›Organization
note

This rune is part of @refrakt-md/business. Install with npm install @refrakt-md/business and add "@refrakt-md/business" to the plugins 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" data-rune-fields="{&quot;type&quot;:&quot;LocalBusiness&quot;}">
  <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-elevation="flat" data-rune="organization" data-density="full">
  <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" data-rune-fields="{&quot;type&quot;:&quot;Corporation&quot;}">
  <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-elevation="flat" data-rune="organization" data-density="full">
  <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

AttributeTypeRequiredDescription
type"Organization" | "LocalBusiness" | "Corporation" | "EducationalOrganization" | "GovernmentOrganization" | "NonProfit"—Schema.org organization category used for structured data.

Universal attributes

bg

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

AttributeTypeRequiredDescription
bgstring—Background preset applied to this block
bg-fromstring—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-tostring—Gradient end colour — a semantic token name
bg-viastring—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)
dropcap

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

AttributeTypeRequiredDescription
dropcapboolean—Style the opening letter of a prose body as a drop cap (SPEC-108). Honoured only when the body reads as prose; ignored otherwise.
elevation

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

AttributeTypeRequiredDescription
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
inset

Internal padding override.

AttributeTypeRequiredDescription
inset"flush" | "tight" | "default" | "loose" | "breathe"—Inner padding of this block
motion

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

AttributeTypeRequiredDescription
reveal"none" | "fade" | "slide" | "scale" | "blur"—Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography
staggerboolean—Cascade this block's items in as it reveals (no-op on single-child runes)
prominence

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.

AttributeTypeRequiredDescription
prominence"quiet" | "normal" | "prominent" | "display"—Section-header emphasis (only on page-section-header family runes)
reading

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

AttributeTypeRequiredDescription
reading"fine" | "ui" | "prose"—Reading register for this block’s body (SPEC-108): fine | ui | prose. The theme owns the editorial treatment.
spacing

Block-level rhythm override.

AttributeTypeRequiredDescription
spacing"flush" | "tight" | "default" | "loose" | "breathe"—Vertical spacing above and below this block
substrate

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

AttributeTypeRequiredDescription
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)
tint

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

AttributeTypeRequiredDescription
tintstring—Color tint preset applied to this block
tint-mode"auto" | "dark" | "light"—Whether the tint adapts to auto, dark, or light mode
width

The track a block rune occupies.

AttributeTypeRequiredDescription
width"compact" | "narrow" | "content" | "wide" | "full"—Maximum width constraint for this block
Not availableWhy
framethis rune declares neither a `frameTarget` nor a media section

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.