Layout

UiFooter closes a page. UiHeaderContent renders a page header (title, subtitle, optional back button and actions). UiHeroContent is its page-opening counterpart, with a display-sized title and CTA slot. UiSubheadingContent labels a section inside a page. UiPaneContent is a content container with a row/column layout.

Add a page header

<template>
  <UiHeaderContent
    title="Projects"
    subtitle="Manage your team's work"
    back-button
    @back="goBack"
  >
    <template #actions>
      <UiButton variant="filled" color="primary" text="New" />
    </template>
  </UiHeaderContent>
</template>

Wrap content in a pane

<template>
  <UiPaneContent is-full-height aria-label="Project list">
    <!-- content -->
  </UiPaneContent>
</template>

UiHeaderContent props

Emits: back (back button). Slots: #actions — filling it is what renders the actions area; there is no flag to set.

Header CSS variables

UiHeaderContent (.header-container) reads these. The 2xl to 5xl title sizes keep their own size and line height.

Open a page with a hero

size uses the same sm–xl vocabulary as UiHeaderContent, mapped onto the display scale, and align moves the whole block, text and actions together.

<template>
  <UiHeroContent
    headline="Open source"
    title="Build vibrant interfaces"
    subtitle="70+ headless components for Vue 3 and Nuxt."
    size="lg"
    align="center"
  >
    <template #actions>
      <UiButton variant="filled" color="primary" text="Get started" />
      <UiButton variant="outline" text="Documentation" />
    </template>
  </UiHeroContent>
</template>

UiHeroContent props

Slots: #actions for the call-to-action buttons.

Hero CSS variables

UiHeroContent (.hero-content) reads these.

Morph a title across pages

viewTransitionName is the name both pages share, so the browser can pair the two titles. Nothing is emitted when the prop is omitted.

<template>
  <!-- list page -->
  <UiHeaderContent title="Atlas" view-transition-name="project-atlas" />

  <!-- detail page -->
  <UiHeaderContent title="Atlas" view-transition-name="project-atlas" back-button />
</template>

The description derives <name>-description, so one prop covers both lines.

In Nuxt, the transition itself is enabled with experimental.viewTransition in nuxt.config.ts. If the app also sets pageTransition or layoutTransition, the Nuxt docs suggest a global middleware that turns those off where document.startViewTransition exists, so the two do not animate the same navigation.

Label a section

<template>
  <UiSubheadingContent
    title="Integrations"
    subtitle="Connect the tools your team already uses."
  >
    <template #actions>
      <UiBadge text="3 active" variant="outline" size="sm" />
    </template>
  </UiSubheadingContent>
</template>

UiSubheadingContent props

Slots: #actions — a badge or control beside the subheading; the wrapper switches to two columns when it is filled.

Subheading CSS variables

UiSubheadingContent (.subheading-content) reads these.

Close a page with a footer

UiFooter renders the brand block and an optional bottom bar, UiFooterGroup lays out each set of links (stacked by default, or in a row) and UiFooterItem is the link itself.

<template>
  <UiFooter title="Colorffy UI" subtitle="MIT licensed">
    <UiFooterGroup title="Docs">
      <UiFooterItem text="Installation" :as="NuxtLink" to="/install" />
      <UiFooterItem text="Components" :as="NuxtLink" to="/components" />
    </UiFooterGroup>

    <UiFooterGroup title="Social" direction="row">
      <UiFooterItem text="GitHub" href="https://github.com" icon="&#xe86f;" />
    </UiFooterGroup>

    <template #bottom>
      <p>&copy; 2026 Colorffy</p>
      <UiBadge text="v2.5.1" variant="outline" size="sm" />
    </template>
  </UiFooter>
</template>

A row group with a title keeps its heading on its own line and lays the links out beside each other; without a title the whole group is one row, which suits a legal strip. overline renders the heading small and uppercase.

The footer wraps its own content in a .container, so it lines up with the rest of the page without any extra markup. fluid swaps that for .container-fluid, the same way UiNavbar does it.

UiFooter props

Slots: #brand replaces the title/subtitle block, the default slot takes the link groups, and #bottom renders a divided bar under them, split left and right.

UiFooterGroup props

UiFooterItem props

Footer CSS variables

Set these on :root or on a wrapper. Row groups (row on UiFooterGroup) keep their wider gap.

:root {
  --cffy-footer-bg-color: var(--cffy-surface-container-low);
  --cffy-footer-link-hover-color: var(--cffy-accent-a10);
}

UiPaneContent props

Slots: default — the pane content. Exposed: paneContentRef, the <section> element.