The top of a view: its one h1, with an optional icon or mark before it (leading), a short eyebrow above it, a description under it, and the view's own actions at the end. Every view titles itself the same way, at the same size. align="center" stacks it centred, for a standalone card such as sign-in.

Default

The view's title with an icon before it, a description under it, and the view's actions at the end.

Planning

Roadmaps, decisions, and the reasons behind them.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-page-header/ui-page-header.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-icon/ui-icon.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-button/ui-button.html"
>

<ui-page-header>
  <ui-icon
    slot="leading"
    name="folder"
  ></ui-icon>
  Planning
  <span
    slot="description"
  >Roadmaps, decisions, and the reasons behind them.</span>
  <ui-button
    slot="actions"
    size="sm"
    variant="solid"
  >New page</ui-button>
</ui-page-header>

<script setup>
  import { UiButton, UiIcon, UiPageHeader } from "@threadlabs/looma";
</script>

<template>
  <UiPageHeader> <template #leading>
      <UiIcon
        name="folder"
      />
    </template> Planning <template #description>
      <span>Roadmaps, decisions, and the reasons behind them.</span>
    </template> <template #actions>
      <UiButton
        size="sm"
        variant="solid"
      >New page</UiButton>
    </template> </UiPageHeader>
</template>

import { UiButton, UiIcon, UiPageHeader } from "@threadlabs/looma";

export default function Example() {
  return <UiPageHeader
    slots={{
      leading: <UiIcon
        name="folder"
      />,
      description: <span>Roadmaps, decisions, and the reasons behind them.</span>,
      actions: <UiButton
        size="sm"
        variant="solid"
      >New page</UiButton>,
    }}
  >{" "}{" Planning "}{" "}{" "}</UiPageHeader>;
}

/** @jsxImportSource preact */
import { UiButton, UiIcon, UiPageHeader } from "@threadlabs/looma";

export default function Example() {
  return <UiPageHeader
    slots={{
      leading: <UiIcon
        name="folder"
      />,
      description: <span>Roadmaps, decisions, and the reasons behind them.</span>,
      actions: <UiButton
        size="sm"
        variant="solid"
      >New page</UiButton>,
    }}
  >{" "}{" Planning "}{" "}{" "}</UiPageHeader>;
}

<script>
  import { UiButton, UiIcon, UiPageHeader } from "@threadlabs/looma";
</script>

{#snippet leading()}
  <UiIcon
    name="folder"
  />
{/snippet}

{#snippet description()}
  <span>Roadmaps, decisions, and the reasons behind them.</span>
{/snippet}

{#snippet actions()}
  <UiButton
    size="sm"
    variant="solid"
  >New page</UiButton>
{/snippet}

<UiPageHeader
  slots={{ leading, description, actions }}
>  Planning   </UiPageHeader>

import { Component } from "@angular/core";
import { UiButton, UiIcon, UiPageHeader } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiPageHeader, UiIcon, UiButton],
  template: `
    <header
      ui-page-header
    > <ng-container ngProjectAs="[slot='leading']">
        <span
          ui-icon
          name="folder"
        ></span>
      </ng-container> Planning <ng-container ngProjectAs="[slot='description']">
        <span>Roadmaps, decisions, and the reasons behind them.</span>
      </ng-container> <ng-container ngProjectAs="[slot='actions']">
        <ng-template
          ui-button
          [size]="'sm'"
          [variant]="'solid'"
        >New page</ng-template>
      </ng-container> </header>
  `,
})
export default class Example {}

Centered, with an eyebrow

align="center" for a standalone card, such as sign-in. The eyebrow names what the view belongs to.

Invitation

Join Acme

Ada invited you to edit this site.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-page-header/ui-page-header.html"
>

<ui-page-header
  align="center"
>
  <span
    slot="eyebrow"
  >Invitation</span>
  Join Acme
  <span
    slot="description"
  >Ada invited you to edit this site.</span>
</ui-page-header>

<script setup>
  import { UiPageHeader } from "@threadlabs/looma";
</script>

<template>
  <UiPageHeader
    align="center"
  > <template #eyebrow>
      <span>Invitation</span>
    </template> Join Acme <template #description>
      <span>Ada invited you to edit this site.</span>
    </template> </UiPageHeader>
</template>

import { UiPageHeader } from "@threadlabs/looma";

export default function Example() {
  return <UiPageHeader
    align="center"
    slots={{
      eyebrow: <span>Invitation</span>,
      description: <span>Ada invited you to edit this site.</span>,
    }}
  >{" "}{" Join Acme "}{" "}</UiPageHeader>;
}

/** @jsxImportSource preact */
import { UiPageHeader } from "@threadlabs/looma";

export default function Example() {
  return <UiPageHeader
    align="center"
    slots={{
      eyebrow: <span>Invitation</span>,
      description: <span>Ada invited you to edit this site.</span>,
    }}
  >{" "}{" Join Acme "}{" "}</UiPageHeader>;
}

<script>
  import { UiPageHeader } from "@threadlabs/looma";
</script>

{#snippet eyebrow()}
  <span>Invitation</span>
{/snippet}

{#snippet description()}
  <span>Ada invited you to edit this site.</span>
{/snippet}

<UiPageHeader
  align="center"
  slots={{ eyebrow, description }}
>  Join Acme  </UiPageHeader>

import { Component } from "@angular/core";
import { UiPageHeader } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiPageHeader],
  template: `
    <header
      ui-page-header
      [align]="'center'"
    > <ng-container ngProjectAs="[slot='eyebrow']">
        <span>Invitation</span>
      </ng-container> Join Acme <ng-container ngProjectAs="[slot='description']">
        <span>Ada invited you to edit this site.</span>
      </ng-container> </header>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: header

Attributes

Name	Description	Property	Type	Default	Allowed values
`align`	Where the header sits. start runs along the page's start edge with actions at the end; center stacks everything centred, for a standalone card such as sign-in.	`align`	`keyword`	`start`	`start, center`

Framework props

Name	Type	Default	Allowed values
`align`	`"start" \| "center"`	`start`	`start, center`

Events

No events.

Slots

Name	Purpose
`leading`	Named content for the leading region.
`eyebrow`	Named content for the eyebrow region.
`default`	Default child content.
`description`	Named content for the description region.
`actions`	Named content for the actions region.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

Token	Fallback
`--ui-font-bold`	`700`
`--ui-font-display`	`inherit`
`--ui-font-semibold`	`—`
`--ui-font-size-2xl`	`—`
`--ui-font-size-md`	`—`
`--ui-font-size-xs`	`—`
`--ui-line-height`	`—`
`--ui-line-height-tight`	`—`
`--ui-space-1`	`—`
`--ui-space-2`	`—`
`--ui-space-3`	`—`
`--ui-space-4`	`—`
`--ui-text-muted`	`—`
`--ui-text-primary`	`—`
`--ui-text-secondary`	`—`

Page Header

Code

Code

API

Attributes

Framework props

Events

Slots

Design tokens

Component tokens

Shared tokens