Heading

The Heading Component is a versatile user interface (UI) element commonly used in web and application design to display titles, section headers, and other important textual content. It allows developers to create visually appealing and structured content by customizing various aspects of the heading, including text size, font style, color, and alignment.

Components

Heading

Headline

Subhead

Explain more about the topic shown in the headline and subhead through supporting text.

API Reference

Heading

ref

React.ForwardedRef<HTMLDivElement>

React Ref. Object

HeadingAvatar

src

string

Image elemant

fallback

string

An element that renders when the image hasn't loaded.

size

'sm' | 'md' | 'lg'

Size of Avatar.

HeadingHeaders

headline

string

Main headline of header. Tailwind: text-xl

subhead

string

Sub headline of header. Tailwind: text-lg

supporting

string

Explain more about the topic shown in the headline and subhead through supporting text.

Installation

Step 1

Install Dependencies

npm install @radix-ui/react-avatar class-variance-authority

Step 2

Copy and paste code into your project

import { type HTMLAttributes, forwardRef } from "react";
import * as Avatar from "@radix-ui/react-avatar";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../utils";
 
interface HeadingProps extends HTMLAttributes<HTMLDivElement> {}
 
const Heading = forwardRef<HTMLDivElement, HeadingProps>(
  ({ children, className, ...props }, ref) => {
    return (
      <div
        className={cn("flex rounded-lg gap-4 w-full p-3", className)}
        ref={ref}
        {...props}
      >
        {children}
      </div>
    );
  }
);
 
Heading.displayName = "Heading";
 
const headingAvatarVariants = cva(
  "rounded-lg select-none items-center justify-center overflow-hidden flex-none bg-secondary rounded-radius",
  {
    variants: {
      size: {
        sm: "h-[48px] w-[48px]",
        md: "h-[64px] w-[64px]",
        lg: "h-[96px] w-[96px]",
      },
    },
    defaultVariants: {
      size: "md",
    },
  }
);
 
interface HeadingIconAvatar
  extends Avatar.AvatarProps,
    VariantProps<typeof headingAvatarVariants> {
  src?: string;
  fallback: string;
  alt?: string;
}
 
const HeadingAvatar = forwardRef<HTMLDivElement, HeadingIconAvatar>(
  (
    { alt, className, children, asChild, src, fallback, size, ...props },
    ref
  ) => {
    return (
      <Avatar.Root
        className={cn(headingAvatarVariants({ size }), className)}
        ref={ref}
        {...props}
      >
        {asChild ? (
          children
        ) : (
          <Avatar.Image
            alt={alt}
            className="h-full w-full rounded-[inherit] object-cover"
            src={src}
          />
        )}
        <Avatar.Fallback
          className="text-primary leading-1 flex h-full w-full font-medium items-center justify-center rounded-[inherit]"
          delayMs={600}
        >
          {fallback}
        </Avatar.Fallback>
      </Avatar.Root>
    );
  }
);
 
HeadingAvatar.displayName = "Heading.Icon";
 
interface HeadingHeadersProps
  extends HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof headingHeadersVariants> {
  headline: string;
  subhead?: string;
  supporting?: string;
}
 
const headingHeadersVariants = cva("", {
  variants: {
    size: {},
  },
});
 
const HeadingHeaders = forwardRef<HTMLDivElement, HeadingHeadersProps>(
  ({ className, headline, subhead, supporting, ...props }, ref) => {
    return (
      <div
        className={cn("w-full flex flex-col gap-8 flex-wrap grow", className)}
        ref={ref}
        {...props}
      >
        <div className="flex flex-col gap-1 w-full">
          <p className="text-xl font-semibold">{headline}</p>
          {subhead ? <p className="text-lg">{subhead}</p> : null}
        </div>
        {supporting ? <p>{supporting}</p> : null}
      </div>
    );
  }
);
 
HeadingHeaders.displayName = "Heading.Headers";
 
const Root = Heading;
const Icon = HeadingAvatar;
const Headers = HeadingHeaders;
 
export {
  Heading,
  HeadingAvatar,
  HeadingHeaders,
  //
  Root,
  Icon,
  Headers,
};

Step 3

Update imports

Usage

import { Heading, HeadingAvatar, HeadingHeaders } from "@paperplane-ui";

<Heading className="">
  <HeadingAvatar alt="" fallback="" src="" />
  <HeadingHeaders headline="" subhead="" supporting="" />
</Heading>

Badge Page Transitions