refrakt.md

Docs Runes Plan Blog Changelog

note

This rune is part of @refrakt-md/marketing. Install with npm install @refrakt-md/marketing and add "@refrakt-md/marketing" to the packages 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">
  <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="5" data-field="rating">
  <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-rune="testimonial" data-density="compact">
  <div data-name="rating" class="rf-testimonial__rating">
    <span data-name="star" data-filled="true" class="rf-testimonial__star"></span>
    <span data-name="star" data-filled="true" class="rf-testimonial__star"></span>
    <span data-name="star" data-filled="true" class="rf-testimonial__star"></span>
    <span data-name="star" data-filled="true" class="rf-testimonial__star"></span>
    <span data-name="star" data-filled="true" class="rf-testimonial__star"></span>
  </div>
  <div data-name="content" class="rf-testimonial__content" data-section="body">
    <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="5" data-field="rating" />
    <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>
  </div>
</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-rune="testimonial" data-density="compact">
  <div data-name="content" class="rf-testimonial__content" data-section="body">
    <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>
  </div>
</article>

Attributes

AttributeTypeDefaultDescription
ratingnumber—Star rating from 0 to 5
variantstringcardDisplay style: card, inline, or quote

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