Headline

Description

The Headline component is a flexible and customizable text element designed for creating various levels of headings in your content. It allows you to easily adjust the heading level, text size, color, and font weight to match your design requirements. This component is ideal for creating consistent and visually appealing headers across your website or application.

Installation

sabaccui add headline

Usage

Here are some examples of how to use the Headline component:

Basic H2 Headline

Large H1 Headline with custom color and weight

Small H3 Headline with secondary color

Schema

• text: The main content of the headline. No restrictions on length or characters.
• level: Determines the HTML heading tag to be used.
  • Options: h1, h2, h3, h4
  • Required field
• size: Controls the text size of the headline.
  • Options: 9xl, 7xl, 5xl, 3xl, xl, lg, sm
  • If not specified, defaults to base text size
• color: Sets the color of the headline text.
  • Options: primary, secondary, dark, light, white, black
  • If not specified, defaults to light
• weight: Determines the font weight of the headline.
  • Options: bold, semibold, light
  • If not specified, uses the default font weight

Notes

1. The component uses dynamic rendering to create the appropriate HTML heading element based on the level prop.
2. Tailwind CSS classes are used for styling, allowing for easy customization and consistency with your design system.
3. The component includes a max-w-prose class to ensure readable line lengths for longer headlines.
4. Text balancing is applied using the text-balance class for improved typography.

Best Practices:

• Use heading levels (h1-h4) consistently and hierarchically for proper document structure and SEO.
• Choose appropriate text sizes to create visual hierarchy in your content.
• Maintain consistent color usage across your site for better user experience and brand cohesion.
• Consider accessibility when selecting text colors, ensuring sufficient contrast with the background.