Text

Content component for markdown-formatted text.

This is all one markdown block

Including this paragraph with bold and italic text.

And
This
List
Too!

---
import Text from "@core-elements/text/Text.astro";
---

<Text alignX="start">
  <h2>This is all one markdown block</h2>
  <p>Including this paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
  <ul>
    <li>And</li>
    <li>This</li>
    <li>List</li>
    <li>Too!</li>
  </ul>
</Text>

---
blocks:
  _component: building-blocks/core-elements/text
  text: |-
    ## This is all one markdown block 

    Including this paragraph with **bold** and *italic* text.

    * And
    * This
    * List
    * Too!
  alignX: start
---

Overview

Renders markdown as HTML with support for headings, lists, links, and rich formatting. For plain text paragraphs with inline formatting and size control, use Simple Text instead.

Properties

text string | default: My text goes here.

The content for the text component (Markdown format). Leave empty to use slot content instead.

alignX enum | default: start

The horizontal alignment of the text component.

Accepted values:

start
center
end

Slots

default

The content inside the Text component (used when text prop is empty).

Examples

Align

Start aligned

Center aligned

End aligned

---
import Text from "@core-elements/text/Text.astro";
---

<Text alignX="start">
  <p><strong>Start</strong> aligned</p>
</Text>

<Text alignX="center">
  <p><strong>Center</strong> aligned</p>
</Text>

<Text alignX="end">
  <p><strong>End</strong> aligned</p>
</Text>

---
blocks:
  - _component: building-blocks/core-elements/text
    text: '**Start** aligned'
    alignX: start
  - _component: building-blocks/core-elements/text
    text: '**Center** aligned'
    alignX: center
  - _component: building-blocks/core-elements/text
    text: '**End** aligned'
    alignX: end
---