Section Header

<tpg-section-header></tpg-section-header>

Section Headers are used to provide a description of the functionality of a group of similar components. They take the form of three variants, that are used in the following settings:

• list-header: used in the Navigation List, where they describe the content of a Logic Group of List Items

• menu-header: used in Menu Lists, where they describe the content of a Logic Group of Menus

• form-header: used in Form Fields, where they describe the content of a Logic Group of Form components

Examples

Default headers

Component

Vanilla JS

  <div style="display:flex; flex-direction: column; padding: 4rem; width: 100%">
      <tpg-section-header
        label='form header'
        header-type='form-header'
      ></tpg-section-header>
      <tpg-section-header
        label='menu header'
        header-type='menu-header'
      ></tpg-section-header>
      <tpg-section-header
        label='list header'
        header-type='list-header'
      ></tpg-section-header>
  </div>

React

    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: "4rem",
        width: "100%",
      }}
    >
      <tpg-section-header
        label="form header"
        headerType="form-header"
      ></tpg-section-header>
      <tpg-section-header
        label="menu header"
        headerType="menu-header"
      ></tpg-section-header>
      <tpg-section-header
        label="list header"
        headerType="list-header"
      ></tpg-section-header>
    </div>

Badges and icon

All section headers can optionally contain an icon, a leading badge and/or a trailing badge, using the named slots “leading-badge” and “trailing-badge”:

Component

Vanilla JS

      <tpg-section-header
        label='form header | leading badge'
        header-type='form-header'
        class="has-color-lens-icon"
      >
        <tpg-badge size="xs" label="Leading" slot="leading-badge"></tpg-badge>
      </tpg-section-header>


      <tpg-section-header
        label='menu header | trailing badge'
        header-type='menu-header'
        class="has-color-lens-icon"
      >
        <tpg-badge
          size="xs"
          label="Trailing"
          slot="trailing-badge"
        ></tpg-badge>
      </tpg-section-header>


      <tpg-section-header
        label='list header | leading & trailing badge'
        header-type='list-header'
        class="has-color-lens-icon"
      >
        <tpg-badge size="xs"
          label="Leading"
          slot="leading-badge"
        ></tpg-badge>
        <tpg-badge
          size="xs"
          label="Trailing"
          slot="trailing-badge"
        ></tpg-badge>
      </tpg-section-header>


      <script>
          // Adds placeholder icons
          const elements = document.querySelectorAll(
              'tpg-section-header.has-color-lens-icon'
          );
          for (const elem of elements)  {
            const header = elem as SectionHeader;
            header.iconTemplate = tpgIconColorLens;
          }
      </script>

React

      import {
        tpgIconColorLens,
      } from "@tpg/grammar-web-icons";

      ...

      <tpg-section-header
        label="form header | leading badge"
        headerType="form-header"
        iconTemplate={tpgIconColorLens}
      >
        <tpg-badge size="xs" label="Leading" slot="leading-badge"></tpg-badge>
      </tpg-section-header>

      <tpg-section-header
        label="menu header | trailing badge"
        headerType="menu-header"
        iconTemplate={tpgIconColorLens}
      >
        <tpg-badge
          size="xs"
          label="Trailing"
          slot="trailing-badge"
        ></tpg-badge>
      </tpg-section-header>

      <tpg-section-header
        label="list header | leading & trailing badge"
        headerType="list-header"
        iconTemplate={tpgIconColorLens}
      >
        <tpg-badge size="xs" label="Leading" slot="leading-badge"></tpg-badge>
        <tpg-badge
          size="xs"
          label="Trailing"
          slot="trailing-badge"
        ></tpg-badge>
      </tpg-section-header>

Tables

Properties

Attribute	Property	Description	Type	Default Value
header-type	headerType	Propert to set the desired header type.	'form-header' | 'menu-header' | 'list-header'	'form-header'
type	type	The type of textfield to render in terms of severity-level.	'default' | 'error' | 'warning' | 'danger'	'default'
icon-template	iconTemplate	URI-encoded SVG template for the section header's icon. Supported constants are found in	IconConstant | ''	''
label	label	Textual label of the header.	string	''

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
leading-badge	Slot reserved for the leading badge
trailing-badge	Slot reserved for the trailing badge

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox