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 alignmentHorizontal="start" size="md">
  <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!
  alignmentHorizontal: start
  size: md
---

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.

alignmentHorizontal enum | default: start

The horizontal alignment of the text component.

Accepted values:

start
center
end

size enum | default: md

The font size of paragraphs and lists. Does not affect headings.

Accepted values:

xs
sm
md
lg
xl
2xl
3xl
4xl

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 alignmentHorizontal="start" size="md">
  <p><strong>Start</strong> aligned</p>
</Text>

<Text alignmentHorizontal="center" size="md">
  <p><strong>Center</strong> aligned</p>
</Text>

<Text alignmentHorizontal="end" size="md">
  <p><strong>End</strong> aligned</p>
</Text>

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

Sizes #

This text size is xs

This text size is sm

This text size is md

This text size is lg

This text size is xl

This text size is 2xl

This text size is 3xl

This text size is 4xl

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

<Text alignmentHorizontal="start" size="xs">
  <p>This text size is xs</p>
</Text>

<Text alignmentHorizontal="start" size="sm">
  <p>This text size is sm</p>
</Text>

<Text alignmentHorizontal="start" size="md">
  <p>This text size is md</p>
</Text>

<Text alignmentHorizontal="start" size="lg">
  <p>This text size is lg</p>
</Text>

<Text alignmentHorizontal="start" size="xl">
  <p>This text size is xl</p>
</Text>

<Text alignmentHorizontal="start" size="2xl">
  <p>This text size is 2xl</p>
</Text>

<Text alignmentHorizontal="start" size="3xl">
  <p>This text size is 3xl</p>
</Text>

<Text alignmentHorizontal="start" size="4xl">
  <p>This text size is 4xl</p>
</Text>

---
blocks:
  - _component: building-blocks/core-elements/text
    text: This text size is xs
    alignmentHorizontal: start
    size: xs
  - _component: building-blocks/core-elements/text
    text: This text size is sm
    alignmentHorizontal: start
    size: sm
  - _component: building-blocks/core-elements/text
    text: This text size is md
    alignmentHorizontal: start
    size: md
  - _component: building-blocks/core-elements/text
    text: This text size is lg
    alignmentHorizontal: start
    size: lg
  - _component: building-blocks/core-elements/text
    text: This text size is xl
    alignmentHorizontal: start
    size: xl
  - _component: building-blocks/core-elements/text
    text: This text size is 2xl
    alignmentHorizontal: start
    size: 2xl
  - _component: building-blocks/core-elements/text
    text: This text size is 3xl
    alignmentHorizontal: start
    size: 3xl
  - _component: building-blocks/core-elements/text
    text: This text size is 4xl
    alignmentHorizontal: start
    size: 4xl
---