Usage

import { Text } from '@pillar-ui/core'

<Text />

Examples

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

Hello World

import { Text } from '@pillar-ui/core'

export const TextSize = () => {
  return (
    <>
      <Text size="1">Hello World</Text>
      <Text size="2">Hello World</Text>
      <Text size="3">Hello World</Text>
      <Text size="4">Hello World</Text>
      <Text size="5">Hello World</Text>
      <Text size="6">Hello World</Text>
      <Text size="7">Hello World</Text>
      <Text size="8">Hello World</Text>
      <Text size="9">Hello World</Text>
    </>
  )
}

Weight

Hello World

import { Text } from '@pillar-ui/core'

export const TextWeight = () => {
  return (
    <>
      <Text weight="1">Hello World</Text>
      <Text weight="2">Hello World</Text>
      <Text weight="3">Hello World</Text>
      <Text weight="4">Hello World</Text>
      <Text weight="5">Hello World</Text>
      <Text weight="6">Hello World</Text>
      <Text weight="7">Hello World</Text>
      <Text weight="8">Hello World</Text>
      <Text weight="9">Hello World</Text>
    </>
  )
}

Truncate

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis id hic quo mollitia eos officia natus autem pariatur deleniti, maxime ea dolorum nisi sequi sed laudantium, necessitatibus exercitationem dicta perferendis. Adipisci magnam obcaecati veniam ea sint sed ex cumque molestiae amet blanditiis! Unde soluta similique, recusandae molestias illum molestiae cumque assumenda necessitatibus vel impedit hic ipsum ullam explicabo dolores sint quaerat distinctio facilis totam nesciunt placeat incidunt quo. Praesentium fuga repellendus, quae suscipit est quidem recusandae quia? Praesentium, ullam laborum repellendus, quae suscipit est quidem recusandae quia? Praesentium, ullam laborum?

import { Text } from '@pillar-ui/core'
const TEXT =
  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis id hic quo mollitia eos officia natus autem pariatur deleniti, maxime ea dolorum nisi sequi sed laudantium, necessitatibus exercitationem dicta perferendis. Adipisci magnam obcaecati veniam ea sint sed ex cumque molestiae amet blanditiis! Unde soluta similique, recusandae molestias illum molestiae cumque assumenda necessitatibus vel impedit hic ipsum ullam explicabo dolores sint quaerat distinctio facilis totam nesciunt placeat incidunt quo. Praesentium fuga repellendus, quae suscipit est quidem recusandae quia? Praesentium, ullam laborum repellendus, quae suscipit est quidem recusandae quia? Praesentium, ullam laborum?'
export const TextTruncate = () => {
  return (
    <>
      <Text truncate="1">{TEXT}</Text>
      <Text truncate="2">{TEXT}</Text>
      <Text truncate="3">{TEXT}</Text>
      <Text truncate="4">{TEXT}</Text>
      <Text truncate="5">{TEXT}</Text>
      <Text>{TEXT}</Text>
    </>
  )
}

Align

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi

import { Text } from '@pillar-ui/core'

const TEXT =
  ' Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi'
export const TextAlign = () => {
  return (
    <>
      <Text align="start">{TEXT}</Text>
      <Text align="center">{TEXT}</Text>
      <Text align="end">{TEXT}</Text>
    </>
  )
}

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

Hello World

import { Text } from '@pillar-ui/core'

export const TextColor = () => {
  return (
    <>
      <Text color="d">Hello World</Text>
      <Text color="su">Hello World</Text>
      <Text color="w">Hello World</Text>
      <Text color="p">Hello World</Text>
      <Text color="b">Hello World</Text>
      <Text color="se">Hello World</Text>
      <Text color="i">Hello World</Text>

      <Text low color="d">
        Hello World
      </Text>
      <Text low color="su">
        Hello World
      </Text>
      <Text low color="w">
        Hello World
      </Text>
      <Text low color="p">
        Hello World
      </Text>
      <Text low color="b">
        Hello World
      </Text>
      <Text low color="se">
        Hello World
      </Text>
      <Text low color="i">
        Hello World
      </Text>
    </>
  )
}

Style

Default

-

Type

'italic' | 'oblique'

Lorem ipsum dolor.

import { Heading } from '@pillar-ui/core'
import React from 'react'

export const TextStyle = () => {
  return (
    <>
      <Heading>Lorem ipsum dolor.</Heading>
      <Heading fontStyle="italic">Lorem ipsum dolor.</Heading>
      <Heading fontStyle="oblique">Lorem ipsum dolor.</Heading>
    </>
  )
}

Decoration

Default

-

Type

'through' | 'under' |'over'

Hello World.

import { Text } from '@pillar-ui/core'
import React from 'react'

export function TextDecoration() {
  return (
    <div className="Sf-4">
      <Text decoration="through">Hello World.</Text>
      <Text decoration="under">Hello World.</Text>
      <Text decoration="over">Hello World.</Text>
    </div>
  )
}

Leading

Default

4

Type

'1' | '2' | '3' | '4' | '5'

This Text has a normal line height For this Text Example Component.

This Text has a small line height For this Text Example Component.

This Text has a medium line height For this Text Example Component.

This Text has a large line height For this Text Example Component.

import { Text } from '@pillar-ui/core'

export const TextLeading = () => {
  return (
    <>
      <Text width="25c" leading="1">
        This Text has a normal line height For this Text Example Component.
      </Text>
      <Text width="25c" leading="2">
        This Text has a small line height For this Text Example Component.
      </Text>
      <Text width="25c" leading="3">
        This Text has a medium line height For this Text Example Component.
      </Text>
      <Text width="25c" leading="4">
        This Text has a large line height For this Text Example Component.
      </Text>
    </>
  )
}

dir For RTL language Support

مُرَاكُش اموراكوش، «أرض الله») تسمى أيضًا بالمدينة الحمراء وعاصمة النخيل، هي ثالث أكبر مدينة في المملكة المغربية من ناحية عدد السكان. وهي عاصمة جهة مراكش آسفي. تقع مراكش على بعد 580 كم (360 ميل) جنوب شرق طنجة، 327 كم (203 ميل) جنوب شرق العاصمة المغربية الرباط، 239 كم (149 ميل) جنوب شرق الدار البيضاء، و 246 كم (153 ميل) شمال شرق أكادير.

ކޯޑް ކުރަން ދަސްކުރުމަކީ އަހަރެންގެ މުޅި އުމުރުގައި ވެސް ކުރި އެންމެ ރަނގަޅު ކަމެކެވެ

import { Text } from '@pillar-ui/core'

export const TextRTL = () => {
  return (
    <>
      <Text dir="rtl">
        مُرَاكُش اموراكوش، «أرض الله») تسمى أيضًا بالمدينة الحمراء وعاصمة النخيل، هي ثالث أكبر مدينة في المملكة المغربية
        من ناحية عدد السكان. وهي عاصمة جهة مراكش آسفي. تقع مراكش على بعد 580 كم (360 ميل) جنوب شرق طنجة، 327 كم (203
        ميل) جنوب شرق العاصمة المغربية الرباط، 239 كم (149 ميل) جنوب شرق الدار البيضاء، و 246 كم (153 ميل) شمال شرق
        أكادير.
      </Text>
      <Text dir="rtl">ކޯޑް ކުރަން ދަސްކުރުމަކީ އަހަރެންގެ މުޅި އުމުރުގައި ވެސް ކުރި އެންމެ ރަނގަޅު ކަމެކެވެ</Text>
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default size of the Typography */
--typography-size:;
/* Change the default text transform of the Typography */
--typography-transform:;