## Feature Examples ### Size - description:

Control the size of a heading with the size prop.

  • extraLarge (heading tag – h1)
  • large (h2)
  • medium (h3)
  • small (h4)
  • tiny (h5)
  • extraTiny (h6)

    • Note: Building a page with proper heading structure is essential for accessibility. If the heading size has a tag that doesn’t fit the structure, it should be overridden using the as prop (see the 'Custom HTML tag' section).

    - example: ```jsx XL - Page Title (e.g., Contact List) L - Modal title (e.g., Create a new contact) M - Card title (e.g., Subscribers) S - Page section title (e.g., Contact info) T - Card section title (e.g., Notes) XT - Caption (e.g., Last activity) ; ``` ### Light - description:

    Invert the skin of a heading with the light prop. Use this skin for headings on backgrounds with colors or images.

    - example: ```jsx XL - Page Title (e.g., Contact List) L - Modal title (e.g., Create a new contact) M - Card title (e.g., Subscribers) S - Page section title (e.g., Contact info) T - Card section title (e.g., Notes) XT - Caption (e.g., Last activity) ; ``` ### Ellipsis - description:

    By default, the header wraps if the text is too long, but can be truncated at the end of a sentence with the ellipsis prop.

    Note: For accessibility, avoid using the ellipsis prop on headings. Keep all heading text visible on the screen at all times.

    - example: ```jsx Create specific audiences with Segments ; ``` ### Children - description:

    Render any kind of component within the tag. This is most commonly used to display an alternative style of text inline with the title.

    - example: ```jsx () => { const renderHeadingWithDifferentColor = () => ( 5 ); return ( Contact List {renderHeadingWithDifferentColor()} ); }; ``` ### Custom HTML tag - description:

    Render the heading as an HTML tag with the as prop.

  • Using

    to
    overrides the default size heading tag. This is useful for creating an accessible page heading structure without changing the design.

  • or can be used when a heading shouldn't be perceived as a title.

    • All attributes will be passed to the rendered HTML tag.

    - example: ```jsx Medium size heading that appears as the main page header h1 ; ``` ## Common Use Case Examples ### Content hierarchy - description:

    Use headings to emphasize main sections of a page and group related content together.

    - example: ```jsx () => { const [address, setAddress] = React.useState(''); const renderProfile = () => { return ( Profile} /> ); }; const renderLocationAndAddress = () => ( <> Location Let customers know where your business is based. You can add one or multiple locations. setAddress(event.target.value)} onClear={() => setAddress('')} /> ); const renderContactInfo = () => ( <> Contact info Add your business details so people can get in touch easily. ); const renderBusinessHours = () => ( <> Business hours Tell customers when your business is open. Everyday 6:00AM - 8:00PM }> Edit ); const renderLocationAndContactInfo = () => { return ( }>Add Location } /> Default info} /> {renderLocationAndAddress()} {renderContactInfo()} {renderBusinessHours()}{' '} ); }; return ( {renderProfile()} {renderLocationAndContactInfo()} ); }; ```