Content Header

<sl-content-header> | SlContentHeader

Since 3.5.8

stable

ContentHeaders are used to visually start off a page.

My default heading

<sl-content-header>My default heading</sl-content-header>

import SlContentHeader from '@yoummday/ymmd-shoelace/dist/react/content-header';

const App = () => <SlContentHeader />;

Examples

Complex headers

Use the showBackButton property to show a left arrow before the headline.

Insights

<div style="background: var(--sl-color-neutral-50); padding: 2rem;">
	<sl-content-header showBackButton backUrl="/components/content-header/">
		Insights
	</sl-content-header>
</div>

Use the inputs slot to add input fields after the headline, ie. the primary selection of context.

Insights

My best Worktype

<sl-content-header>
	Insights
	<sl-select slot="inputs">
		<sl-option>My best Worktype</sl-option>
	</sl-select>
</sl-content-header>

Use the addons slot to add any further content like some action to open a dialog.

Insights

My best Worktype

Insights

my primary

my button

<div style="background: var(--sl-color-neutral-50); padding: 2rem;">
	<sl-content-header>
		Insights
		<sl-select slot="inputs">
			<sl-option>My best Worktype</sl-option>
		</sl-select>
		<div slot="addons">
			<sl-icon-button name="gear" library="shoelace-default" label="Settings"></sl-icon-button>
			<sl-icon-button name="material-symbols:info-outline-rounded" label="Perfect"></sl-icon-button>
		</div>
	</sl-content-header>
	<br/>
	<br/>
	<sl-content-header>
		Insights
		<div slot="addons" style="display: flex; gap: var(--sl-spacing-2x-small)">
			<sl-button variant="primary">my primary</sl-button>
			<sl-button>my button</sl-button>
		</div>
	</sl-content-header>
</div>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://v3-6-0.yoummday-theme.pages.dev/components/content-header/content-header.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://v3-6-0.yoummday-theme.pages.dev/components/content-header/content-header.js';

To import this component using a bundler:

import '@yoummday/ymmd-shoelace/dist/components/content-header/content-header.js';

To import this component as a React component:

import SlContentHeader from '@yoummday/ymmd-shoelace/dist/react/content-header';

Slots

Name	Description
`default`	The slot for the title/heading.
`inputs`	The slot for potentially available inputs.
`addons`	The slot for any further addons.

Learn more about using slots.

Properties

Name	Description	Type	Default
`showBackButton`	Shows the back button left of the headline if set to true.	`boolean`	`false`
`backUrl`	The url path the sl-navigate-event will emit (optional).	`string`	`''`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`sl-navigate`	`onSlNavigate`	Emitted when the back button gets clicked.	`{ url: string }`

Learn more about events.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>
<sl-icon-button>