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 alignX="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.
  alignX: 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).

alignX 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

Basics

This is simple text with bold and italic inline formatting. 

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

<SimpleText alignX="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.
  alignX: start
---

Start aligned

Center aligned

End aligned 

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

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

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

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

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 alignX="start" size="xs">
  This simple text size is xs
</SimpleText>

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

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

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

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

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

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

<SimpleText alignX="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
    alignX: start
    size: xs
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is sm
    alignX: start
    size: sm
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is md
    alignX: start
    size: md
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is lg
    alignX: start
    size: lg
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is xl
    alignX: start
    size: xl
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is 2xl
    alignX: start
    size: 2xl
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is 3xl
    alignX: start
    size: 3xl
  - _component: building-blocks/core-elements/simple-text
    text: This simple text size is 4xl
    alignX: start
    size: 4xl
---