Skip to content
On this page

Text

Text functions as freetext which has all typography styles

Usage

Used for the title of any sub-sections

Basic Usage

Default style of Text is a body text

The quick brown fox jumps over the lazy dog.preview
vue
<template>
  <p-text>The quick brown fox jumps over the lazy dog.</p-text>
</template>

You can add href prop to make permalink.

vue
<template>
  <p-text href="https://privy.id">This should be a hyperlink</p-text>
</template>

Variant

Text have 7 style variant, there are heading, subheading, body, button, caption, formlabel and overline.

Heading

Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6preview
vue
<template>
  <p-text variant="h1">Heading 1</p-text>
  <p-text variant="h2">Heading 2</p-text>
  <p-text variant="h3">Heading 3</p-text>
  <p-text variant="h4">Heading 4</p-text>
  <p-text variant="h5">Heading 5</p-text>
  <p-text variant="h6">Heading 6</p-text>
</template>

Subheading

Sub Heading 1Sub Heading 2preview
vue
<template>
  <p-text variant="subheading">Sub Heading 1</p-text>
  <p-text variant="subheading2">Sub Heading 2</p-text>
</template>

Body

Body text 1Body text 2
  • Body list 1
  • Body list 2
Hyperlink (text)Hyperlink (subtext)preview
vue
<template>
  <p-text variant="body">Body text 1</p-text>
  <p-text variant="body2">Body text 2</p-text>
  <ul>
    <li><p-text variant="body">Body list 1</p-text></li>
  </ul>
  <ul>
    <li><p-text variant="body2">Body list 2</p-text></li>
  </ul>
  <p-text variant="body" href="#">Hyperlink (text)</p-text>
  <p-text variant="body2" href="#">Hyperlink (subtext)</p-text>
</template>

Button

button 1button 2button Link 1button Link 2preview
vue
<template>
  <p-text variant="btn">button 1</p-text>
  <p-text variant="btn2">button 2</p-text>
  <p-text variant="btn" href="#">button Link 1</p-text>
  <p-text variant="btn2" href="#">button Link 2</p-text>
</template>

Caption

CaptionCaption 2 (known as small text)Hyperlink (caption)Hyperlink (caption 2)preview
vue
<template>
  <p-text variant="caption">Caption</p-text>
  <p-text variant="caption2">Caption 2 (known as small text)</p-text>
  <p-text variant="caption" href="#">Hyperlink (caption)</p-text>
  <p-text variant="caption2" href="#">Hyperlink (caption 2)</p-text>
</template>

Form Label

Form Label 1Form Label 2preview
vue
<template>
  <p-text variant="formlabel">Form Label 1</p-text>
  <p-text variant="formlabel2">Form Label 2</p-text>
</template>

Overline

Overlinepreview
vue
<template>
  <p-text variant="overline">Overline</p-text>
</template>

API

Props

PropsTypeDefaultDescription
variantStringbodyText variant, valid value is heading, subheading, body, button, caption, formlabel and overline
hrefString-Provide hyperlink in the text
weightStringnormalProvide font-weight of text, valid value is normal, medium and bold
transformStringnormalcaseProvide font-weight of text, valid value is normalcase, lowercase, capitalize and uppercase

Slots

NameDescription
defaultContent to place in the Text

Released under the MIT License.