MediaText

Side-by-side media and text layouts. Images within the rune are extracted into a media column, and the remaining text forms the body column. Control image placement, size ratio, and text wrapping.

Basic usage

Place an image alongside text — the image is automatically extracted and placed according to the align attribute.

{% mediatext align="left" ratio="1:1" %}
![Mountain landscape](https://assets.refrakt.md/media-text-valley.jpg)

The valley stretches out below, carved by millennia of glacial movement. In spring, wildflowers carpet the meadows in brilliant color, attracting hikers and photographers from around the world.

The trails here range from gentle walks suitable for families to challenging ridge climbs that reward with panoramic views.
{% /mediatext %}
<div data-rune="media-text">
  <meta content="left" data-field="align">
  <meta content="1:1" data-field="ratio">
  <div data-name="media">
    <img src="https://assets.refrakt.md/media-text-valley.jpg" alt="Mountain landscape">
  </div>
  <div data-name="body">
    <p>The valley stretches out below, carved by millennia of glacial movement. In spring, wildflowers carpet the meadows in brilliant color, attracting hikers and photographers from around the world.</p>
    <p>The trails here range from gentle walks suitable for families to challenging ridge climbs that reward with panoramic views.</p>
  </div>
</div>
Mountain landscape

The valley stretches out below, carved by millennia of glacial movement. In spring, wildflowers carpet the meadows in brilliant color, attracting hikers and photographers from around the world.

The trails here range from gentle walks suitable for families to challenging ridge climbs that reward with panoramic views.

<div class="rf-mediatext rf-mediatext--left rf-mediatext--1:1" data-align="left" data-ratio="1:1" data-rune="media-text" data-density="full">
  <div data-name="media" class="rf-mediatext__media" data-section="media" data-media="cover">
    <img src="https://assets.refrakt.md/media-text-valley.jpg" alt="Mountain landscape" />
  </div>
  <div data-name="body" class="rf-mediatext__body" data-section="body">
    <p>The valley stretches out below, carved by millennia of glacial movement. In spring, wildflowers carpet the meadows in brilliant color, attracting hikers and photographers from around the world.</p>
    <p>The trails here range from gentle walks suitable for families to challenging ridge climbs that reward with panoramic views.</p>
  </div>
</div>

Image on the right

Flip the layout by setting align="right".

{% mediatext align="right" ratio="1:2" %}
![Ancient forest](https://assets.refrakt.md/media-text-old-growth.jpg)

Old-growth forests like this one in the Pacific Northwest contain trees over 500 years old, forming dense canopies that filter sunlight into soft, dappled patterns on the forest floor. The thick understory of ferns and moss supports an ecosystem found nowhere else on earth.

Walking through these forests feels like stepping back in time. The silence is broken only by birdsong and the occasional crack of a falling branch, while the air carries the rich scent of cedar and damp earth.
{% /mediatext %}
<div data-rune="media-text">
  <meta content="right" data-field="align">
  <meta content="1:2" data-field="ratio">
  <div data-name="media">
    <img src="https://assets.refrakt.md/media-text-old-growth.jpg" alt="Ancient forest">
  </div>
  <div data-name="body">
    <p>Old-growth forests like this one in the Pacific Northwest contain trees over 500 years old, forming dense canopies that filter sunlight into soft, dappled patterns on the forest floor. The thick understory of ferns and moss supports an ecosystem found nowhere else on earth.</p>
    <p>Walking through these forests feels like stepping back in time. The silence is broken only by birdsong and the occasional crack of a falling branch, while the air carries the rich scent of cedar and damp earth.</p>
  </div>
</div>
Ancient forest

Old-growth forests like this one in the Pacific Northwest contain trees over 500 years old, forming dense canopies that filter sunlight into soft, dappled patterns on the forest floor. The thick understory of ferns and moss supports an ecosystem found nowhere else on earth.

Walking through these forests feels like stepping back in time. The silence is broken only by birdsong and the occasional crack of a falling branch, while the air carries the rich scent of cedar and damp earth.

<div class="rf-mediatext rf-mediatext--right rf-mediatext--1:2" data-align="right" data-ratio="1:2" data-rune="media-text" data-density="full">
  <div data-name="media" class="rf-mediatext__media" data-section="media" data-media="cover">
    <img src="https://assets.refrakt.md/media-text-old-growth.jpg" alt="Ancient forest" />
  </div>
  <div data-name="body" class="rf-mediatext__body" data-section="body">
    <p>Old-growth forests like this one in the Pacific Northwest contain trees over 500 years old, forming dense canopies that filter sunlight into soft, dappled patterns on the forest floor. The thick understory of ferns and moss supports an ecosystem found nowhere else on earth.</p>
    <p>Walking through these forests feels like stepping back in time. The silence is broken only by birdsong and the occasional crack of a falling branch, while the air carries the rich scent of cedar and damp earth.</p>
  </div>
</div>

Text wrapping

Enable wrap for text that flows around the image rather than staying in a strict column.

{% mediatext align="left" ratio="2:1" wrap=true %}
![Japanese zen garden](https://assets.refrakt.md/media-text-zen-garden.jpg)

The Japanese zen garden, or *karesansui*, is an art form centuries in the making. Raked gravel represents flowing water, while carefully placed stones suggest mountains rising from the sea. Bonsai trees — shaped over decades of patient pruning — anchor the composition with gnarled trunks and delicate canopies that echo their full-sized counterparts in miniature.

In spring, cherry blossoms drift across the garden like pink snow, settling on the raked patterns and dissolving the boundary between the designed and the natural. The transience of the blossoms is central to the experience — a reminder that beauty is most vivid in its passing. Visitors often sit in silence on the wooden engawa, watching petals fall, letting the stillness of the garden quiet the mind.
{% /mediatext %}
<div data-rune="media-text">
  <meta content="left" data-field="align">
  <meta content="2:1" data-field="ratio">
  <meta content="true" data-field="wrap">
  <div data-name="media">
    <img src="https://assets.refrakt.md/media-text-zen-garden.jpg" alt="Japanese zen garden">
  </div>
  <div data-name="body">
    <p>
      The Japanese zen garden, or
      <em marker="*">karesansui</em>
      , is an art form centuries in the making. Raked gravel represents flowing water, while carefully placed stones suggest mountains rising from the sea. Bonsai trees — shaped over decades of patient pruning — anchor the composition with gnarled trunks and delicate canopies that echo their full-sized counterparts in miniature.
    </p>
    <p>In spring, cherry blossoms drift across the garden like pink snow, settling on the raked patterns and dissolving the boundary between the designed and the natural. The transience of the blossoms is central to the experience — a reminder that beauty is most vivid in its passing. Visitors often sit in silence on the wooden engawa, watching petals fall, letting the stillness of the garden quiet the mind.</p>
  </div>
</div>
Japanese zen garden

The Japanese zen garden, or karesansui, is an art form centuries in the making. Raked gravel represents flowing water, while carefully placed stones suggest mountains rising from the sea. Bonsai trees — shaped over decades of patient pruning — anchor the composition with gnarled trunks and delicate canopies that echo their full-sized counterparts in miniature.

In spring, cherry blossoms drift across the garden like pink snow, settling on the raked patterns and dissolving the boundary between the designed and the natural. The transience of the blossoms is central to the experience — a reminder that beauty is most vivid in its passing. Visitors often sit in silence on the wooden engawa, watching petals fall, letting the stillness of the garden quiet the mind.

<div class="rf-mediatext rf-mediatext--left rf-mediatext--2:1 rf-mediatext--true" data-align="left" data-ratio="2:1" data-wrap="true" data-rune="media-text" data-density="full">
  <div data-name="media" class="rf-mediatext__media" data-section="media" data-media="cover">
    <img src="https://assets.refrakt.md/media-text-zen-garden.jpg" alt="Japanese zen garden" />
  </div>
  <div data-name="body" class="rf-mediatext__body" data-section="body">
    <p>
      The Japanese zen garden, or 
      <em marker="*">karesansui</em>
      , is an art form centuries in the making. Raked gravel represents flowing water, while carefully placed stones suggest mountains rising from the sea. Bonsai trees — shaped over decades of patient pruning — anchor the composition with gnarled trunks and delicate canopies that echo their full-sized counterparts in miniature.
    </p>
    <p>In spring, cherry blossoms drift across the garden like pink snow, settling on the raked patterns and dissolving the boundary between the designed and the natural. The transience of the blossoms is central to the experience — a reminder that beauty is most vivid in its passing. Visitors often sit in silence on the wooden engawa, watching petals fall, letting the stillness of the garden quiet the mind.</p>
  </div>
</div>

Attributes

AttributeTypeDefaultDescription
alignstringleftImage placement: left or right
ratiostring1:1Image-to-text width ratio: 1:2, 1:1, or 2:1
wrapbooleanfalseEnable text wrapping around the image instead of side-by-side columns

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstringVertical spacing: flush, tight, default, loose, or breathe
insetstringHorizontal padding: flush, tight, default, loose, or breathe
tintstringNamed colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstringNamed background preset from theme configuration