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.

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">
  <meta content="grid" data-field="layout">
  <ul data-name="members">
    <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 JohnsonAlice JohnsonCEO
  • Bob SmithBob 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="members" class="rf-cast__members">
    <li data-field="member" typeof="Person" class="rf-cast-member" 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-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-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-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">
  <meta content="grid" data-field="layout">
  <ul data-name="members"></ul>
</section>
<section data-field="content-section" class="rf-cast rf-cast--grid" data-layout="grid" data-rune="cast" data-density="full">
  <ul data-name="members" class="rf-cast__members"></ul>
</section>

Attributes

AttributeTypeDefaultDescription
layoutstringgridDisplay layout: grid or list

Member attributes

AttributeTypeDefaultDescription
namestring—Person's name
rolestring—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.

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