Components

ContentPageHeader

The content page header component that displays the title, overtitle, and description of a page, with customizable styles and optional navigation features. It is useful for content pages.

CompactHeader

ContentPageHeader

Component

View code

Show playground

Your page title

This is a description for the content page header.

Props

Props	Default	Type
`type`	`PageTitleType.SIMPLE`	`PageTitleType`
`overtitle`	—	`string`
`isOverTitleUppercase`	`false`	`boolean`
`overtitleClass`	—	`string`
`titleClass`	—	`string`
`showDescription`	`true`	`boolean`
`description`	—	`string`
`hasGoBackLink`	—	`boolean`
`goBackText`	`'Go back'`	`string`
`goBackLink`	—	`string`
`hasSeparator`	`true`	`boolean`
`hasSidePadding`	`true`	`boolean`

Slots

Name	Description
`top`	Slot to insert custom content at the top of the header.
`bottom`	Slot to insert custom content at the bottom of the header.

 <template>
    <ContentPageHeader>
        <template #top>
            <!-- Custom content at the top of the header -->
        </template>
        <template #bottom>
            <!-- Custom content at the bottom of the header -->
        </template>
    </ContentPageHeader>
</template>

Usage

type

The compact header component uses useHead under the hood to set the page title based on the selected format as a fallback.

By using the PageTitleType enum, you can choose between the available types for the page title.

 <template>
    <ContentPageHeader
        :type="PageTitleType.WITH_OVERTITLE"
    />
</template>

Type: PageTitleType
Default: PageTitleType.SIMPLE

Options

Value	Description
`SIMPLE`	Sets the page header without an overtitle nor breadcrumbs.
`WITH_OVERTITLE`	Sets the page header to include an overtitle above the page title.
`WITH_BREADCRUMBS`	Sets the page header to include breadcrumbs above the page title.

overtitle

The overtitle prop allows you to set an overtitle text that appears above the main title in the header component.

 <template>
    <ContentPageHeader
        overtitle="Section"
    />
</template>

Type: string

isOverTitleUppercase

The isOverTitleUppercase prop allows you to control whether the overtitle text is displayed in uppercase letters.

 <template>
    <ContentPageHeader
        overtitle="Section"
        :isOverTitleUppercase="true"
    />
</template>

Type: boolean
Default: false

overtitleClass

The overtitleClass prop allows you to add custom CSS classes to the overtitle element for additional styling.

 <template>
    <ContentPageHeader
        overtitle="Section"
        overtitleClass="custom-overtitle-class"
    />
</template>

Type: string

titleClass

The titleClass prop allows you to add custom CSS classes to the title element for additional styling.

 <template>
    <ContentPageHeader
        title="Main Title"
        titleClass="custom-title-class"
    />
</template>

Type: string

showDescription

The showDescription prop allows you to toggle the visibility of the description text in the header component.

 <template>
    <ContentPageHeader
        :showDescription="false"
    />
</template>

Type: boolean
Default: true

description

The description prop allows you to set a description text that appears below the main title in the header component.

 <template>
    <ContentPageHeader
        description="This is a description for the content page header."
    />
</template>

Type: string

hasGoBackLink

The hasGoBackLink prop allows you to enable or disable the "Go back" link in the header component.

 <template>
    <ContentPageHeader
        :hasGoBackLink="true"
    />
</template>

Type: boolean
Default: false

goBackText

The goBackText prop allows you to customize the text displayed for the "Go back" link in the header component.

 
<template>
    <ContentPageHeader
        :hasGoBackLink="true"
        goBackText="Return to previous page"
    />
</template>

Type: string
Default: 'Go back'

goBackLink

The goBackLink prop allows you to set the URL for the "Go back" link in the header component.

 <template>
    <ContentPageHeader
        :hasGoBackLink="true"
        goBackLink="/previous-page"
    />
</template>

Type: string

hasSeparator

The hasSeparator prop allows you to toggle the visibility of a separator line below the header component.

 <template>
    <ContentPageHeader
        :hasSeparator="false"
    />
</template>

Type: boolean
Default: true

hasSidePadding

The hasSidePadding prop allows you to enable or disable side padding for the header component.

 <template>
    <ContentPageHeader
        :hasSidePadding="false"
    />
</template>

Type: boolean
Default: true