Usage

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

<Heading />

Examples

Size

Default

4

Type

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

Hello World

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

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

Weight

Hello World

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

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

Truncate

Default

-

Type

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus! eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus! eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus! eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!

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

export const HeadingTruncate = () => {
  return (
    <>
      <Heading size="9" truncate="1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Heading>
      <Heading size="9" truncate="2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Heading>
      <Heading size="9" truncate="3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Heading>
      <Heading size="9" truncate="4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Heading>

      <Heading size="9" truncate="5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Heading>

      <Heading size="9">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Heading>
    </>
  )
}

Align

Default

-

Type

''start' | 'center' | 'end'

Hello world

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

export const HeadingAlign = () => {
  return (
    <>
      <Heading align="start">Hello world</Heading>
      <Heading align="center">Hello world</Heading>
      <Heading align="end">Hello world</Heading>
    </>
  )
}

Color

Default

p

Type

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

Hello World

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

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

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

Style

Default

-

Type

'italic' | 'oblique'

Lorem ipsum dolor.

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

export const HeadingStyle = () => {
  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 { Heading } from '@pillar-ui/core'
import React from 'react'

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

Leading

Default

4

Type

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

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

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

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

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

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

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

dir RTL language

مُرَاكُش تسمى أيضًا بالمدينة الحمراء وعاصمة النخيل

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

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

export const HeadingRTL = () => {
  return (
    <>
      <Heading dir="rtl">مُرَاكُش تسمى أيضًا بالمدينة الحمراء وعاصمة النخيل</Heading>
      <Heading dir="rtl">ކޯޑް ކުރަން ދަސްކުރުމަކީ އަހަރެންގެ މުޅި އުމުރުގައި ވެސް ކުރި އެންމެ ރަނގަޅު ކަމެކެވެ</Heading>
    </>
  )
}