Text

A flexible text component for displaying content with various styles and properties.

experimental

---
import Text from '@/components/Text.astro';
---

<Text>Default text</Text>

Sizes

Text components use a numeric scale for sizes, corresponding to specific text styles.

size	description	example	code
1	Tiny Text	Tiny text	<Text size="1">Tiny text</Text>
3	Small Text	Small text	<Text size="3">Small text</Text>
5	Medium Text	Medium text	<Text size="5">Medium text</Text>
7	Large Text	Large text	<Text size="7">Large text</Text>
9	Extra Large Text	Extra large text	<Text size="9">Extra large text</Text>

Note: Sizes 2, 4, 6, and 8 are also available for more fine-grained control.

Weights

Text components support different font weights.

weight	description	example	code
light	Light Weight	Light text	<Text weight="light">Light text</Text>
regular	Regular Weight	Regular text	<Text weight="regular">Regular text</Text>
medium	Medium Weight	Medium text	<Text weight="medium">Medium text</Text>
bold	Bold Weight	Bold text	<Text weight="bold">Bold text</Text>

Alignment

Text can be aligned in different ways.

align	description	example	code
left	Left Aligned	Left aligned text	<Text align="left">Left aligned text</Text>
center	Center Aligned	Center aligned text	<Text align="center">Center aligned text</Text>
right	Right Aligned	Right aligned text	<Text align="right">Right aligned text</Text>

Colors

Text components support different colors based on the theme’s color system.

color	description	example	code
gray	Gray Color	Gray text	<Text color="gray">Gray text</Text>
blue	Blue Color	Blue text	<Text color="blue">Blue text</Text>
red	Red Color	Red text	<Text color="red">Red text</Text>
green	Green Color	Green text	<Text color="green">Green text</Text>

Note: All color options from the theme are available.

Text components support different colors based on the theme’s color system.Text components support different colors based on the theme’s color system.

Trimming

Text can be trimmed to remove leading or trailing line height.

trim	description	example	code
normal	No Trim	Normal text	<Text trim="normal">Normal text</Text>
start	Trim Start	Trimmed start	<Text trim="start">Trimmed start</Text>
end	Trim End	Trimmed end	<Text trim="end">Trimmed end</Text>
both	Trim Both	Trimmed both	<Text trim="both">Trimmed both</Text>

Other Properties

• truncate: Truncates text with an ellipsis if it overflows its container.
• wrap: Controls text wrapping (wrap, nowrap, pretty, balance).
• highContrast: Increases the contrast of the text color.
• as: Renders the text as a different HTML element (span, div, p, label).

Combining Properties

You can combine different properties to create custom text styles:

<Text 
  size="5" 
  weight="bold" 
  color="blue" 
  align="center" 
  truncate
>
  Custom styled text
</Text>

This will create a medium-sized, bold, blue, center-aligned text that truncates if it overflows.

Responsive Properties

Many properties of the Text component can be made responsive:

<Text 
  size={{ base: "3", md: "5", lg: "7" }}
  align={{ base: "left", md: "center" }}
>
  Responsive text
</Text>

This text will change size and alignment based on the viewport size.

Margin Properties

Text components support margin properties for spacing:

• m: Margin on all sides
• mx: Horizontal margin
• my: Vertical margin
• mt: Top margin
• mr: Right margin
• mb: Bottom margin
• ml: Left margin

Example:

<Text m="2" mx="4">
  Text with margin
</Text>

This applies a margin of 2 units on all sides, and overrides the horizontal margin to 4 units.