Astra UI

Getting Started

Components

Text

The Text component provides a simple way to display text with different styles and sizes. It's useful for headings, labels, and general text content.

Preview

Hello, world.

Variations

Heading 1 Heading 2 Heading 3 Heading 4 Label

Basic Usage

To use the Astra Text component, add the <astra-text> tag to your HTML: 

<astra-text>Default text</astra-text>

Variants

Choose from different text styles using the variant attribute: 

<astra-text variant="h1">Heading 1</astra-text>
<astra-text variant="h2">Heading 2</astra-text>
<astra-text variant="h3">Heading 3</astra-text>
<astra-text variant="h4">Heading 4</astra-text>
<astra-text variant="label">Label</astra-text>

Why Use Astra Text?

  • Consistency: Ensures uniform text styles across your application.
  • Simplicity: Easy to use with minimal setup.
  • Flexibility: Multiple variants for different text needs.
  • Responsive: Automatically adapts to light and dark color schemes.

Accessibility

The Astra Text component is designed with accessibility in mind:

  • It uses semantic HTML elements (label) for better screen reader support.
  • Color contrast ratios are maintained for readability in both light and dark modes.
  • Font sizes and weights are chosen for optimal legibility.

Fast Travel