Heading

A component for displaying headings.

Headings provide hierarchy to the content

import { Heading } from 'cwl-ui'
 
export function Default() {
  return <Heading>Headings provide hierarchy to the content</Heading>
}

Examples

With alignment

Heading components can take an align property to align text.

Left aligned

Center aligned

Right aligned

import { Heading } from 'cwl-ui'
 
export function Align() {
  return (
    <div className="w-full space-y-2">
      <Heading align="left">Left aligned</Heading>
      <Heading align="center">Center aligned</Heading>
      <Heading align="right">Right aligned</Heading>
    </div>
  )
}

With color

Heading comes with a color property to change the text color.

Primary

Secondary

Positive

Destructive

import { Heading } from 'cwl-ui'
 
export function Align() {
  return (
    <div className="flex space-x-2">
      <Heading color="primary">Primary</Heading>
      <Heading color="secondary">Secondary</Heading>
      <Heading color="positive">Positive</Heading>
      <Heading color="destructive">Destructive</Heading>
    </div>
  )
}

With sizes

Heading comes in a few different sizes.

Xsmall text

Small text

Standard text

Large text

import { Heading } from 'cwl-ui'
 
export function Sizes() {
  return (
    <div className="space-y-2">
      <Heading size="small">Xsmall text</Heading>
      <Heading size="small">Small text</Heading>
      <Heading size="standard">Standard text</Heading>
      <Heading size="large">Large text</Heading>
    </div>
  )
}

With truncation

Heading can be truncated with an ellipsis.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, eaque eligendi maiores, aperiam et exercitationem possimus quisquam fuga iste qui, voluptate laboriosam ipsa. Iusto, nesciunt. Vel incidunt iure quas voluptate dicta qui alias ea aliquam voluptatum, architecto facilis provident laborum iste commodi tempora labore itaque eligendi corrupti. Accusamus, inventore quaerat?

import { Heading } from 'cwl-ui'
 
export function Color() {
  return (
    <div className="flex flex-col space-y-4">
      <Heading truncate={1}>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, eaque eligendi
        maiores, aperiam et exercitationem possimus quisquam fuga iste qui, voluptate laboriosam
        ipsa. Iusto, nesciunt. Vel incidunt iure quas voluptate dicta qui alias ea aliquam
        voluptatum, architecto facilis provident laborum iste commodi tempora labore itaque eligendi
        corrupti. Accusamus, inventore quaerat?
      </Heading>
      <Heading truncate={2}>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, eaque eligendi
        maiores, aperiam et exercitationem possimus quisquam fuga iste qui, voluptate laboriosam
        ipsa. Iusto, nesciunt. Vel incidunt iure quas voluptate dicta qui alias ea aliquam
        voluptatum, architecto facilis provident laborum iste commodi tempora labore itaque eligendi
        corrupti. Accusamus, inventore quaerat?
      </Heading>
      <Heading truncate={3}>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, eaque eligendi
        maiores, aperiam et exercitationem possimus quisquam fuga iste qui, voluptate laboriosam
        ipsa. Iusto, nesciunt. Vel incidunt iure quas voluptate dicta qui alias ea aliquam
        voluptatum, architecto facilis provident laborum iste commodi tempora labore itaque eligendi
        corrupti. Accusamus, inventore quaerat?
      </Heading>
    </div>
  )
}

Installation

To install, copy the code below and paste into your project.

import { type HeadingProperties } from './lib/types'
import { cn } from './lib/utils'
 
const Heading = ({
  children,
  color,
  Tag = 'h1',
  align,
  className,
  size,
  truncate,
  ...props
}: HeadingProperties) => {
  return (
    <Tag
      className={cn(
        size === 'small' && 'text-lg font-normal leading-7',
        size === 'standard' && 'text-2xl font-normal leading-8',
        size === 'large' && 'text-3xl font-normal leading-9',
        align === 'left' && 'text-left',
        align === 'center' && 'text-center',
        align === 'right' && 'text-right',
        color === 'primary' && 'text-primary',
        color === 'secondary' && 'text-secondary',
        color === 'positive' && 'text-positive',
        color === 'destructive' && 'text-destructive',
        truncate === 1 && 'line-clamp-1',
        truncate === 2 && 'line-clamp-2',
        truncate === 3 && 'line-clamp-3',
        className,
      )}
      {...props}
    >
      {children}
    </Tag>
  )
}
 
export { Heading }