Move demo page titles, actions and docs links into the layout header (#2867)

2026-08-29 13:21:29 +04:00 · 2026-08-13 01:19:12 +02:00
parent cc298a6c46
commit 118ca4bd00
126 changed files with 331 additions and 436 deletions
@@ -0,0 +1,5 @@
 ---
 "@tabler/preview": patch
 ---
 Fixed heading order by making `CardTitle` and `CardHeader` render `h2`, so cards no longer skip a level under the page `h1`.
@@ -0,0 +1,5 @@
 ---
 "@tabler/preview": minor
 ---
 Updated the demo pages to show their title and description in the page header, with `pageHeader` falling back to `title`.
@@ -0,0 +1,5 @@
 ---
 "@tabler/preview": minor
 ---
 Removed the `actions` preset prop from `DefaultLayout`; pages now fill a `page-header-actions` slot instead.
@@ -0,0 +1,5 @@
 ---
 "@tabler/preview": patch
 ---
 Added a `meta` description tag, filled from the page `description` prop.
@@ -4,12 +4,13 @@ import SingleLayout from '@shared/layouts/SingleLayout.astro'
 import Button from '@ui/Button.astro'
 import ButtonList from '@ui/ButtonList.astro'
 import CaptureScript from '@shared/components/CaptureScript.astro'
 import CardTitle from '@ui/CardTitle.astro'
 ---
 <SingleLayout title="2-Step Verification">
  <form class="card card-md" action="./" method="get" novalidate>
    <div class="card-body">
-      <h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
+      <CardTitle class="card-title-lg text-center mb-4">Authenticate Your Account</CardTitle>
      <p class="my-4 text-center">
        Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
@@ -6,12 +6,13 @@ import SingleLayout from '@shared/layouts/SingleLayout.astro'
 import Button from '@ui/Button.astro'
 import FormGroup from '@ui/FormGroup.astro'
 import flags from '@data/flags.json'
 import CardTitle from '@ui/CardTitle.astro'
 ---
 <SingleLayout title="2-Step Verification">
  <form class="card card-md" action="./2-step-verification-code.html" method="get" novalidate>
    <div class="card-body">
-      <h2 class="card-title text-center mb-4">2-Step Verification</h2>
+      <CardTitle class="text-center mb-4">2-Step Verification</CardTitle>
      <FormGroup label="Country" for="verify-country">
        <select class="form-select" id="verify-country" autocomplete="country-name">
@@ -5,20 +5,11 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
-import Icon from '@ui/Icon.astro'
+import DocsLink from '@ui/DocsLink.astro'
 import { getDocsUrl } from '@shared/lib/string-format'
 import PageTitle from '@ui/PageTitle.astro'
 const accordionDocsUrl = getDocsUrl('/ui/components/accordion')
 ---
 <DefaultLayout title="Accordion" pageMenu="base.accordion" description="Accordions show and hide sections of content, one panel at a time, inside a card.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/accordion" />
    <PageTitle>Accordion</PageTitle>
    <a href={accordionDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-md-6">
@@ -5,7 +5,7 @@ import CardBody from '@ui/CardBody.astro'
 import ActivityPart from '@ui/ActivityPart.astro'
 ---
-<DefaultLayout title="Activity" pageHeader="Activity" pageMenu="extra.activity">
+<DefaultLayout title="Activity" pageMenu="extra.activity">
  <div class="row">
    <div class="col-8">
      <Card>
@@ -5,26 +5,17 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
-import Icon from '@ui/Icon.astro'
+import DocsLink from '@ui/DocsLink.astro'
 import { getDocsUrl } from '@shared/lib/string-format'
 import PageTitle from '@ui/PageTitle.astro'
 const alertDocsUrl = getDocsUrl('/ui/components/alert')
 ---
 <DefaultLayout title="Alerts" pageMenu="base.alerts" description="Alert messages inform users about the status of an action, in success, info, warning, or danger states.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/alert" />
    <PageTitle>Alerts</PageTitle>
    <a href={alertDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-12">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Basic</CardTitle>
+          <CardTitle>Basic</CardTitle>
          <CardSubtitle>A title and a color are enough to show the status of an action.</CardSubtitle>
          <Alert type="danger" title="An error occurred!" />
          <Alert type="warning" title="Some information is missing!" />
@@ -36,7 +27,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert')
    <div class="col-12">
      <Card>
        <CardBody>
-          <CardTitle as="h2">With action</CardTitle>
+          <CardTitle>With action</CardTitle>
          <CardSubtitle>Add a link with the <code>action</code> prop to give users something to do next.</CardSubtitle>
          <Alert showClose action="Link" type="danger" title="An error occurred!" />
          <Alert showClose action="Link" type="warning" title="Some information is missing!" />
@@ -48,7 +39,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert')
    <div class="col-12">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Dismissible</CardTitle>
+          <CardTitle>Dismissible</CardTitle>
          <CardSubtitle>Add <code>showClose</code> to let users close the alert.</CardSubtitle>
          <Alert showClose type="danger" title="An error occurred!" />
          <Alert showClose type="warning" title="Some information is missing!" />
@@ -60,7 +51,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert')
    <div class="col-12">
      <Card>
        <CardBody>
-          <CardTitle as="h2">With a description</CardTitle>
+          <CardTitle>With a description</CardTitle>
          <CardSubtitle>Add a <code>description</code> or a <code>list</code> when the title alone isn't enough context.</CardSubtitle>
          <Alert showClose type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
          <Alert showClose type="warning" title="Some information is missing!" description="This is a custom alert box with a description." />
@@ -72,7 +63,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert')
    <div class="col-12">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Important</CardTitle>
+          <CardTitle>Important</CardTitle>
          <CardSubtitle>Add <code>important</code> for a bolder style that stands out from the rest of the page.</CardSubtitle>
          <Alert showClose important type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
          <Alert showClose important type="success" description="This is a custom alert box with a description." />
@@ -84,7 +75,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert')
    <div class="col-12">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Minor</CardTitle>
+          <CardTitle>Minor</CardTitle>
          <CardSubtitle>Add <code>minor</code> for a quieter style that fits inline with other content.</CardSubtitle>
          <Alert showClose minor type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
          <Alert showClose minor type="success" description="This is a custom alert box with a description." />
@@ -7,11 +7,10 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
 import Icon from '@ui/Icon.astro'
 import people from '@data/people.json'
 import { site } from '@shared/lib/site'
-import { firstLetters, getDocsUrl } from '@shared/lib/string-format'
+import { firstLetters } from '@shared/lib/string-format'
-import PageTitle from '@ui/PageTitle.astro'
+import DocsLink from '@ui/DocsLink.astro'
 const iconIcons = ['user', 'settings', 'car', 'balloon', 'users', 'users-group', 'apps', 'ghost']
@@ -25,23 +24,16 @@ const listSizes = ['xxs', 'xs', 'sm', 'md', 'lg'] as const
 const uploadSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const
 const statusColors = ['red', 'green', 'blue', 'yellow', 'secondary']
 const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
 const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
 ---
 <DefaultLayout title="Avatars" pageMenu="base.avatars" description="Avatars display a photo, icon, or initials to represent a person, brand, or status.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/avatar" />
    <PageTitle>Avatars</PageTitle>
    <a href={avatarDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Default avatar</CardTitle>
+          <CardTitle>Default avatar</CardTitle>
          <CardSubtitle>The base <code>.avatar</code> element — a placeholder box for a photo, icon, or initials.</CardSubtitle>
          <Avatar />
        </CardBody>
@@ -50,7 +42,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Avatar with icon</CardTitle>
+          <CardTitle>Avatar with icon</CardTitle>
          <CardSubtitle>Use an icon instead of a photo with the <code>icon</code> prop.</CardSubtitle>
          <div class="avatar-list">
            {iconIcons.map((icon) => <Avatar icon={icon} />)}
@@ -61,7 +53,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Avatar icon colors</CardTitle>
+          <CardTitle>Avatar icon colors</CardTitle>
          <CardSubtitle>Combine an icon avatar with any theme color.</CardSubtitle>
          <div class="avatar-list">
            {colors.map((color) => <Avatar icon="user" color={color} />)}
@@ -72,7 +64,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Simple avatar</CardTitle>
+          <CardTitle>Simple avatar</CardTitle>
          <CardSubtitle>Pass a <code>person</code> object to render their photo.</CardSubtitle>
          <div class="avatar-list">
            {people8.map((person) => <Avatar person={person} />)}
@@ -83,7 +75,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Avatar placeholder</CardTitle>
+          <CardTitle>Avatar placeholder</CardTitle>
          <CardSubtitle>Fall back to initials with the <code>placeholder</code> prop when there's no photo.</CardSubtitle>
          <div class="avatar-list">
            {people8.map((person) => <Avatar placeholder={firstLetters(person.full_name)} />)}
@@ -94,7 +86,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Avatar shapes</CardTitle>
+          <CardTitle>Avatar shapes</CardTitle>
          <CardSubtitle>Square by default — add <code>.rounded-circle</code> or <code>.rounded-0</code> to change the shape.</CardSubtitle>
          <div class="avatar-list">
            <Avatar />
@@ -107,7 +99,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
    <div class="col-12 col-lg-6">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Avatar sizes</CardTitle>
+          <CardTitle>Avatar sizes</CardTitle>
          <CardSubtitle>Six sizes from <code>xxs</code> to <code>xl</code>, for both photos and placeholders.</CardSubtitle>
          <div class="row">
            <div class="col-6">
@@ -127,7 +119,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
    <div class="col-12 col-lg-6">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Avatar lists</CardTitle>
+          <CardTitle>Avatar lists</CardTitle>
          <CardSubtitle>Stack avatars with <code>&lt;AvatarList&gt;</code> to show a group at a glance.</CardSubtitle>
          <div class="row g-3">
            {
@@ -159,7 +151,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Avatar upload</CardTitle>
+          <CardTitle>Avatar upload</CardTitle>
          <CardSubtitle>An upload control styled as an avatar, for profile photo pickers.</CardSubtitle>
          {uploadSizes.map((size) => <AvatarUpload size={size} />)}
        </CardBody>
@@ -168,7 +160,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Avatar statuses</CardTitle>
+          <CardTitle>Avatar statuses</CardTitle>
          <CardSubtitle>Add a <code>status</code> dot to show online, away, or busy state.</CardSubtitle>
          {statusColors.map((color, i) => <Avatar personId={i + 1} class="rounded-circle" status={color} />)}
        </CardBody>
@@ -177,7 +169,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Avatar brands</CardTitle>
+          <CardTitle>Avatar brands</CardTitle>
          <CardSubtitle>Show a recognizable brand icon instead of a person.</CardSubtitle>
          {brands.map((brand, i) => <Avatar personId={i + 1} brand={brand} />)}
        </CardBody>
@@ -11,22 +11,15 @@ import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
 import DropdownMenu from '@ui/DropdownMenu.astro'
 import site from '@data/site.json'
-import { ucFirst, getDocsUrl } from '@shared/lib/string-format'
+import { ucFirst } from '@shared/lib/string-format'
-import PageTitle from '@ui/PageTitle.astro'
+import DocsLink from '@ui/DocsLink.astro'
 const colors = ['default', ...Object.keys(site.colors), 'dark', 'light']
 const sizes = ['sm', 'md', 'lg']
 const badgeDocsUrl = getDocsUrl('/ui/components/badge')
 ---
 <DefaultLayout title="Badges" pageMenu="base.badges" description="Badges highlight a count, status, or short label attached to text, buttons, or menu items.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/badge" />
    <PageTitle>Badges</PageTitle>
    <a href={badgeDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards mb-5">
    <div class="col-md-6 col-lg-4">
@@ -4,7 +4,7 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Empty from '@ui/Empty.astro'
 ---
-<DefaultLayout title="Blank page" pageMenu="base.blank" containerCentered>
+<DefaultLayout title="Blank page" pageHeader={false} pageMenu="base.blank" containerCentered>
  <h1 class="visually-hidden">Blank page</h1>
  <Empty buttonText="Add your first client" buttonIcon="plus" illustration="computer-fix.svg" />
 </DefaultLayout>
@@ -8,8 +8,7 @@ import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
 import site from '@data/site.json'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 type ColorEntry = [string, { title: string; icon?: string }]
@@ -21,17 +20,10 @@ const socialColors = Object.entries(site.socialColors) as ColorEntry[]
 const actions = ['edit', 'copy', 'settings', 'clipboard', 'x']
 const sizes = ['sm', 'md', 'lg', 'xl'] as const
 const buttonDocsUrl = getDocsUrl('/ui/components/button')
 ---
 <DefaultLayout title="Buttons" pageMenu="base.buttons" description="Buttons are used to trigger actions in a user interface.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/button" />
    <PageTitle>Buttons</PageTitle>
    <a href={buttonDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards mb-5">
    <div class="col-md-6 col-lg-4">
@@ -16,7 +16,7 @@ const person0 = requireIndex(people, 0)
 const person3 = requireIndex(people, 3)
 ---
-<DefaultLayout title="Card actions" pageHeader="Card actions" pageMenu="base.cards.actions">
+<DefaultLayout title="Card actions" pageMenu="base.cards.actions">
  <div class="row row-cards">
    <div class="col-md-6">
      <Card>
@@ -57,7 +57,7 @@ const person3 = requireIndex(people, 3)
                <Avatar person={person0} />
              </div>
              <div class="col">
-                <h3 class="card-title">{person0.full_name}</h3>
+                <CardTitle>{person0.full_name}</CardTitle>
                <CardSubtitle as="div">{person0.job_title}</CardSubtitle>
              </div>
            </div>
@@ -107,7 +107,7 @@ const person3 = requireIndex(people, 3)
                <Avatar person={person3} />
              </div>
              <div class="col">
-                <h3 class="card-title">{person3.full_name}</h3>
+                <CardTitle>{person3.full_name}</CardTitle>
                <CardSubtitle as="div">{person3.job_title}</CardSubtitle>
              </div>
            </div>
@@ -14,7 +14,7 @@ import people from '@data/people.json'
 import { requireIndex } from '@shared/lib/array'
 ---
-<DefaultLayout title="Card Gradients" pageHeader="Card Gradients" pageMenu="base.cards.gradients" pageLibs={['apexcharts']}>
+<DefaultLayout title="Card Gradients" pageMenu="base.cards.gradients" pageLibs={['apexcharts']}>
  <div class="row row-cards">
    <div class="col-md-6">
      <div class="row row-cards">
@@ -9,7 +9,7 @@ import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro'
 const heights = [200, 150, 400, 300, 350, 600, 700, 200, 150, 250, 50, 400, 300, 200]
 ---
-<DefaultLayout title="Cards Masonry" pageHeader="Cards Masonry" pageMenu="base.cards.masonry" pageLibs={['masonry']}>
+<DefaultLayout title="Cards Masonry" pageMenu="base.cards.masonry" pageLibs={['masonry']}>
  <div class="row row-cards" data-masonry={'{"percentPosition": true }'}>
    {
      heights.map((height) => (
@@ -17,7 +17,7 @@ const cardsStack = ['First', 'Second', 'Third']
 const cardsStackColors = ['red', 'green', 'blue']
 ---
-<DefaultLayout title="Cards" pageHeader="Cards" pageMenu="base.cards.base">
+<DefaultLayout title="Cards" pageMenu="base.cards.base">
  <div class="row row-cards">
    <div class="col-md-6 col-lg-3">
      <div class="card">
@@ -1,20 +1,11 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import CarouselCard from '@shared/components/cards/CarouselCard.astro'
-import Icon from '@ui/Icon.astro'
+import DocsLink from '@ui/DocsLink.astro'
 import { getDocsUrl } from '@shared/lib/string-format'
 import PageTitle from '@ui/PageTitle.astro'
 const carouselDocsUrl = getDocsUrl('/ui/components/carousel')
 ---
 <DefaultLayout title="Carousel" pageMenu="base.carousel" description="A carousel cycles through a set of slides, with optional indicators and controls.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/carousel" />
    <PageTitle>Carousel</PageTitle>
    <a href={carouselDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-md-6">
@@ -6,6 +6,6 @@ import changelog from '../../core/CHANGELOG.md?raw'
 const changelogHtml = renderMarkdown(changelog)
 ---
-<ProseLayout title="Changelog" pageHeader="Changelog" pageMenu="changelog">
+<ProseLayout title="Changelog" pageMenu="changelog">
  <Fragment set:html={changelogHtml} />
 </ProseLayout>
@@ -12,7 +12,7 @@ import { capitalize } from '@shared/lib/string-format'
 const demoCharts = Object.entries(chartsData as Record<string, { demo?: boolean; name?: string }>).filter(([, chart]) => chart && chart.demo)
 ---
-<DefaultLayout title="Charts" pageHeader="Charts" pageMenu="plugins.charts" pageLibs={['apexcharts']}>
+<DefaultLayout title="Charts" pageMenu="plugins.charts" pageLibs={['apexcharts']}>
  <div class="row row-cards">
    <div class="col-lg-12">
      <Activity />
@@ -22,7 +22,7 @@ const sidebarPeople = (people as Person[]).slice(0, 10)
 const messages = chats as Message[]
 ---
-<DefaultLayout title="Chat" pageHeader="Chat" pageMenu="extra.chat" containerClass="flex-fill d-flex flex-column">
+<DefaultLayout title="Chat" pageMenu="extra.chat" containerClass="flex-fill d-flex flex-column">
  <div class="card flex-fill">
    <div class="row g-0 flex-fill">
      <div class="col-12 col-lg-5 col-xl-3 border-end d-flex flex-column">
@@ -9,7 +9,7 @@ import site from '@data/site.json'
 const colors = Object.values(site.colors) as { hex: string; title: string }[]
 ---
-<DefaultLayout title="Color picker" pageHeader="Color picker" pageMenu="plugins.colorpicker" pageLibs={['coloris.js']}>
+<DefaultLayout title="Color picker" pageMenu="plugins.colorpicker" pageLibs={['coloris.js']}>
  <Card>
    <CardBody>
      <CardTitle>Basic</CardTitle>
@@ -7,10 +7,8 @@ import CardBody from '@ui/CardBody.astro'
 import Avatar from '@ui/Avatar.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
 import Icon from '@ui/Icon.astro'
 import site from '@data/site.json'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 type ColorEntry = [string, { title: string; hex: string; abbr?: string; icon?: string }]
@@ -20,17 +18,10 @@ const grayColors = Object.entries(site.grayColors) as ColorEntry[]
 const socialColors = Object.entries(site.socialColors) as ColorEntry[]
 const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'transparent']
 const colorsDocsUrl = getDocsUrl('/ui/base/colors')
 ---
 <DefaultLayout title="Colors" pageMenu="base.colors" description="The full color palette, with hex values, and a gradient builder.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/base/colors" />
    <PageTitle>Colors</PageTitle>
    <a href={colorsDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-6 col-lg-3">
@@ -4,7 +4,7 @@ import Offcanvas from '@ui/Offcanvas.astro'
 import OffcanvasBody from '@ui/OffcanvasBody.astro'
 ---
-<DefaultLayout title="Cookie banner" pageHeader="Cookie banner" pageMenu="extra.cookie-banner">
+<DefaultLayout title="Cookie banner" pageMenu="extra.cookie-banner">
  <Offcanvas direction="bottom" show class="h-auto" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog">
    <OffcanvasBody>
      <div class="container">
@@ -10,7 +10,7 @@ import TeamLeaderboard from '@shared/components/cards/TeamLeaderboard.astro'
 import ChurnRisk from '@shared/components/cards/ChurnRisk.astro'
 ---
-<DefaultLayout title="CRM Dashboard" pageHeader="CRM Dashboard" description="Welcome back — here's your CRM overview for today." pageMenu="dashboards.crm" pageLibs={['apexcharts']}>
+<DefaultLayout title="CRM Dashboard" description="Welcome back — here's your CRM overview for today." pageMenu="dashboards.crm" pageLibs={['apexcharts']}>
  <div>
    <div class="col-12">
      <div class="row row-cards">
@@ -14,6 +14,7 @@ import cryptoCurrencies from '@data/crypto-currencies.json'
 import cryptoMarkets from '@data/crypto-markets.json'
 import cryptoOrders from '@data/crypto-orders.json'
 import { parseCurrency, roundTo } from '@shared/lib/string-format'
 import CardTitle from '@ui/CardTitle.astro'
 interface Currency {
  'symbol': string
@@ -43,7 +44,7 @@ const orders = cryptoOrders as { sell_orders: { price: string; btc: string; sum:
 const operationCurrencies = currencies.slice(0, 20)
 ---
-<DefaultLayout title="Crypto Dashboard" pageHeader="Crypto Dashboard" pageMenu="dashboards.crypto" pageLibs={['apexcharts']}>
+<DefaultLayout title="Crypto Dashboard" pageMenu="dashboards.crypto" pageLibs={['apexcharts']}>
  <div class="row row-cards">
    <div class="col-12">
      <div class="row row-cards">
@@ -52,7 +53,7 @@ const operationCurrencies = currencies.slice(0, 20)
            <CardBody>
              <div class="row">
                <div class="col mt-0">
-                  <h5 class="card-title">Total balance</h5>
+                  <CardTitle>Total balance</CardTitle>
                </div>
                <div class="col-auto">
                  <Avatar icon="currency-dollar" />
@@ -75,7 +76,7 @@ const operationCurrencies = currencies.slice(0, 20)
            <CardBody>
              <div class="row">
                <div class="col mt-0">
-                  <h5 class="card-title">USD/BTC</h5>
+                  <CardTitle>USD/BTC</CardTitle>
                </div>
                <div class="col-auto">
                  <Avatar icon="currency-bitcoin" />
@@ -97,7 +98,7 @@ const operationCurrencies = currencies.slice(0, 20)
            <CardBody>
              <div class="row">
                <div class="col mt-0">
-                  <h5 class="card-title">LTC/BTC</h5>
+                  <CardTitle>LTC/BTC</CardTitle>
                </div>
                <div class="col-auto">
                  <Avatar icon="currency-litecoin" />
@@ -119,7 +120,7 @@ const operationCurrencies = currencies.slice(0, 20)
            <CardBody>
              <div class="row">
                <div class="col mt-0">
-                  <h5 class="card-title">ETH/BTC</h5>
+                  <CardTitle>ETH/BTC</CardTitle>
                </div>
                <div class="col-auto">
                  <Avatar icon="currency-ethereum" />
@@ -141,7 +142,7 @@ const operationCurrencies = currencies.slice(0, 20)
            <CardBody>
              <div class="row">
                <div class="col mt-0">
-                  <h5 class="card-title">XMR/BTC</h5>
+                  <CardTitle>XMR/BTC</CardTitle>
                </div>
                <div class="col-auto">
                  <Avatar icon="currency-monero" />
@@ -164,7 +165,7 @@ const operationCurrencies = currencies.slice(0, 20)
        <div class="col-12 col-lg-5">
          <Card>
            <CardHeader>
-              <h5 class="card-title mb-0">Markets</h5>
+              <CardTitle class="mb-0">Markets</CardTitle>
              <CardActions>
                <CardDropdown />
              </CardActions>
@@ -205,7 +206,7 @@ const operationCurrencies = currencies.slice(0, 20)
        <div class="col-12 col-lg-7">
          <Card>
            <CardHeader>
-              <h5 class="card-title mb-0">LTC/BTC</h5>
+              <CardTitle class="mb-0">LTC/BTC</CardTitle>
              <CardActions>
                <NavSegmented items={['1m', '5m', '30m', '1h', '1d']} name="timeframe" size="sm" default={2} />
              </CardActions>
@@ -222,7 +223,7 @@ const operationCurrencies = currencies.slice(0, 20)
        <div class="col-12 col-lg-12 col-xxl-3">
          <Card>
            <CardHeader>
-              <h5 class="card-title mb-0">Operations</h5>
+              <CardTitle class="mb-0">Operations</CardTitle>
              <CardActions>
                <NavSegmented items={['Buy', 'Sell', 'Send']} name="operations" size="sm" />
              </CardActions>
@@ -269,7 +270,7 @@ const operationCurrencies = currencies.slice(0, 20)
        <div class="col-12 col-lg-6 col-xxl">
          <Card>
            <CardHeader>
-              <h5 class="card-title mb-0">Sell Orders</h5>
+              <CardTitle class="mb-0">Sell Orders</CardTitle>
              <CardActions>
                <button class="btn btn-sm">View all</button>
              </CardActions>
@@ -300,7 +301,7 @@ const operationCurrencies = currencies.slice(0, 20)
        <div class="col-12 col-lg-6 col-xxl">
          <Card>
            <CardHeader>
-              <h5 class="card-title mb-0">Buy Orders</h5>
+              <CardTitle class="mb-0">Buy Orders</CardTitle>
              <CardActions>
                <button class="btn btn-sm">View all</button>
              </CardActions>
@@ -3,21 +3,12 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Card from '@ui/Card.astro'
 import CardHeader from '@ui/CardHeader.astro'
 import CardBody from '@ui/CardBody.astro'
 import Icon from '@ui/Icon.astro'
 import Datagrid from '@shared/components/parts/Datagrid.astro'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 const datagridDocsUrl = getDocsUrl('/ui/components/datagrid')
 ---
 <DefaultLayout title="Data grid" pageMenu="base.datagrid" description="A data grid lays out label/value pairs in a compact, aligned grid.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/datagrid" />
    <PageTitle>Data grid</PageTitle>
    <a href={datagridDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <Card>
    <CardHeader title="Base info" />
@@ -33,7 +33,7 @@ const rows = (rollercoasters as Rollercoaster[]).map((rc, i) => {
 const valueNames = ['sort-name', 'sort-type', 'sort-city', 'sort-score', { attr: 'data-date', name: 'sort-date' }, { attr: 'data-progress', name: 'sort-progress' }, 'sort-quantity']
 ---
-<DefaultLayout title="Datatables" pageHeader="Datatables" pageMenu="plugins.datatables" pageLibs={['lists']}>
+<DefaultLayout title="Datatables" pageMenu="plugins.datatables" pageLibs={['lists']}>
  <Card>
    <CardBody class="p-0">
      <div id={`table-${id}`} class="table-responsive">
@@ -2,20 +2,11 @@
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import DropdownMenu from '@ui/DropdownMenu.astro'
 import DropdownMenuAll from '@ui/DropdownMenuAll.astro'
-import Icon from '@ui/Icon.astro'
+import DocsLink from '@ui/DocsLink.astro'
 import { getDocsUrl } from '@shared/lib/string-format'
 import PageTitle from '@ui/PageTitle.astro'
 const dropdownDocsUrl = getDocsUrl('/ui/components/dropdown')
 ---
 <DefaultLayout title="Dropdowns" pageMenu="base.dropdowns" description="Dropdown menus for actions, filters, and selections, always shown open here for reference.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/dropdown" />
    <PageTitle>Dropdowns</PageTitle>
    <a href={dropdownDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row">
    <div class="col-sm-6 col-lg-3">
@@ -6,7 +6,7 @@ import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 ---
-<DefaultLayout title="Dropzone" pageHeader="Dropzone" pageMenu="plugins.dropzone" pageLibs={['dropzone']}>
+<DefaultLayout title="Dropzone" pageMenu="plugins.dropzone" pageLibs={['dropzone']}>
  <div class="row row-cards">
    <div class="col-md-6">
      <Card>
@@ -2,6 +2,6 @@
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 ---
-<DefaultLayout title="Empty page" pageHeader="Empty page" pageMenu="extra.empty">
+<DefaultLayout title="Empty page" pageMenu="extra.empty">
  <!-- Content here -->
 </DefaultLayout>
@@ -2,11 +2,13 @@
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Icon from '@ui/Icon.astro'
 import faq from '@data/faq.json'
 import HeaderActionsBreadcrumb from '@shared/components/layout/HeaderActionsBreadcrumb.astro'
 const categories = faq as { name: string; questions: { question: string }[] }[]
 ---
-<DefaultLayout title="Frequently Asked Questions" pageHeader="Frequently Asked Questions" actions="breadcrumb" pageMenu="extra.faq">
+<DefaultLayout title="Frequently Asked Questions" pageMenu="extra.faq">
  <HeaderActionsBreadcrumb slot="page-header-actions" />
  <div class="card card-lg">
    <div class="card-body">
      <div class="space-y-4">
@@ -4,15 +4,16 @@ import Card from '@ui/Card.astro'
 import CardHeader from '@ui/CardHeader.astro'
 import CardBody from '@ui/CardBody.astro'
 import flags from '@data/flags.json'
 import CardTitle from '@ui/CardTitle.astro'
 // 21 filler divs for flexbox layout.
 const fillers = Array.from({ length: 21 })
 ---
-<DefaultLayout title="Flags" pageHeader="Flags" pageMenu="addons.flags">
+<DefaultLayout title="Flags" pageMenu="addons.flags">
  <Card>
    <CardHeader>
-      <h3 class="card-title">List of all flags</h3>
+      <CardTitle>List of all flags</CardTitle>
    </CardHeader>
    <CardBody class="p-0">
      <div class="demo-icons-list-wrap">
@@ -50,12 +50,12 @@ const rows = [
 ]
 ---
-<DefaultLayout title="Form elements" pageHeader="Form elements" pageMenu="form.elements" pageLibs={['nouislider', 'autosize', 'tabler-flags', 'tabler-payments', 'litepicker', 'tom-select', 'imask']}>
+<DefaultLayout title="Form elements" pageMenu="form.elements" pageLibs={['nouislider', 'autosize', 'tabler-flags', 'tabler-payments', 'litepicker', 'tom-select', 'imask']}>
  <div class="row row-cards">
    <div class="col-12">
      <Card as="form" action="https://httpbin.org/post" method="post">
        <CardHeader>
-          <h4 class="card-title">Form elements</h4>
+          <CardTitle>Form elements</CardTitle>
        </CardHeader>
        <CardBody>
          <div class="row g-5">
@@ -5,7 +5,7 @@ import CardBody from '@ui/CardBody.astro'
 import Fullcalendar from '@ui/Fullcalendar.astro'
 ---
-<DefaultLayout title="Fullcalendar" pageHeader="Fullcalendar" pageMenu="plugins.fullcalendar" pageLibs={['fullcalendar']}>
+<DefaultLayout title="Fullcalendar" pageMenu="plugins.fullcalendar" pageLibs={['fullcalendar']}>
  <Card>
    <CardBody>
      <Fullcalendar sampleEvents />
@@ -5,12 +5,14 @@ import Pagination from '@ui/Pagination.astro'
 import photos from '@data/photos.json'
 import people from '@data/people.json'
 import { requireIndex } from '@shared/lib/array'
 import HeaderActionsPhotos from '@shared/components/layout/HeaderActionsPhotos.astro'
 // Horizontal photos, limit 15; person = people[loop index].
 const galleryPhotos = photos.filter((photo) => photo.horizontal).slice(0, 15)
 ---
-<DefaultLayout title="Gallery" pageHeader="Gallery" description="1-15 of 241 photos" actions="photos" pageMenu="extra.gallery">
+<DefaultLayout title="Gallery" description="1-15 of 241 photos" pageMenu="extra.gallery">
  <HeaderActionsPhotos slot="page-header-actions" />
  <div class="row row-cards">
    {
      galleryPhotos.map((photo, index) => (
@@ -4,7 +4,7 @@ import IconsBanner from '@shared/components/cards/IconsBanner.astro'
 import Icons from '@shared/components/cards/Icons.astro'
 ---
-<DefaultLayout title="Icons" pageHeader="Icons" pageMenu="addons.icons">
+<DefaultLayout title="Icons" pageMenu="addons.icons">
  <div class="row row-cards">
    <div class="col-lg-4">
      <IconsBanner />
@@ -33,7 +33,7 @@ const moreCount = illustrationsList.length - 4
 const illustrationsData = Object.fromEntries(autodarkEntries.map(([key, svg]) => [key, { svg: withClass(svg) }]))
 ---
-<DefaultLayout title="SVG Illustrations" pageHeader="SVG Illustrations" pageMenu="addons.illustrations">
+<DefaultLayout title="SVG Illustrations" pageMenu="addons.illustrations">
  <div class="mb-7" style={`--tblr-illustrations-primary: var(--tblr-color-primary); --tblr-illustrations-skin: ${skinFirst.hex};`} id="current-illustration-style">
    <div class="row row-cards">
      <div class="col-12">
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Dashboard" pretitle="Overview" actions="buttons" pageMenu="dashboards.default" pageLibs={['apexcharts', 'jsvectormap']}>
+<DefaultLayout title="Dashboard" pretitle="Overview" pageMenu="dashboards.default" pageLibs={['apexcharts', 'jsvectormap']}>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -10,7 +10,7 @@ import players from '@data/inline-players.json'
 type Provider = { 'title': string; 'type': string; 'id': string; 'embed-id': string | number }
 ---
-<DefaultLayout title="Inline Player" pageHeader="Inline Player" pageMenu="plugins.plyr" pageLibs={['plyr']}>
+<DefaultLayout title="Inline Player" pageMenu="plugins.plyr" pageLibs={['plyr']}>
  <div class="row row-cards">
    {
      (players as Provider[]).map((provider) => (
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import InvoiceCard from '@shared/components/cards/InvoiceCard.astro'
 import HeaderActionsPrint from '@shared/components/layout/HeaderActionsPrint.astro'
 ---
-<DefaultLayout title="Invoice" pageHeader="Invoice" pageMenu="extra.invoice" actions="print">
+<DefaultLayout title="Invoice" pageMenu="extra.invoice">
  <HeaderActionsPrint slot="page-header-actions" />
  <InvoiceCard />
 </DefaultLayout>
@@ -6,6 +6,7 @@ import Avatar from '@ui/Avatar.astro'
 import BadgeList from '@ui/BadgeList.astro'
 import Check from '@ui/form/Check.astro'
 import jobsData from '@data/jobs.json'
 import HeaderActionsAddJob from '@shared/components/layout/HeaderActionsAddJob.astro'
 interface Job {
  company: string
@@ -23,7 +24,8 @@ const types = ['Programming', 'Design', 'Management / Finance', 'Customer Suppor
 const salaries = ['$20K - $50K', '$50K - $100K', '> $100K']
 ---
-<DefaultLayout title="Search for Jobs" pageHeader="Search for Jobs" actions="add-job" pageMenu="extra.job-listing">
+<DefaultLayout title="Search for Jobs" pageMenu="extra.job-listing">
  <HeaderActionsAddJob slot="page-header-actions" />
  <div class="row g-4">
    <div class="col-md-3">
      <form action="./" method="get" autocomplete="off" novalidate class="sticky-top">
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Boxed layout" pretitle="Overview" actions="buttons" pageMenu="layout.boxed" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-boxed">
+<DefaultLayout title="Dashboard" pageHeader="Boxed layout" pretitle="Overview" pageMenu="layout.boxed" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-boxed">
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Combo layout" pretitle="Overview" actions="buttons" pageMenu="layout.combo" pageLibs={['apexcharts', 'jsvectormap']} sidebar sidebarDark navbarHideBrand navbarClass="d-none d-lg-flex" navbarCondensed>
+<DefaultLayout title="Dashboard" pageHeader="Combo layout" pretitle="Overview" pageMenu="layout.combo" pageLibs={['apexcharts', 'jsvectormap']} sidebar sidebarDark navbarHideBrand navbarClass="d-none d-lg-flex" navbarCondensed>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Condensed layout" pretitle="Overview" actions="buttons" pageMenu="layout.condensed" pageLibs={['apexcharts', 'jsvectormap']} navbarCondensed>
+<DefaultLayout title="Dashboard" pageHeader="Condensed layout" pretitle="Overview" pageMenu="layout.condensed" pageLibs={['apexcharts', 'jsvectormap']} navbarCondensed>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Fluid vertical layout" pretitle="Overview" actions="buttons" pageMenu="layout.fluid-vertical" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-fluid" sidebar sidebarDark hideTopbar>
+<DefaultLayout title="Dashboard" pageHeader="Fluid vertical layout" pretitle="Overview" pageMenu="layout.fluid-vertical" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-fluid" sidebar sidebarDark hideTopbar>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Fluid layout" pretitle="Overview" actions="buttons" pageMenu="layout.fluid" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-fluid">
+<DefaultLayout title="Dashboard" pageHeader="Fluid layout" pretitle="Overview" pageMenu="layout.fluid" pageLibs={['apexcharts', 'jsvectormap']} bodyClass="layout-fluid">
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Horizontal layout" pretitle="Overview" actions="buttons" pageMenu="layout.horizontal" pageLibs={['apexcharts', 'jsvectormap']}>
+<DefaultLayout title="Dashboard" pageHeader="Horizontal layout" pretitle="Overview" pageMenu="layout.horizontal" pageLibs={['apexcharts', 'jsvectormap']}>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Navbar dark" pretitle="Overview" actions="buttons" pageMenu="layout.navbar-dark" pageLibs={['apexcharts', 'jsvectormap']} navbarDark>
+<DefaultLayout title="Dashboard" pageHeader="Navbar dark" pretitle="Overview" pageMenu="layout.navbar-dark" pageLibs={['apexcharts', 'jsvectormap']} navbarDark>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Navbar overlap layout" pretitle="Overview" actions="buttons" pageMenu="layout.navbar-overlap" pageLibs={['apexcharts', 'jsvectormap']} navbarOverlap navbarCondensed navbarDark>
+<DefaultLayout title="Dashboard" pageHeader="Navbar overlap layout" pretitle="Overview" pageMenu="layout.navbar-overlap" pageLibs={['apexcharts', 'jsvectormap']} navbarOverlap navbarCondensed navbarDark>
  <HeaderActionsButtons slot="page-header-actions" dark />
  <HomepageContent />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Navbar sticky" pretitle="Overview" actions="buttons" pageMenu="layout.navbar-sticky" pageLibs={['apexcharts', 'jsvectormap']} navbarSticky>
+<DefaultLayout title="Dashboard" pageHeader="Navbar sticky" pretitle="Overview" pageMenu="layout.navbar-sticky" pageLibs={['apexcharts', 'jsvectormap']} navbarSticky>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="RTL mode" pageHeader="RTL mode" pretitle="Overview" actions="buttons" pageMenu="home" pageLibs={['apexcharts', 'jsvectormap']} rtl>
+<DefaultLayout title="RTL mode" pretitle="Overview" pageMenu="home" pageLibs={['apexcharts', 'jsvectormap']} rtl>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent rtl />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Right vertical layout" pretitle="Overview" actions="buttons" pageMenu="layout.vertical-end" pageLibs={['apexcharts', 'jsvectormap']} sidebar sidebarEnd hideTopbar>
+<DefaultLayout title="Dashboard" pageHeader="Right vertical layout" pretitle="Overview" pageMenu="layout.vertical-end" pageLibs={['apexcharts', 'jsvectormap']} sidebar sidebarEnd hideTopbar>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Vertical transparent layout" pretitle="Overview" actions="buttons" pageMenu="layout.vertical-transparent" pageLibs={['apexcharts', 'jsvectormap']} sidebar navbarTransparent hideTopbar>
+<DefaultLayout title="Dashboard" pageHeader="Vertical transparent layout" pretitle="Overview" pageMenu="layout.vertical-transparent" pageLibs={['apexcharts', 'jsvectormap']} sidebar navbarTransparent hideTopbar>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -3,8 +3,10 @@
 // layout: homepage (page-header overridden by the page front matter)
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
-<DefaultLayout title="Dashboard" pageHeader="Vertical layout" pretitle="Overview" actions="buttons" pageLibs={['apexcharts', 'jsvectormap']} pageMenu="layout.vertical" sidebar sidebarDark hideTopbar>
+<DefaultLayout title="Dashboard" pageHeader="Vertical layout" pretitle="Overview" pageLibs={['apexcharts', 'jsvectormap']} pageMenu="layout.vertical" sidebar sidebarDark hideTopbar>
  <HeaderActionsButtons slot="page-header-actions" />
  <HomepageContent />
 </DefaultLayout>
@@ -7,7 +7,7 @@ import photos from '@data/photos.json'
 const filteredPhotos = photos.filter((photo) => photo.horizontal)
 ---
-<DefaultLayout title="Lightbox" pageHeader="Lightbox" pageMenu="plugins.lightbox" pageLibs={['fslightbox']}>
+<DefaultLayout title="Lightbox" pageMenu="plugins.lightbox" pageLibs={['fslightbox']}>
  <div class="row row-cols-3 row-cols-md-4 row-cols-lg-6 g-3">
    {
      filteredPhotos.map((photo) => (
@@ -2,25 +2,16 @@
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Card from '@ui/Card.astro'
 import CardHeader from '@ui/CardHeader.astro'
 import Icon from '@ui/Icon.astro'
 import UsersList from '@shared/components/cards/UsersList.astro'
 import UsersList2 from '@shared/components/cards/UsersList2.astro'
 import UsersListHeaders from '@shared/components/cards/UsersListHeaders.astro'
 import ListGroup from '@ui/ListGroup.astro'
 import ListGroupItem from '@ui/ListGroupItem.astro'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 const listGroupDocsUrl = getDocsUrl('/ui/components/list-group')
 ---
 <DefaultLayout title="Lists" pageMenu="base.lists" description="Lists of users, contacts, and links — built from list-group items or a plain card body.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/list-group" />
    <PageTitle>Lists</PageTitle>
    <a href={listGroupDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-md-6">
@@ -8,7 +8,7 @@ import CardFooter from '@ui/CardFooter.astro'
 import { site } from '@shared/lib/site'
 ---
-<DefaultLayout title="Logs" pageHeader="Logs" pageMenu="extra.logs">
+<DefaultLayout title="Logs" pageMenu="extra.logs">
  <div class="row">
    <div class="col-lg-6">
      <Card>
@@ -3,7 +3,7 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import CaptureScript from '@shared/components/CaptureScript.astro'
 ---
-<DefaultLayout title="Full Size Map" pageMenu="plugins.map-fullsize" pageLibs={['google-maps']} sidebar hideTopbar wrapperFull>
+<DefaultLayout title="Full Size Map" pageHeader={false} pageMenu="plugins.map-fullsize" pageLibs={['google-maps']} sidebar hideTopbar wrapperFull>
  <h1 class="visually-hidden">Full Size Map</h1>
  <div class="map flex-fill" id="map-google"></div>
  <!--
@@ -6,7 +6,7 @@ import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 ---
-<DefaultLayout title="Vector Maps" pageHeader="Vector Maps" pageMenu="plugins.maps-vector" pageLibs={['jsvectormap']}>
+<DefaultLayout title="Vector Maps" pageMenu="plugins.maps-vector" pageLibs={['jsvectormap']}>
  <div class="row row-cards">
    <div class="col-md-6">
      <Card>
@@ -5,12 +5,13 @@ import Map from '@ui/Map.astro'
 import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import maps from '@data/maps.json'
 import CardTitle from '@ui/CardTitle.astro'
 type MapData = { title?: string; card?: boolean }
 const mapEntries = Object.entries(maps as Record<string, MapData>)
 ---
-<DefaultLayout title="Maps" pageHeader="Maps" pageMenu="plugins.maps" pageLibs={['mapbox']}>
+<DefaultLayout title="Maps" pageMenu="plugins.maps" pageLibs={['mapbox']}>
  <div class="row row-cards">
    {
      mapEntries.map(([mapId, data]) =>
@@ -24,7 +25,7 @@ const mapEntries = Object.entries(maps as Record<string, MapData>)
          <div class="col-lg-6">
            <Card>
              <CardBody>
-                <h3 class="card-title">{data.title}</h3>
+                <CardTitle>{data.title}</CardTitle>
                <Map mapId={mapId} />
              </CardBody>
            </Card>
@@ -4,7 +4,6 @@
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import Icon from '@ui/Icon.astro'
 import ModalInline from '@shared/components/modals/ModalInline.astro'
 import SimpleModalContent from '@shared/components/modals/SimpleModalContent.astro'
 import LargeModalContent from '@shared/components/modals/LargeModalContent.astro'
@@ -23,21 +22,13 @@ import EditProfileModalContent from '@shared/components/modals/EditProfileModalC
 import ConfirmDeleteModalContent from '@shared/components/modals/ConfirmDeleteModalContent.astro'
 import ChangePasswordModalContent from '@shared/components/modals/ChangePasswordModalContent.astro'
 import AddTaskModalContent from '@shared/components/modals/AddTaskModalContent.astro'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0'
 const modalDocsUrl = getDocsUrl('/ui/components/modal')
 ---
 <DefaultLayout title="Modals" pageMenu="base.modals" pageLibs={['signature_pad', 'hugerte', 'litepicker', 'tom-select']} description="Modals interrupt the page to ask for input, confirmation, or a focused action.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/modal" />
    <PageTitle>Modals</PageTitle>
    <a href={modalDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <Card>
    <CardBody>
@@ -6,7 +6,7 @@ import TrackInfo from '@shared/components/cards/music/TrackInfo.astro'
 const topTrackIds = [8, 9, 10, 11, 12, 13]
 ---
-<DefaultLayout title="Music components" pageHeader="Music components" pageMenu="extra.music">
+<DefaultLayout title="Music components" pageMenu="extra.music">
  <div class="row">
    <div class="col-lg-8">
      <TracksList />
@@ -4,20 +4,11 @@
 // fluid-search (variant 5) is a no-op — search block in condensed branch is dead code.
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Navbar from '@shared/components/navbar/Navbar.astro'
-import Icon from '@ui/Icon.astro'
+import DocsLink from '@ui/DocsLink.astro'
 import { getDocsUrl } from '@shared/lib/string-format'
 import PageTitle from '@ui/PageTitle.astro'
 const navbarDocsUrl = getDocsUrl('/ui/layout/navbars')
 ---
 <DefaultLayout title="Navigation" pageMenu="base.navigation" description="Navbar variants — condensed, dark, colored, and with different logo and search layouts.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/layout/navbars" />
    <PageTitle>Navigation</PageTitle>
    <a href={navbarDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="box">
    <div class="mb-3">
@@ -1,27 +1,19 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
-import { ucFirst as capitalize, getDocsUrl } from '@shared/lib/string-format'
+import { ucFirst as capitalize } from '@shared/lib/string-format'
 import ButtonList from '@ui/ButtonList.astro'
 import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import Icon from '@ui/Icon.astro'
 import Offcanvas from '@ui/Offcanvas.astro'
 import OffcanvasHeader from '@ui/OffcanvasHeader.astro'
 import OffcanvasBody from '@ui/OffcanvasBody.astro'
-import PageTitle from '@ui/PageTitle.astro'
+import DocsLink from '@ui/DocsLink.astro'
 const directions = ['start', 'end', 'top', 'bottom'] as const
 const offcanvasDocsUrl = getDocsUrl('/ui/components/offcanvas')
 ---
 <DefaultLayout title="Offcanvas" pageMenu="base.offcanvas" description="An offcanvas panel slides in from an edge of the screen for navigation or supplementary content.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/offcanvas" />
    <PageTitle>Offcanvas</PageTitle>
    <a href={offcanvasDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <Card>
    <CardBody>
@@ -5,20 +5,11 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
-import Icon from '@ui/Icon.astro'
+import DocsLink from '@ui/DocsLink.astro'
 import { getDocsUrl } from '@shared/lib/string-format'
 import PageTitle from '@ui/PageTitle.astro'
 const paginationDocsUrl = getDocsUrl('/ui/components/pagination')
 ---
 <DefaultLayout title="Pagination" pageMenu="base.pagination" description="Pagination splits a long list of results into pages, with Prev/Next controls.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/pagination" />
    <PageTitle>Pagination</PageTitle>
    <a href={paginationDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-12">
@@ -3,27 +3,18 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import Icon from '@ui/Icon.astro'
 import BackgroundPattern from '@ui/BackgroundPattern.astro'
 import site from '@data/site.json'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 const patternColors = Object.keys(site.colors)
 const patternSizes = ['sm', 'md', 'lg', 'xl'] as const
 const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'lines-vertical', 'grid', 'grid-diagonal', 'blueprint', 'circles', 'diagonal-stripes', 'diagonal-stripes-2', 'zigzag', 'vertical-stripes', 'horizontal-stripes'] as const
 const patternsDocsUrl = getDocsUrl('/ui/utilities/background-patterns')
 ---
 <DefaultLayout title="Patterns" pageMenu="base.patterns" description="Background patterns you can apply to any element with a utility class.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/utilities/background-patterns" />
    <PageTitle>Patterns</PageTitle>
    <a href={patternsDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-12">
@@ -5,16 +5,17 @@ import Card from '@ui/Card.astro'
 import CardHeader from '@ui/CardHeader.astro'
 import CardBody from '@ui/CardBody.astro'
 import payments from '@data/payments.json'
 import CardTitle from '@ui/CardTitle.astro'
 const providers = payments as { name: string; logo: string }[]
 ---
-<DefaultLayout title="Payment Providers" pageHeader="Payment Providers" pageMenu="addons.payments">
+<DefaultLayout title="Payment Providers" pageMenu="addons.payments">
  <div class="row row-cards">
    <div class="col-12">
      <Card>
        <CardHeader>
-          <h3 class="card-title">Light version</h3>
+          <CardTitle>Light version</CardTitle>
        </CardHeader>
        <CardBody>
          <div class="row g-5 row-cols-5">
@@ -42,7 +43,7 @@ const providers = payments as { name: string; logo: string }[]
    <div class="col-12">
      <Card>
        <CardHeader>
-          <h3 class="card-title">Dark version</h3>
+          <CardTitle>Dark version</CardTitle>
        </CardHeader>
        <CardBody>
          <div class="row g-5 row-cols-5">
@@ -8,7 +8,7 @@ import { requireIndex } from '@shared/lib/array'
 const photoAt = (i: number) => requireIndex(photosData, i)
 ---
-<DefaultLayout title="Photogrid" pageHeader="Photogrid" pageMenu="extra.photogrid" pageLibs={['fslightbox']}>
+<DefaultLayout title="Photogrid" pageMenu="extra.photogrid" pageLibs={['fslightbox']}>
  <div class="row g-2 g-md-3">
    <div class="col-lg-6">
      <div class="row g-2 g-md-3">
@@ -1,27 +1,18 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Icon from '@ui/Icon.astro'
 import PlaceholderCard1 from '@shared/components/cards/placeholder/Card1.astro'
 import PlaceholderCard2 from '@shared/components/cards/placeholder/Card2.astro'
 import PlaceholderCard3 from '@shared/components/cards/placeholder/Card3.astro'
 import PlaceholderCard4 from '@shared/components/cards/placeholder/Card4.astro'
 import PlaceholderCard5 from '@shared/components/cards/placeholder/Card5.astro'
 import PlaceholderCard6 from '@shared/components/cards/placeholder/Card6.astro'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 const cols = [1, 2, 3, 4]
 const placeholderDocsUrl = getDocsUrl('/ui/components/placeholder')
 ---
 <DefaultLayout title="Placeholder" pageMenu="base.placeholder" description="Placeholders mimic the shape of content that hasn't loaded yet.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/placeholder" />
    <PageTitle>Placeholder</PageTitle>
    <a href={placeholderDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    {
@@ -11,7 +11,7 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 ---
-<DefaultLayout title="Categories playground">
+<DefaultLayout title="Categories playground" pageHeader={false}>
  <!-- Header -->
  <div class="row align-items-center gy-3 mb-5">
    <div class="col">
@@ -5,12 +5,12 @@ import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 ---
-<DefaultLayout title="Layout playground" pageHeader="Layout playground" pretitle="Playground" sidebar sidebarDark>
+<DefaultLayout title="Layout playground" pretitle="Playground" sidebar sidebarDark>
  <div class="row row-cards">
    <div class="col-12">
      <Card>
        <CardBody>
-          <CardTitle as="h2">Sandbox</CardTitle>
+          <CardTitle>Sandbox</CardTitle>
          <p class="text-secondary mb-0">Edit this page to try layout options, components, and styles.</p>
        </CardBody>
      </Card>
@@ -9,6 +9,7 @@ import ProgressSteps from '@ui/ProgressSteps.astro'
 import Datepicker from '@ui/Datepicker.astro'
 import FormGroup from '@ui/FormGroup.astro'
 import Trending from '@ui/Trending.astro'
 import CardTitle from '@ui/CardTitle.astro'
 ---
 <DefaultLayout title="Playground" pageHeader="Project Settings" pageLibs={['litepicker']}>
@@ -157,7 +158,7 @@ import Trending from '@ui/Trending.astro'
    <div class="col-8">
      <Card>
        <CardBody>
-          <h3 class="card-title mb-4">Cohort Statistics</h3>
+          <CardTitle class="mb-4">Cohort Statistics</CardTitle>
          <dl class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            <div class="col">
              <Subheader as="dt">Total Users</Subheader>
@@ -5,7 +5,7 @@ import Card from '@ui/Card.astro'
 import Subheader from '@ui/Subheader.astro'
 ---
-<DefaultLayout title="Pricing table" pageHeader="Pricing table" pageMenu="extra.pricing-table">
+<DefaultLayout title="Pricing table" pageMenu="extra.pricing-table">
  <Card>
    <div class="table-responsive">
      <table class="table table-vcenter table-bordered table-nowrap card-table">
@@ -4,7 +4,7 @@ import PricingCard from '@shared/components/cards/PricingCard.astro'
 import PricingCardEnterprise from '@shared/components/cards/PricingCardEnterprise.astro'
 ---
-<DefaultLayout title="Pricing cards" pageHeader="Pricing cards" pageMenu="extra.pricing">
+<DefaultLayout title="Pricing cards" pageMenu="extra.pricing">
  <div class="row row-cards">
    <div class="col-sm-6 col-lg-3">
      <PricingCard price="0" users={3} category="Free" />
@@ -20,7 +20,7 @@ import UserInfo from '@shared/components/cards/UserInfo.astro'
        <div class="col-12">
          <Card>
            <CardBody>
-              <CardTitle as="h2">About Me</CardTitle>
+              <CardTitle>About Me</CardTitle>
              <div>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid beatae eaque eius esse fugit, hic id illo itaque modi molestias nemo perferendis quae rerum soluta. Blanditiis laborum minima molestiae molestias nemo nesciunt nisi pariatur quae sapiente ut. Aut consectetur doloremque,
@@ -11,7 +11,7 @@ import ProgressBg from '@ui/ProgressBg.astro'
 import ProgressDescription from '@ui/ProgressDescription.astro'
 ---
-<DefaultLayout title="Progress" pageHeader="Progress" pageMenu="base.progress">
+<DefaultLayout title="Progress" pageMenu="base.progress">
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
    <div class="col">
      <Card>
@@ -1,21 +1,12 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Prose from '@ui/Prose.astro'
 import Icon from '@ui/Icon.astro'
 import Avatar from '@ui/Avatar.astro'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 const proseDocsUrl = getDocsUrl('/ui/base/prose')
 ---
 <DefaultLayout title="Prose" pageMenu="base.prose" description="Wrap long-form content in .prose to style headings, paragraphs, lists, and tables without adding classes to every element.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/base/prose" />
    <PageTitle>Prose</PageTitle>
    <a href={proseDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row justify-content-center">
    <div class="col-lg-9 col-xl-8">
@@ -63,7 +63,7 @@ const articles: [string, string[]][] = [
 ]
 ---
-<DefaultLayout title="Scroll Spy" pageHeader="Scroll Spy" pageMenu="base.scroll-spy">
+<DefaultLayout title="Scroll Spy" pageMenu="base.scroll-spy">
  <div class="row g-5">
    <div class="col-sm-2">
      <div class="sticky-top">
@@ -9,7 +9,7 @@ import { requireIndex } from '@shared/lib/array'
 const resultPhotos = photos.filter((photo) => photo.horizontal).slice(0, 18)
 ---
-<DefaultLayout title="Search results" pageHeader="Search results" description="About 2,410 result (0.19 seconds)" pageMenu="extra.search-results">
+<DefaultLayout title="Search results" description="About 2,410 result (0.19 seconds)" pageMenu="extra.search-results">
  <div class="row g-4">
    <div class="col-md-3">
      <NavAside />
@@ -5,20 +5,11 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
-import Icon from '@ui/Icon.astro'
+import DocsLink from '@ui/DocsLink.astro'
 import { getDocsUrl } from '@shared/lib/string-format'
 import PageTitle from '@ui/PageTitle.astro'
 const segmentedControlDocsUrl = getDocsUrl('/ui/components/segmented-control')
 ---
 <DefaultLayout title="Segmented control" pageMenu="base.segmented-control" description="A segmented control lets users pick one option from a small, always-visible set.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/segmented-control" />
    <PageTitle>Segmented control</PageTitle>
    <a href={segmentedControlDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-md-6">
@@ -57,7 +57,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
 });`
 ---
-<DefaultLayout title="Signatures" pageHeader="Signatures" pageMenu="extra.signatures" pageLibs={['signature_pad']}>
+<DefaultLayout title="Signatures" pageMenu="extra.signatures" pageLibs={['signature_pad']}>
  <div class="row row-cards">
    <div class="col-lg-6">
      <Card>
@@ -7,11 +7,9 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
 import Icon from '@ui/Icon.astro'
 import socialTiles from '@data/social-tiles.json'
 import socials from '@data/socials.json'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 interface SocialTile {
  icon: string
@@ -28,17 +26,10 @@ interface Social {
 const tiles = socialTiles as SocialTile[]
 const socialList = socials as Social[]
 const fillers = Array.from({ length: 21 })
 const socialDocsUrl = getDocsUrl('/ui/plugins/social-icons')
 ---
 <DefaultLayout title="Social icons" pageMenu="base.social" description="Branded icons and helpers for linking out to, or signing in with, social networks.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/plugins/social-icons" />
    <PageTitle>Social icons</PageTitle>
    <a href={socialDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-12">
@@ -5,20 +5,11 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
-import Icon from '@ui/Icon.astro'
+import DocsLink from '@ui/DocsLink.astro'
 import { getDocsUrl } from '@shared/lib/string-format'
 import PageTitle from '@ui/PageTitle.astro'
 const starsRatingDocsUrl = getDocsUrl('/ui/components/star-rating')
 ---
 <DefaultLayout title="Star Ratings" pageMenu="base.stars-rating" pageLibs={['tabler-flags', 'star-rating.js']} description="An interactive star rating built on the star-rating.js widget, backed by a hidden select for accessibility and forms.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/star-rating" />
    <PageTitle>Star Ratings</PageTitle>
    <a href={starsRatingDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards mb-5">
    <div class="col-md-6 col-lg-4">
@@ -4,20 +4,11 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
-import Icon from '@ui/Icon.astro'
+import DocsLink from '@ui/DocsLink.astro'
 import { getDocsUrl } from '@shared/lib/string-format'
 import PageTitle from '@ui/PageTitle.astro'
 const stepDocsUrl = getDocsUrl('/ui/components/step')
 ---
 <DefaultLayout title="Steps" pageMenu="base.steps" description="Steps show progress through a numbered or labeled sequence, as a horizontal bar, breadcrumb, or vertical timeline.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/step" />
    <PageTitle>Steps</PageTitle>
    <a href={stepDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards mb-5">
    <div class="col-12">
@@ -7,7 +7,7 @@ import AdvancedTable from '@ui/AdvancedTable.astro'
 import Card from '@ui/Card.astro'
 ---
-<DefaultLayout title="Tables" pageHeader="Tables" pageMenu="base.tables" pageLibs={['lists']}>
+<DefaultLayout title="Tables" pageMenu="base.tables" pageLibs={['lists']}>
  <div class="row row-cards">
    <div class="col-lg-8">
      <Card>
@@ -1,20 +1,11 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import TabsCard from '@shared/components/cards/TabsCard.astro'
-import Icon from '@ui/Icon.astro'
+import DocsLink from '@ui/DocsLink.astro'
 import { getDocsUrl } from '@shared/lib/string-format'
 import PageTitle from '@ui/PageTitle.astro'
 const tabsDocsUrl = getDocsUrl('/ui/layout/navs-tabs')
 ---
 <DefaultLayout title="Tabs" pageMenu="base.tabs" description="Tabs switch between related panels of content inside a card.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/layout/navs-tabs" />
    <PageTitle>Tabs</PageTitle>
    <a href={tabsDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-md-4"><TabsCard id="1" settings /></div>
@@ -6,12 +6,10 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
 import Icon from '@ui/Icon.astro'
 import people from '@data/people.json'
 import flags from '@data/flags.json'
 import siteData from '@data/site.json'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 const tagIcons = ['bold', 'italic', 'underline', 'copy', 'scissors', 'file-plus', 'file-minus', 'ghost', 'star', 'script', 'photo', 'dog', 'piano']
@@ -22,17 +20,10 @@ const people8 = people.slice(0, 8)
 // site.colors yields value objects with .class / .title.
 const colors = Object.values(siteData.colors) as { class: string; title: string }[]
 const tagDocsUrl = getDocsUrl('/ui/components/tag')
 ---
 <DefaultLayout title="Tags" pageMenu="base.tags" description="Tags are compact labels for filters, categories, and keywords.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/tag" />
    <PageTitle>Tags</PageTitle>
    <a href={tagDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards row-cols-1 row-cols-md-2 row-cols-lg-3">
    <div class="col">
@@ -11,6 +11,7 @@ import FormGroup from '@ui/FormGroup.astro'
 import tasks from '@data/tasks.json'
 import people from '@data/people.json'
 import { requireIndex } from '@shared/lib/array'
 import CardTitle from '@ui/CardTitle.astro'
 interface Person {
  id?: string
@@ -40,14 +41,14 @@ const peopleList = people as Person[]
 const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1))
 ---
-<DefaultLayout title="Task List" pageHeader="Task List" pageMenu="extra.tasks.list">
+<DefaultLayout title="Task List" pageMenu="extra.tasks.list">
  <div class="row">
    <div class="col-12">
      {
        columns.map((section) => (
          <div class="card mb-4">
            <div class="card-header">
-              <h3 class="card-title mb-0">{section.name}</h3>
+              <CardTitle class="mb-0">{section.name}</CardTitle>
              <CardActions>
                <Button text="New Task" icon="plus" modalId="add-task" size="sm" />
              </CardActions>
@@ -1,9 +1,11 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Tasks from '@shared/components/parts/Tasks.astro'
 import HeaderActionsAddBoard from '@shared/components/layout/HeaderActionsAddBoard.astro'
 ---
-<DefaultLayout title="Tasks" pageHeader="Tabler Inc. Tasks" pageMenu="extra.tasks.kanban" actions="add-board">
+<DefaultLayout title="Tasks" pageHeader="Tabler Inc. Tasks" pageMenu="extra.tasks.kanban">
  <HeaderActionsAddBoard slot="page-header-actions" />
  <ul class="nav nav-bordered mb-4">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">View all</a>
@@ -7,7 +7,7 @@ import siteData from '@data/site.json'
 const homepage = siteData.homepage
 ---
-<DefaultLayout title="Text features" pageHeader="Text features" pageMenu="extra.text-features">
+<DefaultLayout title="Text features" pageMenu="extra.text-features">
  <div class="row">
    <div class="col-7">
      <div class="card card-lg">
@@ -4,21 +4,12 @@ import Button from '@ui/Button.astro'
 import ButtonList from '@ui/ButtonList.astro'
 import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import Icon from '@ui/Icon.astro'
 import Toast from '@ui/Toast.astro'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 const toastDocsUrl = getDocsUrl('/ui/components/toast')
 ---
 <DefaultLayout title="Toasts" pageMenu="base.toasts" description="Toasts show a brief, dismissible notification in the corner of the screen.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/toast" />
    <PageTitle>Toasts</PageTitle>
    <a href={toastDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <Card>
    <CardBody>
@@ -12,7 +12,7 @@ import Badge from '@ui/Badge.astro'
 import Icon from '@ui/Icon.astro'
 ---
-<DefaultLayout title="Driver Tour" pageHeader="Driver Tour" pageMenu="plugins.tour" pageLibs={['driver.js']}>
+<DefaultLayout title="Driver Tour" pageMenu="plugins.tour" pageLibs={['driver.js']}>
  <div class="row row-cards">
    <div class="col-12">
      <Card>
@@ -4,10 +4,8 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import CardSubtitle from '@ui/CardSubtitle.astro'
 import Icon from '@ui/Icon.astro'
 import StatusMonitoring from '@shared/components/cards/StatusMonitoring.astro'
-import { getDocsUrl } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 import PageTitle from '@ui/PageTitle.astro'
 interface TrackingItem {
  status?: 'success' | 'warning' | 'danger'
@@ -47,17 +45,10 @@ const uptime: TrackingItem[] = [
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
 ]
 const trackingDocsUrl = getDocsUrl('/ui/components/tracking')
 ---
 <DefaultLayout title="Tracking" pageMenu="base.tracking" description="Tracking blocks show an uptime or activity history as a row of colored bars.">
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <DocsLink slot="page-header-actions" path="/ui/components/tracking" />
    <PageTitle>Tracking</PageTitle>
    <a href={trackingDocsUrl} target="_blank" rel="noopener" class="link-secondary">
      Docs <Icon name="external-link" class="icon-sm" />
    </a>
  </div>
  <div class="row row-cards">
    <div class="col-12">
@@ -2,7 +2,7 @@
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 ---
-<DefaultLayout title="Typography" pageHeader="Typography" pageMenu="base.typography">
+<DefaultLayout title="Typography" pageMenu="base.typography">
  <div class="card card-lg">
    <div class="card-body">
      <div class="row g-4">
@@ -8,6 +8,7 @@ import CardBody from '@ui/CardBody.astro'
 import Icon from '@ui/Icon.astro'
 import Pagination from '@ui/Pagination.astro'
 import people from '@data/people.json'
 import HeaderActionsUsers from '@shared/components/layout/HeaderActionsUsers.astro'
 interface Person {
  full_name?: string
@@ -19,7 +20,8 @@ interface Person {
 const users = (people as Person[]).slice(0, 18)
 ---
-<DefaultLayout title="Users list" pageHeader="Users" actions="users" description="1-18 of 413 people" pageMenu="extra.users">
+<DefaultLayout title="Users list" pageHeader="Users" description="1-18 of 413 people" pageMenu="extra.users">
  <HeaderActionsUsers slot="page-header-actions" />
  <div class="row row-cards">
    {
      users.map((person, idx) => {
@@ -29,9 +31,9 @@ const users = (people as Person[]).slice(0, 18)
            <Card>
              <CardBody class="p-4 text-center">
                <Avatar size="xl" person={person} class="mb-3" />
-                <h3 class="m-0 mb-1">
+                <h2 class="m-0 mb-1">
                  <a href="#">{person.full_name}</a>
-                </h3>
+                </h2>
                <div class="text-secondary">{person.job_title}</div>
                <div class="mt-3">{index === 1 ? <span class="badge bg-purple-lt">Owner</span> : index < 5 ? <span class="badge bg-green-lt">Admin</span> : null}</div>
@@ -14,7 +14,7 @@ import UserInfo from '@shared/components/cards/UserInfo.astro'
 import Configuration from '@shared/components/cards/Configuration.astro'
 ---
-<DefaultLayout title="Widgets" pageHeader="Widgets" pageMenu="extra.widgets" pageLibs={['apexcharts']}>
+<DefaultLayout title="Widgets" pageMenu="extra.widgets" pageLibs={['apexcharts']}>
  <div class="row row-cards">
    <div class="col-12 col-md-6 col-xxl-3 mb-4 mb-xxl-0">
      <StatCard title="Earned" value="$2,847" icon="credit-card" />
@@ -7,7 +7,7 @@ import Wysiwyg from '@ui/Wysiwyg.astro'
 import FormGroup from '@ui/FormGroup.astro'
 ---
-<DefaultLayout title="HugeRTE" pageHeader="HugeRTE" pageLibs={['hugerte']}>
+<DefaultLayout title="HugeRTE" pageLibs={['hugerte']}>
  <Card>
    <CardBody>
      <FormGroup label="Your name" for="wysiwyg-name">
@@ -11,7 +11,7 @@ const person = requireIndex(people, 0)
 <form class="card card-md" action="./" method="get" novalidate>
  <div class="card-body text-center">
    <div class="mb-4">
-      <CardTitle as="h2">Account Locked</CardTitle>
+      <CardTitle>Account Locked</CardTitle>
      <p class="text-secondary">Please enter your password to unlock your account</p>
    </div>
@@ -3,11 +3,12 @@ import FormFooter from '@ui/FormFooter.astro'
 import Button from '@ui/Button.astro'
 import ButtonList from '@ui/ButtonList.astro'
 import CaptureScript from '../CaptureScript.astro'
 import CardTitle from '@ui/CardTitle.astro'
 ---
 <form class="card card-md" action="#" method="get" autocomplete="off" novalidate>
  <div class="card-body">
-    <h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
+    <CardTitle class="card-title-lg text-center mb-4">Authenticate Your Account</CardTitle>
    <p class="my-4 text-center">
      Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
--- a/Show More
+++ b/Show More