refrakt.mdTextBlock
Typography-focused text wrapper for magazine-style layouts. Adds drop caps, multi-column text, lead paragraph styling, and text alignment without any custom markup inside the content.
Drop cap
The dropcap attribute adds a large decorative first letter for an editorial feel.
{% textblock dropcap=true %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
{% /textblock %}<div data-rune="text-block">
<meta content="dropcap" data-field="dropcap">
<div data-name="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div class="rf-textblock rf-textblock--dropcap rf-textblock--left" data-dropcap="dropcap" data-align="left" data-rune="text-block" data-density="full">
<div data-name="body" class="rf-textblock__body" data-section="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>Multi-column layout
Use the columns attribute for newspaper-style column layouts.
{% textblock columns=2 %}
The invention of the printing press in the 15th century revolutionized the spread of information across Europe. Before Gutenberg, books were painstakingly copied by hand, making them rare and expensive.
With movable type, ideas could be reproduced quickly and cheaply. This democratization of knowledge helped fuel the Renaissance, the Reformation, and the Scientific Revolution.
{% /textblock %}<div data-rune="text-block">
<meta content="2" data-field="columns">
<div data-name="body">
<p>The invention of the printing press in the 15th century revolutionized the spread of information across Europe. Before Gutenberg, books were painstakingly copied by hand, making them rare and expensive.</p>
<p>With movable type, ideas could be reproduced quickly and cheaply. This democratization of knowledge helped fuel the Renaissance, the Reformation, and the Scientific Revolution.</p>
</div>
</div>The invention of the printing press in the 15th century revolutionized the spread of information across Europe. Before Gutenberg, books were painstakingly copied by hand, making them rare and expensive.
With movable type, ideas could be reproduced quickly and cheaply. This democratization of knowledge helped fuel the Renaissance, the Reformation, and the Scientific Revolution.
<div class="rf-textblock rf-textblock--2 rf-textblock--left" data-columns="2" data-align="left" data-rune="text-block" data-density="full">
<div data-name="body" class="rf-textblock__body" data-section="body">
<p>The invention of the printing press in the 15th century revolutionized the spread of information across Europe. Before Gutenberg, books were painstakingly copied by hand, making them rare and expensive.</p>
<p>With movable type, ideas could be reproduced quickly and cheaply. This democratization of knowledge helped fuel the Renaissance, the Reformation, and the Scientific Revolution.</p>
</div>
</div>Lead paragraphs
The lead attribute styles the text as a larger introductory paragraph.
{% textblock lead=true %}
This is the opening paragraph of the article, styled with larger text and heavier weight to draw the reader in.
{% /textblock %}<div data-rune="text-block">
<meta content="lead" data-field="lead">
<div data-name="body">
<p>This is the opening paragraph of the article, styled with larger text and heavier weight to draw the reader in.</p>
</div>
</div>This is the opening paragraph of the article, styled with larger text and heavier weight to draw the reader in.
<div class="rf-textblock rf-textblock--lead rf-textblock--left" data-lead="lead" data-align="left" data-rune="text-block" data-density="full">
<div data-name="body" class="rf-textblock__body" data-section="body">
<p>This is the opening paragraph of the article, styled with larger text and heavier weight to draw the reader in.</p>
</div>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
dropcap | boolean | false | Enable drop cap styling on the first letter |
columns | number | 1 | Number of text columns (values greater than 1 trigger column layout) |
lead | boolean | false | Display as a lead paragraph with larger, bolder text |
align | string | left | Text alignment: left, center, right, or justify |
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |