Title

The Title component is a section title that provides a microtitle, a main title with highlighted text, an optional description, and an optional offer pill. It is used to introduce various sections of the application in a visually appealing and consistent way.

Props

Prop	Type	Description
microtitle	string	A small heading above the main title, often used to categorize the section.
titleWhite	string	The main title text, displayed in a standard color.
titleGray	string	Secondary part of the title, displayed in a lighter color to create contrast with titleWhite.
hasDescription	boolean	Controls whether the description text is displayed.
description	string	Description text providing additional information about the section; shown if hasDescription is true.
offerPill	boolean	Controls whether the OfferPill component is displayed.
offerPillContent	string	Text to display within the OfferPill component, typically a promotional offer.

Dependencies

• Internal Components:

  • OfferPill: A pill-shaped component that displays a promotional offer, only visible if offerPill is set to true.

Key Style Classes

• Responsive Text Sizes:

  • text-3xl sm:text-4xl md:text-5xl: Configures the title to scale based on screen size for readability.

  • text-center: Centers the text within the component.

• Optional Elements:

  • hasDescription: Toggles a description with responsive width settings to ensure readability on different screens.

  • offerPill: Conditionally renders OfferPill based on promotional needs.

Usage Example

// Example usage of Title component within a section header
<Title
  microtitle="Features"
  titleWhite="Amazing"
  titleGray="Application"
  hasDescription={true}
  description="This application offers fantastic features that you'll love."
  offerPill={true}
  offerPillContent="50% off launch offer"
/>

Additional Notes

• Microtitle Styling: Displays the microtitle in text-emerald-500 for visual emphasis.

• Dynamic Display: The hasDescription and offerPill props allow for flexible inclusion or exclusion of description text and promotional pills.

• OfferPill Customization: The OfferPill component content can be tailored to fit specific promotional messages, enhancing the section’s call-to-action.

---

This documentation provides a comprehensive overview for the Title component.