HighRise
RTL Support: Full
Accessibility: Full
Translations: Not Needed
Migration Guide: Work in progress

Header Lite ​

The Header Lite component is a lightweight, versatile header component that provides a clean and organized way to display header content with various customization options.

Basic Usage ​

At its simplest, pass a title and subtitle. Everything else is optional and slots into a fixed layout:

  • title / subtitle props — the main heading and the line beneath it, shown on the left.
  • header-icons slot — icon(s) shown to the left of the title (e.g. a section or status icon).
  • header-title-extra-content slot — content shown inline, right after the title (e.g. a tag or small icons).
  • header-content-right slot — actions aligned to the right (buttons, menus). Group them with HLHeaderLiteItem.
  • closable prop — shows a close button at the far right that emits @update:close when clicked.

INFO

The colored boxes in the example below are only there to highlight where each slot renders — they are not part of the component. In real usage you'd drop the wrapping <div>s and place your content directly in each slot.

Page Title

Label
55.55K

Page description

vue
<template>
  <HLHeaderLite
    id="header-lite-usage-example"
    title="Page Title"
    subtitle="Page description"
    size="md"
    :closable="true"
    @update:close="handleClose"
  >
    <!-- Header icons -->
    <template #header-icons>
      <div style="background-color: rgba(147, 196, 253, 0.9); padding: 4px 8px; border-radius: 4px;">
        <HLIcon>
          <InfoCircleIcon />
        </HLIcon>
      </div>
    </template>
    <template #header-title-extra-content>
      <div
        style="background-color: rgba(167, 243, 208, 0.88); padding: 4px 8px; border-radius: 4px; display: flex; gap: 8px; align-items: center;"
      >
        <HLIcon size="16">
          <InfoCircleIcon />
        </HLIcon>
        <HLIcon color="green">
          <CheckCircleIcon />
        </HLIcon>
        <HLTag id="size-md-tag" size="xs" :count="55555" :bordered="false" color="green"> Label </HLTag>
      </div>
    </template>
    <template #header-content-right>
      <div
        style="background-color: rgba(251, 191, 36, 0.88); padding: 4px 8px; border-radius: 4px; display: flex; gap: 8px; align-items: center;"
      >
        <HLHeaderLiteItem justify="end" align="center">
          <HLButton id="share-btn" variant="secondary" size="xs" color="gray">
            <template #iconLeft>
              <Share01Icon class="w-3" />
            </template>
            Share
          </HLButton>
          <HLButton id="upload-btn" variant="secondary" size="xs" color="gray">
            <template #iconLeft>
              <UploadCloud01Icon class="w-3" />
            </template>
            Upload
          </HLButton>
        </HLHeaderLiteItem>
      </div>
    </template>
  </HLHeaderLite>
</template>

<script setup lang="ts">
  import { HLHeaderLite, HLHeaderLiteItem, HLButton, HLTag, HLIcon } from '@platform-ui/highrise'
  import { Share01Icon, UploadCloud01Icon, InfoCircleIcon, CheckCircleIcon } from '@gohighlevel/ghl-icons/24/outline'

  const handleClose = () => {
    console.log('close')
  }
</script>

Sizes ​

Use size to scale the header. It affects the title and subtitle text, the icon sizes, and the close button — sm (default), md, and lg.

WARNING

  • size only accepts 'sm', 'md', and 'lg'. Values like 'xs' or '2xl' are not valid and fall back to 'sm'.
  • A class or style applied directly on <HLHeaderLite> will not reach the DOM — stray attributes are not forwarded to its root element. To add outer spacing (e.g. in a drawer), style the wrapping panel/HLDrawerContent instead.

Small Header

size = sm

Medium Header

size = md

Large Header

size = lg

vue
<template>
  <HLHeaderLite size="sm" title="Small Header" subtitle="size = sm" :closable="true">
    <template #header-icons>
      <HLIcon><InfoCircleIcon /></HLIcon>
    </template>
  </HLHeaderLite>

  <HLHeaderLite size="md" title="Medium Header" subtitle="size = md" :closable="true">
    <template #header-icons>
      <HLIcon><InfoCircleIcon /></HLIcon>
    </template>
  </HLHeaderLite>

  <HLHeaderLite size="lg" title="Large Header" subtitle="size = lg" :closable="true">
    <template #header-icons>
      <HLIcon><InfoCircleIcon /></HLIcon>
    </template>
  </HLHeaderLite>
