Content & Typography · 6 Props

Text

General-purpose typography block for body text, titles, and labels. Supports variant (title/body/eyebrow), tone coloring, size, and semantic HTML tag selection.

Content & Typography 6 Props

src/components/blocks/Text.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
as	string	p	"div" \| "h1" \| "h2" \| "h3" \| "h4" \| "p" \| "span" \| "strong" \| "em" \| "small"
class	string	""
html	string	—
markdown	string	—
style	string	—
text	string	""

Beispiele

Variants & Sizes

title/body Variant in verschiedenen Grössen.

Title Large

Title Medium

Title Small

Body Default – normaler Fliesstext ohne spezielle Formatierung.

Small Muted – Untertitel oder Hilfstext.

Extra Small Muted – Fussnoten, Meta-Infos.

{
  "type": "stack",
  "props": {
    "gap": "sm"
  },
  "blocks": [
    {
      "type": "text",
      "props": {
        "variant": "title",
        "size": "lg",
        "text": "Title Large"
      }
    },
    {
      "type": "text",
      "props": {
        "variant": "title",
        "size": "md",
        "text": "Title Medium"
      }
    },
    {
      "type": "text",
      "props": {
        "variant": "title",
        "size": "sm",
        "text": "Title Small"
      }
    },
    {
      "type": "text",
      "props": {
        "text": "Body Default – normaler Fliesstext ohne spezielle Formatierung."
      }
    },
    {
      "type": "text",
      "props": {
        "size": "sm",
        "tone": "muted",
        "text": "Small Muted – Untertitel oder Hilfstext."
      }
    },
    {
      "type": "text",
      "props": {
        "size": "xs",
        "tone": "muted",
        "text": "Extra Small Muted – Fussnoten, Meta-Infos."
      }
    }
  ]
}

<Stack gap="sm">
  <Text variant="title" size="lg" text="Title Large" />
  <Text variant="title" size="md" text="Title Medium" />
  <Text variant="title" size="sm" text="Title Small" />
  <Text text="Body Default – normaler Fliesstext ohne spezielle Formatierung." />
  <Text size="sm" tone="muted" text="Small Muted – Untertitel oder Hilfstext." />
  <Text size="xs" tone="muted" text="Extra Small Muted – Fussnoten, Meta-Infos." />
</Stack>

Tones

Farbliche Abstufungen.

Default

Muted

Primary

Accent

Error

Success

{
  "type": "row",
  "props": {
    "gap": "md",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "text",
      "props": {
        "text": "Default",
        "tone": "default"
      }
    },
    {
      "type": "text",
      "props": {
        "text": "Muted",
        "tone": "muted"
      }
    },
    {
      "type": "text",
      "props": {
        "text": "Primary",
        "tone": "primary"
      }
    },
    {
      "type": "text",
      "props": {
        "text": "Accent",
        "tone": "accent"
      }
    },
    {
      "type": "text",
      "props": {
        "text": "Error",
        "tone": "error"
      }
    },
    {
      "type": "text",
      "props": {
        "text": "Success",
        "tone": "success"
      }
    }
  ]
}

<Row gap="md" align="center" wrap>
  <Text text="Default" tone="default" />
  <Text text="Muted" tone="muted" />
  <Text text="Primary" tone="primary" />
  <Text text="Accent" tone="accent" />
  <Text text="Error" tone="error" />
  <Text text="Success" tone="success" />
</Row>