Heading

Used to render semantic HTML heading elements.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ex?

import { Heading } from '@fidely-ui/react/heading'

export const HeadingBasic = () => {
  return (
    <Heading>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, ex?
    </Heading>
  )
}

Usage

import { Heading } from '@fidely-ui/react'

<Heading>Heading text.</Heading>

Examples

As another elements

By default, Fidely UI Heading renders as an h2 element.

Use the as prop to render it as another semantic element (e.g. h1, h3, or p).

As 1

As 2

As 3

As 4

As 5

As 6

import { Heading } from '@fidely-ui/react/heading'

export const HeadingWithAs = () => {
  return (
    <>
      <Heading as="h1">As 1</Heading>
      <Heading as="h2">As 2</Heading>
      <Heading as="h3">As 3</Heading>
      <Heading as="h4">As 4</Heading>
      <Heading as="h5">As 5</Heading>
      <Heading as="h6">As 6</Heading>
    </>
  )
}

Size

Use the size prop to adjust the visual size of the heading without changing its semantic tag. or pass textStyle

Heading 1 with (sm)

Heading with (md)

Heading with (lg)

Heading with (xl)

Heading with (2xl)

Heading with (3xl)

Heading with (4xl)

Heading with (5xl)

Heading with (6xl)

Heading with (7xl)

import { Heading } from '@fidely-ui/react/heading'

export const HeadingSize = () => {
  return (
    <>
      <Heading size={'sm'}>Heading 1 with (sm)</Heading>
      <Heading size={'md'}>Heading with (md)</Heading>
      <Heading size={'lg'}>Heading with (lg)</Heading>
      <Heading size={'xl'}>Heading with (xl)</Heading>
      <Heading size={'2xl'}>Heading with (2xl)</Heading>
      <Heading size={'3xl'}>Heading with (3xl)</Heading>
      <Heading size={'4xl'}>Heading with (4xl)</Heading>
      <Heading size={'5xl'}>Heading with (5xl)</Heading>
      <Heading size={'6xl'}>Heading with (6xl)</Heading>
      <Heading size={'7xl'}>Heading with (7xl)</Heading>
    </>
  )
}