</template>

<script setup lang="ts">
  import { HLHeaderLite, HLIcon } from '@platform-ui/highrise'
  import { InfoCircleIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Header with Image ​

The header-icons slot supports both icon components and images.

Logo

Header with Image

vue
<template>
  <HLHeaderLite title="Header with Image" size="md">
    <template #header-icons>
      <!-- Image example - set the size explicitly to match the header size (20px for size="md") -->
      <img src="/logo.png" alt="Logo" style="width: 20px; height: 20px; border-radius: 4px;" />
      <!-- Icon example -->
      <HLIcon>
        <InfoCircleIcon />
      </HLIcon>
    </template>
  </HLHeaderLite>
</template>

<script setup lang="ts">
  import { HLHeaderLite, HLIcon } from '@platform-ui/highrise'
  import { InfoCircleIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Custom Title ​

Customize title and subtitle using header-title and header-subtitle slots

Custom Title

Custom Subtitle

vue
<template>
  <HLHeaderLite size="md">
    <template #header-title>
      <HLText size="2xl" weight="semibold" class="text-gray-900"> Custom Title </HLText>
    </template>
    <template #header-subtitle>
      <HLText size="2xs" weight="semibold" class="text-gray-400"> Custom Subtitle </HLText>
    </template>
    <template #header-title-extra-content>
      <HLIcon size="16">
        <InfoCircleIcon />
      </HLIcon>
      <HLIcon color="green">
        <CheckCircleIcon />
      </HLIcon>
    </template>
  </HLHeaderLite>
</template>

<script setup lang="ts">
  import { HLHeaderLite, HLIcon, HLText } from '@platform-ui/highrise'
  import { InfoCircleIcon, CheckCircleIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Use in a Modal or Drawer ​

HeaderLite is a natural fit for the header of a modal or drawer. Use it when you want a custom panel header (extra actions, a status tag, custom icons) beyond the plain title the panel provides by default.

INFO

When used as a panel header, match the panel's scale: use lg in a drawer (the drawer's built-in header uses lg) and md in a modal.

In a Modal ​

Put HeaderLite in the modal's #header slot. Steps:

  • Keep the modal's header region on with :show-header="true", and render HLHeaderLite in the #header slot (use size="md" to match the modal).
  • Set :show-close="false" on the modal to avoid showing the modal's default close button alongside HeaderLite's close button.
  • Wire @update:close on HeaderLite to show = false.
vue
<template>
  <HLButton size="sm" variant="primary" color="blue" @click="show = true">Open Modal</HLButton>

  <!-- show-close="false" hides the modal's own close button so HeaderLite's is the only one -->
  <HLModal id="profile-modal" v-model:show="show" :show-header="true" :show-close="false" :width="480">
    <!-- Replace the modal's built-in header with HeaderLite -->
    <template #header>
      <HLHeaderLite
        id="modal-header"
        title="Edit Profile"
        subtitle="Update your account details"
        size="md"
        :closable="true"
        @update:close="show = false"
      >
        <!-- Status tag beside the title -->
        <template #header-title-extra-content>
          <HLTag id="modal-status-tag" size="xs" :bordered="false" color="green">Active</HLTag>
        </template>
        <!-- A header-level action -->
        <template #header-content-right>
          <HLHeaderLiteItem justify="end" align="center">
            <HLButton id="modal-share-btn" variant="secondary" size="xs" color="gray">
              <template #iconLeft><Share01Icon class="w-3" /></template>
              Share
            </HLButton>
          </HLHeaderLiteItem>
        </template>
      </HLHeaderLite>
    </template>

    <div class="p-4">Modal body content goes here.</div>
  </HLModal>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLModal, HLHeaderLite, HLHeaderLiteItem, HLButton, HLTag } from '@platform-ui/highrise'
  import { Share01Icon } from '@gohighlevel/ghl-icons/24/outline'

  const show = ref(false)
</script>

In a Drawer ​

A drawer's content is wrapped in HLDrawerContent, which has its own #header slot — so unlike the modal, the header goes on HLDrawerContent, not on HLDrawer. Steps:

  • Wrap the drawer body in HLDrawerContent, and render HLHeaderLite in its #header slot (use size="lg" to match the drawer). Body content goes in the default slot and gets the drawer's normal padding automatically.
  • Set :show-header="false" on HLDrawerContent — otherwise it renders its own default header alongside yours.
  • Wire @update:close on HeaderLite to show = false.
  • Add header padding. HeaderLite has no outer padding of its own, so a custom header sits tight against the drawer edges. Add it via HLDrawerContent's headerStyle (or headerClass), e.g. :header-style="{ padding: '16px 20px' }".
vue
<template>
  <HLButton size="sm" variant="primary" color="blue" @click="show = true">Open Drawer</HLButton>

  <HLDrawer id="share-drawer" v-model:show="show" :width="420">
    <!-- HLDrawerContent provides the header region + padded body -->
    <!-- show-header="false" stops it from rendering its own default header -->
    <!-- header-style adds padding since HeaderLite has none of its own -->
    <HLDrawerContent id="share-drawer-content" :show-header="false" :header-style="{ padding: '16px 20px' }">
      <!-- The #header slot renders flush at the top, outside the body padding -->
      <template #header>
        <HLHeaderLite
          id="drawer-header"
          title="Share Document"
          subtitle="Choose how to share"
          size="lg"
          :closable="true"
          @update:close="show = false"
        >
          <template #header-content-right>
            <HLHeaderLiteItem justify="end" align="center">
              <HLButton id="drawer-share-btn" variant="secondary" size="xs" color="gray">
                <template #iconLeft><Share01Icon class="w-3" /></template>
                Share
              </HLButton>
            </HLHeaderLiteItem>
          </template>
        </HLHeaderLite>
      </template>

      <!-- Body content goes in the default slot and gets the drawer's normal padding -->
      Drawer body content goes here.
    </HLDrawerContent>
  </HLDrawer>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLDrawer, HLDrawerContent, HLHeaderLite, HLHeaderLiteItem, HLButton, HLText } from '@platform-ui/highrise'
  import { Share01Icon } from '@gohighlevel/ghl-icons/24/outline'

  const show = ref(false)
