Heading

The heading is used to create various levels of typographic hierarchies.

import { Heading } from '@backyard-ui/core';

Use the size prop to increase the visual size.

Use the color prop to change the visual color.

Use the noOfLines prop to truncate the heading with a specific number of lines.

To override the element that gets rendered, use the asChild.

• color
  Description The CSS `color` property

  Type

  "inherit" | "black" | "white" | "current" | "transparent" | "product-facebook" | "product-google" | "product-linkedin" | "product-pinterest" | "product-twitter" | "product-youtube" | ... 145 more ...

  Default

  black
• children required
  Description The heading children

  Type

  ReactNode
• asChild
  Description Change the component to the HTML tag or custom component of the only child

  Type

  boolean
• align
  Description The CSS `text-align` property

  Type

  "center" | "right" | "left" | "start" | "end" | "justify"
• transform
  Description The CSS `text-transform` property

  Type

  "none" | "uppercase" | "lowercase" | "capitalize"
• size
  Description The heading size

  Type

  "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"

  Default

  xl
• noOfLines
  Description The CSS `line-clamp` property

  Type

  number
• isItalic
  Description The CSS `font-style` property

  Type

  boolean

  Default

  false