Back to site

Simple Text

Paragraph for plain text content with inline markdown formatting.

This is simple text with bold and italic inline formatting. 

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

<SimpleText alignmentHorizontal="start">
  This is simple text with <strong>bold</strong> and <em>italic</em> inline formatting.
</SimpleText>
---
blocks:
  _component: building-blocks/core-elements/simple-text
  text: This is simple text with **bold** and *italic* inline formatting.
  alignmentHorizontal: start
---

Overview #

A semantic <p> component for plain text sections with inline markdown formatting. Supports size and alignment controls. For more complex content with headings and lists, use Text instead.

Properties #

text string | default: My text goes here.

The text content of the simple text (inline markdown only).

alignmentHorizontal enum | default: start

The horizontal alignment of the text.

Accepted values:
  • start
  • center
  • end

size enum | default: md

The font size of the text.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl

Slots #

default

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

Examples #

Primary #

This is simple text with bold and italic inline formatting. 

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

<SimpleText alignmentHorizontal="start">
  This is simple text with <strong>bold</strong> and <em>italic</em> inline formatting.
</SimpleText>
---
blocks:
  _component: building-blocks/core-elements/simple-text
  text: This is simple text with **bold** and *italic* inline formatting.
  alignmentHorizontal: start
---

Align #

Start aligned

Center aligned

End aligned 

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

<SimpleText alignmentHorizontal="start">
  <strong>Start</strong> aligned
</SimpleText>

<SimpleText alignmentHorizontal="center">
  <strong>Center</strong> aligned
</SimpleText>

<SimpleText alignmentHorizontal="end">
  <strong>End</strong> aligned
</SimpleText>
---
blocks:
  - _component: building-blocks/core-elements/simple-text
    text: '**Start** aligned'
    alignmentHorizontal: start
  - _component: building-blocks/core-elements/simple-text
    text: '**Center** aligned'
    alignmentHorizontal: center
  - _component: building-blocks/core-elements/simple-text
    text: '**End** aligned'
    alignmentHorizontal: end
---

Sizes #

This simple text size is xs

This simple text size is sm

This simple text size is md

This simple text size is lg

This simple text size is xl

This simple text size is 2xl

This simple text size is 3xl

This simple text size is 4xl 

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

<SimpleText alignmentHorizontal="start" size="xs">
  This simple text size is xs
</SimpleText>

<SimpleText alignmentHorizontal="start" size="sm">
  This simple text size is sm
</SimpleText>

<SimpleText alignmentHorizontal="start" size="md">
  This simple text size is md
</SimpleText>

<SimpleText alignmentHorizontal="start" size="lg">
  This simple text size is lg
</SimpleText>

<SimpleText alignmentHorizontal="start" size="xl">
  This simple text size is xl
</SimpleText>

<SimpleText alignmentHorizontal="start" size="2xl">
  This simple text size is 2xl
</SimpleText>

<SimpleText alignmentHorizontal="start" size="3xl">
  This simple text size is 3xl
</SimpleText>

<SimpleText alignmentHorizontal="start" size="4xl">
  This simple text size is 4xl
</SimpleText>
---
blocks:
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is xs
    alignmentHorizontal: start
    size: xs
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is sm
    alignmentHorizontal: start
    size: sm
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is md
    alignmentHorizontal: start
    size: md
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is lg
    alignmentHorizontal: start
    size: lg
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is xl
    alignmentHorizontal: start
    size: xl
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is 2xl
    alignmentHorizontal: start
    size: 2xl
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is 3xl
    alignmentHorizontal: start
    size: 3xl
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is 4xl
    alignmentHorizontal: start
    size: 4xl
---