</script>

INFO

HLDrawerContent already renders an HLHeaderLite for its default header. If you only need a title, subtitle, and close button, set its title / description / closable props instead of building the header yourself — reach for the #header slot only when you need custom actions or content, as shown above.

Accessibility ​

  • Reference the header title id with aria-labelledby so attached controls or metrics read with the heading.
  • Use aria-describedby to connect summary text (counts, status chips) that lives outside the main heading node.

Imports ​

ts
import { HLHeaderLite, HLHeaderLiteItem } from '@platform-ui/highrise'

Props ​

HeaderLite ​

NameTypeDefaultDescription
idstring | undefinedundefinedThe id of the header. When omitted, an auto-generated id is used
titlestring''The main title text
subtitlestring''The subtitle text displayed below the title
closablebooleantrueWhether to show the close button
size'sm' | 'md' | 'lg''sm'Controls the overall size of the header

HeaderLiteItem ​

NameTypeDefaultDescription
idstring | undefined''The id of the header item
justify'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly''end'The alignment of the content
align'start' | 'end' | 'center' | 'baseline' | 'stretch''end'The alignment of the content
size'sm' | 'md' | 'lg'inherits header sizeGap between items. When omitted, inherits the parent HeaderLite's size (falling back to 'sm')
disabledbooleanfalseProvides a disabled state to the item's content via the hr-header-lite-item-disabled inject, so nested controls can react to it
itemClassstring | undefinedundefinedThe class name applied to each item
itemStylestring | Record<string, any> | undefinedundefinedThe style applied to each item

Emits ​

HeaderLite ​

NameParametersDescription
@update:close()Emitted when the close button is clicked

Slots ​

HeaderLite ​

NameParametersDescription
header-title()The slot for header title
header-subtitle()The slot for header subtitle
header-icons()The slot for header icons. Supports both icon components and images. Images will be automatically sized based on header size
header-title-extra-content()The slot for header title extra content
header-content-right()The slot for header content right

HeaderLiteItem ​

NameParametersDescription
default()The default slot