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.

Cast / Team

People directory for team pages, cast lists, or speaker lineups. List items with a "Name - Role" pattern are automatically parsed into entries.

Basic usage

List items are parsed into name and role parts automatically.

{% cast layout="grid" %}
- Alice Johnson - CEO
  ![Alice Johnson](https://assets.refrakt.md/team-alice-johnson.png)
- Bob Smith - CTO
  ![Bob Smith](https://assets.refrakt.md/team-bob-smith.png)
- Carol Williams - Head of Design
- David Chen - Lead Engineer
{% /cast %}

<section data-field="content-section" data-rune="cast" data-rune-fields="{&quot;layout&quot;:&quot;grid&quot;}">
  <ul data-name="items">
    <li data-field="member" data-rune="cast-member" typeof="Person">
      <img src="https://assets.refrakt.md/team-alice-johnson.png" alt="Alice Johnson" property="image">
      <span data-name="name" property="name">Alice Johnson</span>
      <span data-name="role" property="jobTitle">CEO</span>
      <div data-name="body"></div>
    </li>
    <li data-field="member" data-rune="cast-member" typeof="Person">
      <img src="https://assets.refrakt.md/team-bob-smith.png" alt="Bob Smith" property="image">
      <span data-name="name" property="name">Bob Smith</span>
      <span data-name="role" property="jobTitle">CTO</span>
      <div data-name="body"></div>
    </li>
    <li data-field="member" data-rune="cast-member" typeof="Person">
      <span data-name="name" property="name">Carol Williams</span>
      <span data-name="role" property="jobTitle">Head of Design</span>
      <div data-name="body"></div>
    </li>
    <li data-field="member" data-rune="cast-member" typeof="Person">
      <span data-name="name" property="name">David Chen</span>
      <span data-name="role" property="jobTitle">Lead Engineer</span>
      <div data-name="body"></div>
    </li>
  </ul>
</section>

Alice JohnsonCEO
Bob SmithCTO
Carol WilliamsHead of Design
David ChenLead Engineer

<section data-field="content-section" class="rf-cast rf-cast--grid" data-layout="grid" data-rune="cast" data-density="full">
  <ul data-name="items" class="rf-cast__items">
    <li data-field="member" typeof="Person" class="rf-cast-member" data-elevation="flat" data-rune="cast-member" data-density="full">
      <img src="https://assets.refrakt.md/team-alice-johnson.png" alt="Alice Johnson" property="image" />
      <span data-name="name" property="name" class="rf-cast-member__name">Alice Johnson</span>
      <span data-name="role" property="jobTitle" class="rf-cast-member__role">CEO</span>
      <div data-name="body" class="rf-cast-member__body"></div>
    </li>
    <li data-field="member" typeof="Person" class="rf-cast-member" data-elevation="flat" data-rune="cast-member" data-density="full">
      <img src="https://assets.refrakt.md/team-bob-smith.png" alt="Bob Smith" property="image" />
      <span data-name="name" property="name" class="rf-cast-member__name">Bob Smith</span>
      <span data-name="role" property="jobTitle" class="rf-cast-member__role">CTO</span>
      <div data-name="body" class="rf-cast-member__body"></div>
    </li>
    <li data-field="member" typeof="Person" class="rf-cast-member" data-elevation="flat" data-rune="cast-member" data-density="full">
      <span data-name="name" property="name" class="rf-cast-member__name">Carol Williams</span>
      <span data-name="role" property="jobTitle" class="rf-cast-member__role">Head of Design</span>
      <div data-name="body" class="rf-cast-member__body"></div>
    </li>
    <li data-field="member" typeof="Person" class="rf-cast-member" data-elevation="flat" data-rune="cast-member" data-density="full">
      <span data-name="name" property="name" class="rf-cast-member__name">David Chen</span>
      <span data-name="role" property="jobTitle" class="rf-cast-member__role">Lead Engineer</span>
      <div data-name="body" class="rf-cast-member__body"></div>
    </li>
  </ul>
</section>

List layout

Use layout="list" for a denser, single-column directory.

{% cast layout="list" %}
- Alice Johnson - CEO
  ![Alice Johnson](https://assets.refrakt.md/team-alice-johnson.png)
- Bob Smith - CTO
  ![Bob Smith](https://assets.refrakt.md/team-bob-smith.png)
- Carol Williams - Head of Design
- David Chen - Lead Engineer
{% /cast %}

<section data-field="content-section" data-rune="cast" data-rune-fields="{&quot;layout&quot;:&quot;list&quot;}">
  <ul data-name="items">
    <li data-field="member" data-rune="cast-member" typeof="Person">
      <img src="https://assets.refrakt.md/team-alice-johnson.png" alt="Alice Johnson" property="image">
      <span data-name="name" property="name">Alice Johnson</span>
      <span data-name="role" property="jobTitle">CEO</span>
      <div data-name="body"></div>
    </li>
    <li data-field="member" data-rune="cast-member" typeof="Person">
      <img src="https://assets.refrakt.md/team-bob-smith.png" alt="Bob Smith" property="image">
      <span data-name="name" property="name">Bob Smith</span>
      <span data-name="role" property="jobTitle">CTO</span>
      <div data-name="body"></div>
    </li>
    <li data-field="member" data-rune="cast-member" typeof="Person">
      <span data-name="name" property="name">Carol Williams</span>
      <span data-name="role" property="jobTitle">Head of Design</span>
      <div data-name="body"></div>
    </li>
    <li data-field="member" data-rune="cast-member" typeof="Person">
      <span data-name="name" property="name">David Chen</span>
      <span data-name="role" property="jobTitle">Lead Engineer</span>
      <div data-name="body"></div>
    </li>
  </ul>
</section>

Alice JohnsonCEO
Bob SmithCTO
Carol WilliamsHead of Design
David ChenLead Engineer

<section data-field="content-section" class="rf-cast rf-cast--list" data-layout="list" data-rune="cast" data-density="full">
  <ul data-name="items" class="rf-cast__items">
    <li data-field="member" typeof="Person" class="rf-cast-member" data-elevation="flat" data-rune="cast-member" data-density="full">
      <img src="https://assets.refrakt.md/team-alice-johnson.png" alt="Alice Johnson" property="image" />
      <span data-name="name" property="name" class="rf-cast-member__name">Alice Johnson</span>
      <span data-name="role" property="jobTitle" class="rf-cast-member__role">CEO</span>
      <div data-name="body" class="rf-cast-member__body"></div>
    </li>
    <li data-field="member" typeof="Person" class="rf-cast-member" data-elevation="flat" data-rune="cast-member" data-density="full">
      <img src="https://assets.refrakt.md/team-bob-smith.png" alt="Bob Smith" property="image" />
      <span data-name="name" property="name" class="rf-cast-member__name">Bob Smith</span>
      <span data-name="role" property="jobTitle" class="rf-cast-member__role">CTO</span>
      <div data-name="body" class="rf-cast-member__body"></div>
    </li>
    <li data-field="member" typeof="Person" class="rf-cast-member" data-elevation="flat" data-rune="cast-member" data-density="full">
      <span data-name="name" property="name" class="rf-cast-member__name">Carol Williams</span>
      <span data-name="role" property="jobTitle" class="rf-cast-member__role">Head of Design</span>
      <div data-name="body" class="rf-cast-member__body"></div>
    </li>
    <li data-field="member" typeof="Person" class="rf-cast-member" data-elevation="flat" data-rune="cast-member" data-density="full">
      <span data-name="name" property="name" class="rf-cast-member__name">David Chen</span>
      <span data-name="role" property="jobTitle" class="rf-cast-member__role">Lead Engineer</span>
      <div data-name="body" class="rf-cast-member__body"></div>
    </li>
  </ul>
</section>

Explicit members

Use {% cast-member %} tags for more control, including bios.

{% cast %}
{% cast-member name="Alice Johnson" role="CEO" %}
Alice founded the company in 2020.
{% /cast-member %}

{% cast-member name="Bob Smith" role="CTO" %}
Bob leads the engineering team.
{% /cast-member %}
{% /cast %}

<section data-field="content-section" data-rune="cast" data-rune-fields="{&quot;layout&quot;:&quot;grid&quot;}">
  <ul data-name="items">
    <li data-field="member" data-rune="cast-member" typeof="Person">
      <span data-name="name" property="name">Alice Johnson</span>
      <span data-name="role" property="jobTitle">CEO</span>
      <div data-name="body">
        <p>Alice founded the company in 2020.</p>
      </div>
    </li>
    <li data-field="member" data-rune="cast-member" typeof="Person">
      <span data-name="name" property="name">Bob Smith</span>
      <span data-name="role" property="jobTitle">CTO</span>
      <div data-name="body">
        <p>Bob leads the engineering team.</p>
      </div>
    </li>
  </ul>
</section>

Alice JohnsonCEO
Alice founded the company in 2020.
Bob SmithCTO
Bob leads the engineering team.

<section data-field="content-section" class="rf-cast rf-cast--grid" data-layout="grid" data-rune="cast" data-density="full">
  <ul data-name="items" class="rf-cast__items">
    <li data-field="member" typeof="Person" class="rf-cast-member" data-elevation="flat" data-rune="cast-member" data-density="full">
      <span data-name="name" property="name" class="rf-cast-member__name">Alice Johnson</span>
      <span data-name="role" property="jobTitle" class="rf-cast-member__role">CEO</span>
      <div data-name="body" class="rf-cast-member__body">
        <p>Alice founded the company in 2020.</p>
      </div>
    </li>
    <li data-field="member" typeof="Person" class="rf-cast-member" data-elevation="flat" data-rune="cast-member" data-density="full">
      <span data-name="name" property="name" class="rf-cast-member__name">Bob Smith</span>
      <span data-name="role" property="jobTitle" class="rf-cast-member__role">CTO</span>
      <div data-name="body" class="rf-cast-member__body">
        <p>Bob leads the engineering team.</p>
      </div>
    </li>
  </ul>
</section>

Attributes

`cast`

Attribute	Type	Required	Description
`layout`	`"grid" \| "list" \| "carousel"`	—	Visual arrangement of members: grid (cards), list (compact roster), or carousel (scroll-snap track).

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)

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)

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
dropcap, reading	this rune declares no prose body
frame	this rune declares neither a `frameTarget` nor a media section

`cast-member`

Attribute	Type	Required	Description
`name`	`string`	—	Display name of the cast member.
`role`	`string`	—	Job title or role held by this member.
`image`	`string`	—	Portrait image URL.

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)

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)

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
dropcap, reading	this rune declares no prose body
frame	this rune declares neither a `frameTarget` nor a media section
prominence	this rune has no page-section header

Member attributes

Attribute	Type	Default	Description
`name`	`string`	—	Person's name
`role`	`string`	—	Person's role or title

Section header

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

Cast / Team

Basic usage

List layout

Explicit members

Attributes

`cast`

Universal attributes

`cast-member`

Universal attributes

Member attributes

Section header