Accessibility: Not Needed

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

Page Title

Label

55.55K

Page description

Vue

<template>
  <HLHeaderLite
    title="Page Title"
    subtitle="Page description"
    size="md"
    :closable="true"
    @update:close="handleClose"
    id="header-lite-usage-example"
  >
    <!-- 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(216, 128, 65, 0.73); padding: 4px 8px; border-radius: 4px; display: flex; gap: 8px; align-items: center;"
      >
        <HLHeaderLiteItem justify="end" align="center">
          <HLButton id="test" variant="secondary" size="xs" color="gray">
            <template #iconLeft>
              <Share01Icon class="w-3" />
            </template>
            Share
          </HLButton>
          <HLButton id="test" 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'
</script>

Header with Image

The header icons slot supports both icon components and images. Here's a live example showing both an image and an icon:

Header with Image

Vue

<template>
<HLHeaderLite title="Header with Image" size="md">
  <template #header-icons>
    <!-- Image example - size to be explicitly set based on header size -->
    <img
      src="https://platform.vox.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/13674554/Mastercard_logo.jpg"
      style="width: 20px; height: 20px;" <!-- For size="md" -->
    />
    <!-- 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

Custom Title

Vue

<template>
  <HLHeaderLite title="Custom Title" size="md">
    <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 } from '@platform-ui/highrise'
  import { InfoCircleIcon, CheckCircleIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Imports

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

Props

HeaderLite

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the header
title	string	''	The main title text
subtitle	string	''	The subtitle text displayed below the title
closable	boolean	true	Whether to show the close button
size	'sm' | md' | 'lg'	'sm'	Controls the overall size of the header

HeaderLiteItem

Name	Type	Default	Description
id *	string | undefined	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'	'end'	The alignment of the content
size	'sm' | 'md' | 'lg'	'sm'	Controls the size of the item
itemClass	string | undefined	undefined	The class name of the item
itemStyle	string | undefined	undefined	The style of the item

Emits

HeaderLite

Name	Parameters	Description
@update:close	()	Emitted when the close button is clicked

Slots

HeaderLite

Name	Parameters	Description
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

Name	Parameters	Description
default	()	The default slot