Text

Name: PXD UI Component Library
Author: libondev

Display text using well-defined typographic styles.

Default

The Evil Rabbit jumps.

<template>
  <PStack direction="vertical">
    <PText :size="48">The Evil Rabbit jumps.</PText>
    <PText :size="32">The Evil Rabbit jumps.</PText>
    <PText :size="24">The Evil Rabbit jumps.</PText>
    <PText :size="20">The Evil Rabbit jumps.</PText>
    <PText :size="16">The Evil Rabbit jumps.</PText>
    <PText :size="14">The Evil Rabbit jumps.</PText>
    <PText :size="12">The Evil Rabbit jumps.</PText>
  </PStack>
</template>

Responsive

The Evil Rabbit jumps.

<template>
  <PText :size="{ sm: 24, md: 32, lg: 48 }">The Evil Rabbit jumps.</PText>
</template>

Secondary

The Evil Rabbit jumps.

<template>
  <PText secondary>The Evil Rabbit jumps.</PText>
</template>

Align

The Evil Rabbit jumps.

<template>
  <PText align="left">The Evil Rabbit jumps.</PText>
  <PText align="center">The Evil Rabbit jumps.</PText>
  <PText align="right">The Evil Rabbit jumps.</PText>
</template>

Monospace

This is a sans-serif font.

This is a monospace font.

<template>
  <PText>This is a sans-serif font.</PText>
  <PText monospace>This is a monospace font.</PText>
</template>

Props

Name	Type	Default	Description
as	`string \| object`	`p`	Tag or component rendered as the root element
text	`string`	-	Text content, also used as the `title` attribute
size	`string \| Responsive \| number`	-	Font size in `px`, or a responsive object keyed by breakpoint
align	`'left' \| 'center' \| 'right'`	`left`	Horizontal text alignment
monospace	`boolean`	-	Render with the monospace font
secondary	`boolean`	-	Render with the secondary foreground color

Slots

Name	Description
default	Default slot