MarketingTestimonial
note

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

Testimonial

Customer testimonials. A blockquote becomes the testimonial text, and a paragraph with **Name** — Role, Company becomes the attribution.

With rating

Include a star rating for review-style testimonials.

{% testimonial rating=5 %}
> refrakt.md completely changed how we think about content. Writing docs has never been this productive — our team ships documentation twice as fast now.

**Sarah Chen** — Head of Content, Acme Corp
{% /testimonial %}
<article data-rune="testimonial" typeof="Review" data-rune-fields="{&quot;rating&quot;:5}">
  <blockquote data-name="quote" property="reviewBody">
    <p>refrakt.md completely changed how we think about content. Writing docs has never been this productive — our team ships documentation twice as fast now.</p>
  </blockquote>
  <span data-name="author-name">Sarah Chen</span>
  <span data-name="author-role">Head of Content, Acme Corp</span>
  <meta content="card">
  <span typeof="Person" property="author">
    <meta property="name" content="Sarah Chen">
    <meta property="jobTitle" content="Head of Content, Acme Corp">
  </span>
  <span typeof="Rating" property="reviewRating">
    <meta property="ratingValue" content="5">
  </span>
</article>

refrakt.md completely changed how we think about content. Writing docs has never been this productive — our team ships documentation twice as fast now.

Sarah ChenHead of Content, Acme Corp
<article typeof="Review" class="rf-testimonial rf-testimonial--card" data-variant="card" data-rating="5" data-rating-total="5" data-elevation="flat" data-rune="testimonial" data-density="compact">
  <div data-name="rating" data-zone="rating" data-zone-layout="bar" class="rf-testimonial__rating">
    <span data-meta-type="rating">
      <span data-filled="true"></span>
      <span data-filled="true"></span>
      <span data-filled="true"></span>
      <span data-filled="true"></span>
      <span data-filled="true"></span>
    </span>
  </div>
  <blockquote data-name="quote" property="reviewBody" class="rf-testimonial__quote">
    <p>refrakt.md completely changed how we think about content. Writing docs has never been this productive — our team ships documentation twice as fast now.</p>
  </blockquote>
  <span data-name="author-name" class="rf-testimonial__author-name">Sarah Chen</span>
  <span data-name="author-role" class="rf-testimonial__author-role">Head of Content, Acme Corp</span>
  <meta content="card" />
  <span typeof="Person" property="author">
    <meta property="name" content="Sarah Chen" />
    <meta property="jobTitle" content="Head of Content, Acme Corp" />
  </span>
  <span typeof="Rating" property="reviewRating">
    <meta property="ratingValue" content="5" />
  </span>
</article>

Without rating

Omit the rating for a pure testimonial quote.

{% testimonial %}
> The semantic approach just makes sense. We moved our entire docs site to refrakt.md in a weekend.

**Alex Rivera** — CTO, StartupCo
{% /testimonial %}
<article data-rune="testimonial" typeof="Review">
  <blockquote data-name="quote" property="reviewBody">
    <p>The semantic approach just makes sense. We moved our entire docs site to refrakt.md in a weekend.</p>
  </blockquote>
  <span data-name="author-name">Alex Rivera</span>
  <span data-name="author-role">CTO, StartupCo</span>
  <meta content="card">
  <span typeof="Person" property="author">
    <meta property="name" content="Alex Rivera">
    <meta property="jobTitle" content="CTO, StartupCo">
  </span>
</article>

The semantic approach just makes sense. We moved our entire docs site to refrakt.md in a weekend.

Alex RiveraCTO, StartupCo
<article typeof="Review" class="rf-testimonial rf-testimonial--card" data-variant="card" data-rating-total="5" data-elevation="flat" data-rune="testimonial" data-density="compact">
  <blockquote data-name="quote" property="reviewBody" class="rf-testimonial__quote">
    <p>The semantic approach just makes sense. We moved our entire docs site to refrakt.md in a weekend.</p>
  </blockquote>
  <span data-name="author-name" class="rf-testimonial__author-name">Alex Rivera</span>
  <span data-name="author-role" class="rf-testimonial__author-role">CTO, StartupCo</span>
  <meta content="card" />
  <span typeof="Person" property="author">
    <meta property="name" content="Alex Rivera" />
    <meta property="jobTitle" content="CTO, StartupCo" />
  </span>
</article>

Attributes

AttributeTypeRequiredDescription
ratingnumberStar rating value (1-5) shown alongside the testimonial
variant"card" | "inline" | "quote"Visual style: card with border, inline with text flow, or quote with large quotation marks
layoutstring

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
bgstringBackground preset applied to this block
bg-fromstringGradient 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-tostringGradient end colour — a semantic token name
bg-viastringOptional 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)
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
frame

Surface chrome (SPEC-086): a named preset from the theme registry with inline `frame-*` overrides layered on top.

AttributeTypeRequiredDescription
framestringNamed frame preset presenting this block's media surface
frame-anchorstringCrop focal point when the guest is cut (object-position)
frame-aspectstringAspect ratio of the framed media, e.g. "16/9"
frame-displace"top" | "bottom" | "end" | "bottom-end" | "top-end"Edge/corner the framed guest moves toward
frame-displace-mode"peek" | "bleed"How displacement renders: `peek` (default) translates the guest visually inside its frame target; `bleed` uses negative margin on the media zone so following layout pulls up — extends past a section like a hero without leaving a gap above
frame-offset"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"Displacement distance (non-linear named scale: sm…xl ride the block-spacing tokens, 2xl/3xl/4xl step up to section-spacing for bleed-mode displacements that clear a section edge)
frame-overflow"clip" | "bleed"How the frame handles a guest whose content is wider than it: `clip` (default) keeps it inside the rounded frame; `bleed` runs an overflowing guest out to the layout edge on a narrow viewport so it reads as cropped by the screen (a bleed host only — hero/feature)
frame-oversizestringHow far the guest exceeds its slot (scale factor)
frame-placestringGuest-box alignment in the slot (e.g. "left top")
frame-shadow"none" | "sm" | "md" | "lg"Silhouette drop-shadow strength for the framed media
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
staggerbooleanCascade this block's items in as it reveals (no-op on single-child runes)
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
tintstringColor 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
dropcap, readingthis rune declares no prose body
prominencethis rune has no page-section header