Banner

A reusable, slot-rich title bar with flanking leading/trailing snippets and an optional nested heading + subheading, each with their own leading/trailing. Banner is built on top of Panel (surfaces, borders, padding, radius) so it can be used standalone as a section header, embedded inside a card or dialog, or dropped anywhere a “title with actions” pattern is needed.

Basic

A minimal banner with only a heading.

PreviewCode

Project settings

// GENERATED from packages/demos/banner/basic.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/react-banner";

export default function BasicDemo() {
  return <Banner heading="Project settings" />;
}

Project settings

<script lang="ts">
  // GENERATED from packages/demos/banner/basic.demo.tsx — edit the source, not this file.
  import Banner from "@pindoba/svelte-banner";
</script>

<Banner heading="Project settings"></Banner>

Project settings

<script setup lang="ts">
// GENERATED from packages/demos/banner/basic.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/vue-banner";
</script>

<template>
  <Banner heading="Project settings"></Banner>
</template>

Project settings

// GENERATED from packages/demos/banner/basic.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/solid-banner";

export default function BasicDemo() {
  return <Banner heading="Project settings" />;
}

Heading + Subheading

Add a subheading for a two-line title stack.

PreviewCode

Project settings

Manage workspace access, billing, and integrations

---
// GENERATED from packages/demos/banner/with-subheading.demo.tsx — edit the source, not this file.
import Banner from "@pindoba/astro-banner";
---

<Banner
  heading="Project settings"
  subheading="Manage workspace access, billing, and integrations"
/>

Project settings

Manage workspace access, billing, and integrations

// GENERATED from packages/demos/banner/with-subheading.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/react-banner";

export default function WithSubheadingDemo() {
  return (
    <Banner
      heading="Project settings"
      subheading="Manage workspace access, billing, and integrations"
    />
  );
}

Project settings

Manage workspace access, billing, and integrations

<script lang="ts">
  // GENERATED from packages/demos/banner/with-subheading.demo.tsx — edit the source, not this file.
  import Banner from "@pindoba/svelte-banner";
</script>

<Banner
  heading="Project settings"
  subheading="Manage workspace access, billing, and integrations"
></Banner>

Project settings

Manage workspace access, billing, and integrations

<script setup lang="ts">
// GENERATED from packages/demos/banner/with-subheading.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/vue-banner";
</script>

<template>
  <Banner
    heading="Project settings"
    subheading="Manage workspace access, billing, and integrations"
  ></Banner>
</template>

Project settings

Manage workspace access, billing, and integrations

// GENERATED from packages/demos/banner/with-subheading.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/solid-banner";

export default function WithSubheadingDemo() {
  return (
    <Banner
      heading="Project settings"
      subheading="Manage workspace access, billing, and integrations"
    />
  );
}

Eyebrow

eyebrow adds a small kicker line above the heading — case-preserving and muted by default. It inherits panel-aware text color, so under emphasis="primary" it automatically flips to a contrast variant. Accepts the same string | { leading, content, trailing } shape as heading.

Whether the eyebrow reads as a quiet meta line, a label-style kicker, or an uppercase overline is a styling decision the consumer owns. Reach for passThrough.eyebrow.style (or write the text uppercased yourself) when you want a tighter, ALL-CAPS look:

<Banner
  eyebrow="Wednesday"
  heading="Dec 14"
  passThrough={{
    eyebrow: {
      style: { textTransform: "uppercase", letterSpacing: "0.05em" },
    },
  }}
/>

PreviewCode

Wednesday

Dec 14

Today

Project review

2:00 PM with the design team

Featured

New

Animation framework

Smoother, more dynamic transitions

Siri suggestions

Add Safina

@saffina28 on Instagram

Notification

Eyebrow flips to contrast

Same auto-contrast cascade as heading and subheading.

---
// GENERATED from packages/demos/banner/with-eyebrow.demo.tsx — edit the source, not this file.
import Banner from "@pindoba/astro-banner";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { Calendar, Sparkles, Bell } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Banner eyebrow="Wednesday" heading="Dec 14" />

  <Banner
    eyebrow={"Today"}
    heading="Project review"
    subheading="2:00 PM with the design team"
  >
    <Stamp
      slot="eyebrow-leading"
      size="2xs"
      shape="square"
      tone="neutral"
      border="none"
    >
      <Calendar />
    </Stamp>
  </Banner>

  <Banner
    eyebrow={"Featured"}
    heading="Animation framework"
    subheading="Smoother, more dynamic transitions"
  >
    <Badge slot="eyebrow-trailing" size="xs" tone="primary">
      New
    </Badge>
  </Banner>

  <Banner
    eyebrow={"Siri suggestions"}
    heading="Add Safina"
    subheading="@saffina28 on Instagram"
  >
    <Stamp
      slot="eyebrow-leading"
      size="2xs"
      shape="square"
      tone="neutral"
      border="none"
    >
      <Sparkles />
    </Stamp>
  </Banner>

  <Banner
    tone="primary"
    emphasis="primary"
    background="surface.peak"
    padding="md"
    radius="md"
    eyebrow={"Notification"}
    heading="Eyebrow flips to contrast"
    subheading="Same auto-contrast cascade as heading and subheading."
  >
    <Stamp
      slot="eyebrow-leading"
      size="2xs"
      shape="square"
      emphasis="adaptive"
      border="none"
    >
      <Bell />
    </Stamp>
  </Banner>
</div>

Wednesday

Dec 14

Today

Project review

2:00 PM with the design team

Featured

New

Animation framework

Smoother, more dynamic transitions

Siri suggestions

Add Safina

@saffina28 on Instagram

Notification

Eyebrow flips to contrast

Same auto-contrast cascade as heading and subheading.

// GENERATED from packages/demos/banner/with-eyebrow.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/react-banner";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { Calendar } from "lucide-react";
import { Sparkles } from "lucide-react";
import { Bell } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

export default function WithEyebrowDemo() {
  const calendarStamp = (
    <Stamp size="2xs" shape="square" tone="neutral" border="none">
      <Calendar />
    </Stamp>
  );
  const sparklesStamp = (
    <Stamp size="2xs" shape="square" tone="neutral" border="none">
      <Sparkles />
    </Stamp>
  );
  const bellStamp = (
    <Stamp size="2xs" shape="square" emphasis="adaptive" border="none">
      <Bell />
    </Stamp>
  );
  const newBadge = (
    <Badge size="xs" tone="primary">
      New
    </Badge>
  );

  return (
    <div className={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Banner eyebrow="Wednesday" heading="Dec 14" />

      <Banner
        eyebrow={{ leading: calendarStamp, content: "Today" }}
        heading="Project review"
        subheading="2:00 PM with the design team"
      />

      <Banner
        eyebrow={{ content: "Featured", trailing: newBadge }}
        heading="Animation framework"
        subheading="Smoother, more dynamic transitions"
      />

      <Banner
        eyebrow={{ leading: sparklesStamp, content: "Siri suggestions" }}
        heading="Add Safina"
        subheading="@saffina28 on Instagram"
      />

      <Banner
        tone="primary"
        emphasis="primary"
        background="surface.peak"
        padding="md"
        radius="md"
        eyebrow={{ leading: bellStamp, content: "Notification" }}
        heading="Eyebrow flips to contrast"
        subheading="Same auto-contrast cascade as heading and subheading."
      />
    </div>
  );
}

Wednesday

Dec 14

Today

Project review

2:00 PM with the design team

Featured

New

Animation framework

Smoother, more dynamic transitions

Siri suggestions

Add Safina

@saffina28 on Instagram

Notification

Eyebrow flips to contrast

Same auto-contrast cascade as heading and subheading.

<script lang="ts">
  // GENERATED from packages/demos/banner/with-eyebrow.demo.tsx — edit the source, not this file.
  import Banner from "@pindoba/svelte-banner";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideCalendar from "@lucide/svelte/icons/calendar";
  import LucideSparkles from "@lucide/svelte/icons/sparkles";
  import LucideBell from "@lucide/svelte/icons/bell";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

{#snippet calendarStamp()}
  <Stamp size="2xs" shape="square" tone="neutral" border="none">
    <LucideCalendar />
  </Stamp>
{/snippet}
{#snippet sparklesStamp()}
  <Stamp size="2xs" shape="square" tone="neutral" border="none">
    <LucideSparkles />
  </Stamp>
{/snippet}
{#snippet bellStamp()}
  <Stamp size="2xs" shape="square" emphasis="adaptive" border="none">
    <LucideBell />
  </Stamp>
{/snippet}
{#snippet newBadge()}
  <Badge size="xs" tone="primary">New</Badge>
{/snippet}

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Banner eyebrow="Wednesday" heading="Dec 14"></Banner>

  <Banner
    eyebrow={{ leading: calendarStamp, content: "Today" }}
    heading="Project review"
    subheading="2:00 PM with the design team"
  ></Banner>

  <Banner
    eyebrow={{ content: "Featured", trailing: newBadge }}
    heading="Animation framework"
    subheading="Smoother, more dynamic transitions"
  ></Banner>

  <Banner
    eyebrow={{ leading: sparklesStamp, content: "Siri suggestions" }}
    heading="Add Safina"
    subheading="@saffina28 on Instagram"
  ></Banner>

  <Banner
    tone="primary"
    emphasis="primary"
    background="surface.peak"
    padding="md"
    radius="md"
    eyebrow={{ leading: bellStamp, content: "Notification" }}
    heading="Eyebrow flips to contrast"
    subheading="Same auto-contrast cascade as heading and subheading."
  ></Banner>
</div>

Wednesday

Dec 14

Today

Project review

2:00 PM with the design team

Featured

New

Animation framework

Smoother, more dynamic transitions

Siri suggestions

Add Safina

@saffina28 on Instagram

Notification

Eyebrow flips to contrast

Same auto-contrast cascade as heading and subheading.

<script setup lang="ts">
// GENERATED from packages/demos/banner/with-eyebrow.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/vue-banner";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', width: '100%' })">
    <Banner eyebrow="Wednesday" heading="Dec 14"></Banner>

    <Banner
      eyebrow="Today"
      heading="Project review"
      subheading="2:00 PM with the design team"
    >
      <template #eyebrowLeading>
        <Stamp size="2xs" shape="square" tone="neutral" border="none">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-calendar"
            aria-hidden="true"
          >
            <path d="M8 2v3" />
            <path d="M16 2v3" />
            <rect x="3" y="3" width="18" height="18" rx="2" />
            <path d="M3 9h18" />
          </svg>
        </Stamp>
      </template>
    </Banner>

    <Banner
      eyebrow="Featured"
      heading="Animation framework"
      subheading="Smoother, more dynamic transitions"
    >
      <template #eyebrowTrailing>
        <Badge size="xs" tone="primary">New</Badge>
      </template>
    </Banner>

    <Banner
      eyebrow="Siri suggestions"
      heading="Add Safina"
      subheading="@saffina28 on Instagram"
    >
      <template #eyebrowLeading>
        <Stamp size="2xs" shape="square" tone="neutral" border="none">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-sparkles"
            aria-hidden="true"
          >
            <path
              d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
            />
            <path d="M20 2v4" />
            <path d="M22 4h-4" />
            <circle cx="4" cy="20" r="2" />
          </svg>
        </Stamp>
      </template>
    </Banner>

    <Banner
      tone="primary"
      emphasis="primary"
      background="surface.peak"
      padding="md"
      radius="md"
      eyebrow="Notification"
      heading="Eyebrow flips to contrast"
      subheading="Same auto-contrast cascade as heading and subheading."
    >
      <template #eyebrowLeading>
        <Stamp size="2xs" shape="square" emphasis="adaptive" border="none">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-bell"
            aria-hidden="true"
          >
            <path d="M10.268 21a2 2 0 0 0 3.464 0" />
            <path
              d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
            />
          </svg>
        </Stamp>
      </template>
    </Banner>
  </div>
</template>

Wednesday

Dec 14

Today

Project review

2:00 PM with the design team

Featured

New

Animation framework

Smoother, more dynamic transitions

Siri suggestions

Add Safina

@saffina28 on Instagram

Notification

Eyebrow flips to contrast

Same auto-contrast cascade as heading and subheading.

// GENERATED from packages/demos/banner/with-eyebrow.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/solid-banner";
import { Badge } from "@pindoba/solid-badge";
import { Stamp } from "@pindoba/solid-stamp";
import { stack } from "@pindoba/styled-system/patterns";

export default function WithEyebrowDemo() {
  const calendarStamp = () => (
    <Stamp size="2xs" shape="square" tone="neutral" border="none">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-calendar"
        aria-hidden="true"
      >
        <path d="M8 2v3" />
        <path d="M16 2v3" />
        <rect x="3" y="3" width="18" height="18" rx="2" />
        <path d="M3 9h18" />
      </svg>
    </Stamp>
  );
  const sparklesStamp = () => (
    <Stamp size="2xs" shape="square" tone="neutral" border="none">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-sparkles"
        aria-hidden="true"
      >
        <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
        <path d="M20 2v4" />
        <path d="M22 4h-4" />
        <circle cx="4" cy="20" r="2" />
      </svg>
    </Stamp>
  );
  const bellStamp = () => (
    <Stamp size="2xs" shape="square" emphasis="adaptive" border="none">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-bell"
        aria-hidden="true"
      >
        <path d="M10.268 21a2 2 0 0 0 3.464 0" />
        <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
      </svg>
    </Stamp>
  );
  const newBadge = () => (
    <Badge size="xs" tone="primary">
      New
    </Badge>
  );

  return (
    <div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Banner eyebrow="Wednesday" heading="Dec 14" />

      <Banner
        eyebrow={{ leading: calendarStamp(), content: "Today" }}
        heading="Project review"
        subheading="2:00 PM with the design team"
      />

      <Banner
        eyebrow={{ content: "Featured", trailing: newBadge() }}
        heading="Animation framework"
        subheading="Smoother, more dynamic transitions"
      />

      <Banner
        eyebrow={{ leading: sparklesStamp(), content: "Siri suggestions" }}
        heading="Add Safina"
        subheading="@saffina28 on Instagram"
      />

      <Banner
        tone="primary"
        emphasis="primary"
        background="surface.peak"
        padding="md"
        radius="md"
        eyebrow={{ leading: bellStamp(), content: "Notification" }}
        heading="Eyebrow flips to contrast"
        subheading="Same auto-contrast cascade as heading and subheading."
      />
    </div>
  );
}

Composing with Stamp

Banner’s slots compose cleanly with Stamp — use them at the top level (leading, trailing) or inside the heading itself via the { leading, content, trailing } shape.

PreviewCode

Inbox

12 new notifications

Featured item

Stamps composed inline with the heading

---
// GENERATED from packages/demos/banner/with-stamp.demo.tsx — edit the source, not this file.
import Banner from "@pindoba/astro-banner";
import Stamp from "@pindoba/astro-stamp";
import { Inbox, Check, Star, Bell } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <Banner heading="Inbox" subheading="12 new notifications">
    <Stamp slot="leading" background="surface.ground" shape="square" size="lg">
      <Inbox />
    </Stamp>
    <Stamp slot="trailing" tone="success" emphasis="secondary" shape="circle">
      <Check />
    </Stamp>
  </Banner>

  <Banner
    heading={"Featured item"}
    subheading="Stamps composed inline with the heading"
  >
    <Stamp
      slot="heading-leading"
      size="sm"
      background="surface.ground"
      tone="warning"
    >
      <Star />
    </Stamp>
    <Stamp slot="heading-trailing" size="sm" tone="danger" shape="circle">
      <Bell />
    </Stamp>
  </Banner>
</div>

Inbox

12 new notifications

Featured item

Stamps composed inline with the heading

// GENERATED from packages/demos/banner/with-stamp.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/react-banner";
import { Stamp } from "@pindoba/react-stamp";
import { Star } from "lucide-react";
import { Bell } from "lucide-react";
import { Inbox } from "lucide-react";
import { Check } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

export default function WithStampDemo() {
  const headingLeadStamp = (
    <Stamp size="sm" background="surface.ground" tone="warning">
      <Star />
    </Stamp>
  );
  const headingTrailStamp = (
    <Stamp size="sm" tone="danger" shape="circle">
      <Bell />
    </Stamp>
  );

  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <Banner
        heading="Inbox"
        subheading="12 new notifications"
        leading={
          <Stamp background="surface.ground" shape="square" size="lg">
            <Inbox />
          </Stamp>
        }
        trailing={
          <Stamp tone="success" emphasis="secondary" shape="circle">
            <Check />
          </Stamp>
        }
      />

      <Banner
        heading={{
          leading: headingLeadStamp,
          content: "Featured item",
          trailing: headingTrailStamp,
        }}
        subheading="Stamps composed inline with the heading"
      />
    </div>
  );
}

Inbox

12 new notifications

Featured item

Stamps composed inline with the heading

<script lang="ts">
  // GENERATED from packages/demos/banner/with-stamp.demo.tsx — edit the source, not this file.
  import Banner from "@pindoba/svelte-banner";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideInbox from "@lucide/svelte/icons/inbox";
  import LucideCheck from "@lucide/svelte/icons/check";
  import LucideStar from "@lucide/svelte/icons/star";
  import LucideBell from "@lucide/svelte/icons/bell";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

{#snippet headingLeadStamp()}
  <Stamp size="sm" background="surface.ground" tone="warning">
    <LucideStar />
  </Stamp>
{/snippet}
{#snippet headingTrailStamp()}
  <Stamp size="sm" tone="danger" shape="circle">
    <LucideBell />
  </Stamp>
{/snippet}

<div class={stack({ gap: "xl", direction: "column" })}>
  <Banner heading="Inbox" subheading="12 new notifications">
    {#snippet leading()}
      <Stamp background="surface.ground" shape="square" size="lg">
        <LucideInbox />
      </Stamp>
    {/snippet}
    {#snippet trailing()}
      <Stamp tone="success" emphasis="secondary" shape="circle">
        <LucideCheck />
      </Stamp>
    {/snippet}
  </Banner>

  <Banner
    heading={{
      leading: headingLeadStamp,
      content: "Featured item",
      trailing: headingTrailStamp,
    }}
    subheading="Stamps composed inline with the heading"
  ></Banner>
</div>

Inbox

12 new notifications

Featured item

Stamps composed inline with the heading

<script setup lang="ts">
// GENERATED from packages/demos/banner/with-stamp.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/vue-banner";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <Banner heading="Inbox" subheading="12 new notifications">
      <template #leading>
        <Stamp background="surface.ground" shape="square" size="lg">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-inbox"
            aria-hidden="true"
          >
            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
            <path
              d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
            />
          </svg>
        </Stamp>
      </template>
      <template #trailing>
        <Stamp tone="success" emphasis="secondary" shape="circle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-check"
            aria-hidden="true"
          >
            <path d="M20 6 9 17l-5-5" />
          </svg>
        </Stamp>
      </template>
    </Banner>

    <Banner
      heading="Featured item"
      subheading="Stamps composed inline with the heading"
    >
      <template #headingLeading>
        <Stamp size="sm" background="surface.ground" tone="warning">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-star"
            aria-hidden="true"
          >
            <path
              d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
            />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Stamp size="sm" tone="danger" shape="circle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-bell"
            aria-hidden="true"
          >
            <path d="M10.268 21a2 2 0 0 0 3.464 0" />
            <path
              d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
            />
          </svg>
        </Stamp>
      </template>
    </Banner>
  </div>
</template>

Inbox

12 new notifications

Featured item

Stamps composed inline with the heading

// GENERATED from packages/demos/banner/with-stamp.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/solid-banner";
import { Stamp } from "@pindoba/solid-stamp";
import { stack } from "@pindoba/styled-system/patterns";

export default function WithStampDemo() {
  const headingLeadStamp = () => (
    <Stamp size="sm" background="surface.ground" tone="warning">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-star"
        aria-hidden="true"
      >
        <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
      </svg>
    </Stamp>
  );
  const headingTrailStamp = () => (
    <Stamp size="sm" tone="danger" shape="circle">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-bell"
        aria-hidden="true"
      >
        <path d="M10.268 21a2 2 0 0 0 3.464 0" />
        <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
      </svg>
    </Stamp>
  );

  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <Banner
        heading="Inbox"
        subheading="12 new notifications"
        leading={
          <Stamp background="surface.ground" shape="square" size="lg">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-inbox"
              aria-hidden="true"
            >
              <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
              <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
            </svg>
          </Stamp>
        }
        trailing={
          <Stamp tone="success" emphasis="secondary" shape="circle">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-check"
              aria-hidden="true"
            >
              <path d="M20 6 9 17l-5-5" />
            </svg>
          </Stamp>
        }
      />

      <Banner
        heading={{
          leading: headingLeadStamp(),
          content: "Featured item",
          trailing: headingTrailStamp(),
        }}
        subheading="Stamps composed inline with the heading"
      />
    </div>
  );
}

Inline addons

An addon beside a row’s text — heading={{ leading, content, trailing }}, and the same object form on eyebrow / subheading — is sized and placed from that row’s own type. Each row publishes its font size and line box, and a <Badge>, <Stamp>, <Kbd> or <Button> in its leading / trailing slot sizes to about 0.84 of the line box (its label at about 0.6 of the row’s font, floored at the xs Badge), whatever the size or *TextStyle. The default firstLine row align then sits the addon on the row’s first line, so a heading that wraps keeps its badge beside its opening words instead of in the middle of the paragraph. The addons are Affixes on the Control Var Contract: pass passThrough.headingTrailing.props.fit: "content" to keep an addon’s own size, or layout.heading.align: "center" for the old block-centred alignment.

PreviewCode

quintal.studio

size xs

quintal.studio

size sm

quintal.studio

size md

quintal.studio

size lg

Zone

New

A long heading that wraps onto a second line

Active

Proxied through the edge

3 rules

---
// GENERATED from packages/demos/banner/inline-addons.demo.tsx — edit the source, not this file.
import Banner from "@pindoba/astro-banner";
import Badge from "@pindoba/astro-badge";
import Button from "@pindoba/astro-button";
import Stamp from "@pindoba/astro-stamp";
import { Globe } from "@lucide/astro";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const narrow = css({ maxWidth: "26rem" });
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <Banner
    size="xs"
    layout={{ heading: { trailing: "together" } }}
    heading={"quintal.studio"}
    subheading="size xs"
  >
    <Stamp slot="heading-leading" emphasis="ghost">
      <Globe />
    </Stamp>
    <Button slot="heading-trailing" size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  </Banner>
  <Banner
    size="sm"
    layout={{ heading: { trailing: "together" } }}
    heading={"quintal.studio"}
    subheading="size sm"
  >
    <Stamp slot="heading-leading" emphasis="ghost">
      <Globe />
    </Stamp>
    <Button slot="heading-trailing" size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  </Banner>
  <Banner
    size="md"
    layout={{ heading: { trailing: "together" } }}
    heading={"quintal.studio"}
    subheading="size md"
  >
    <Stamp slot="heading-leading" emphasis="ghost">
      <Globe />
    </Stamp>
    <Button slot="heading-trailing" size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  </Banner>
  <Banner
    size="lg"
    layout={{ heading: { trailing: "together" } }}
    heading={"quintal.studio"}
    subheading="size lg"
  >
    <Stamp slot="heading-leading" emphasis="ghost">
      <Globe />
    </Stamp>
    <Button slot="heading-trailing" size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  </Banner>
  <Banner
    size="md"
    class={narrow}
    layout={{ heading: { trailing: "together" } }}
    eyebrow={"Zone"}
    heading={"A long heading that wraps onto a second line"}
    subheading={"Proxied through the edge"}
  >
    <Badge slot="eyebrow-trailing" tone="primary">
      New
    </Badge>
    <Badge slot="heading-trailing" tone="success">
      Active
    </Badge>
    <Badge slot="subheading-trailing">3 rules</Badge>
  </Banner>
</div>

quintal.studio

size xs

quintal.studio

size sm

quintal.studio

size md

quintal.studio

size lg

Zone

New

A long heading that wraps onto a second line

Active

Proxied through the edge

3 rules

// GENERATED from packages/demos/banner/inline-addons.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/react-banner";
import { Badge } from "@pindoba/react-badge";
import { Button } from "@pindoba/react-button";
import { Stamp } from "@pindoba/react-stamp";
import { Globe } from "lucide-react";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const narrow = css({ maxWidth: "26rem" });
export default function InlineAddonsDemo() {
  const icon = (
    <Stamp emphasis="ghost">
      <Globe />
    </Stamp>
  );
  const headingTrailing0 = (
    <Button size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  );
  const headingTrailing1 = (
    <Button size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  );
  const headingTrailing2 = (
    <Button size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  );
  const headingTrailing3 = (
    <Button size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  );
  const eyebrowTrailing0 = <Badge tone="primary">New</Badge>;
  const headingTrailing4 = <Badge tone="success">Active</Badge>;
  const subheadingTrailing0 = <Badge>3 rules</Badge>;

  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <Banner
        size="xs"
        layout={{ heading: { trailing: "together" } }}
        heading={{
          leading: icon,
          content: "quintal.studio",
          trailing: headingTrailing0,
        }}
        subheading="size xs"
      />
      <Banner
        size="sm"
        layout={{ heading: { trailing: "together" } }}
        heading={{
          leading: icon,
          content: "quintal.studio",
          trailing: headingTrailing1,
        }}
        subheading="size sm"
      />
      <Banner
        size="md"
        layout={{ heading: { trailing: "together" } }}
        heading={{
          leading: icon,
          content: "quintal.studio",
          trailing: headingTrailing2,
        }}
        subheading="size md"
      />
      <Banner
        size="lg"
        layout={{ heading: { trailing: "together" } }}
        heading={{
          leading: icon,
          content: "quintal.studio",
          trailing: headingTrailing3,
        }}
        subheading="size lg"
      />
      <Banner
        size="md"
        className={narrow}
        layout={{ heading: { trailing: "together" } }}
        eyebrow={{
          content: "Zone",
          trailing: eyebrowTrailing0,
        }}
        heading={{
          content: "A long heading that wraps onto a second line",
          trailing: headingTrailing4,
        }}
        subheading={{
          content: "Proxied through the edge",
          trailing: subheadingTrailing0,
        }}
      />
    </div>
  );
}

quintal.studio

size xs

quintal.studio

size sm

quintal.studio

size md

quintal.studio

size lg

Zone

New

A long heading that wraps onto a second line

Active

Proxied through the edge

3 rules

<script lang="ts">
  // GENERATED from packages/demos/banner/inline-addons.demo.tsx — edit the source, not this file.
  import Banner from "@pindoba/svelte-banner";
  import Badge from "@pindoba/svelte-badge";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideGlobe from "@lucide/svelte/icons/globe";
  import { css } from "@pindoba/styled-system/css";
  import { stack } from "@pindoba/styled-system/patterns";

  const narrow = css({ maxWidth: "26rem" });
</script>

{#snippet icon()}
  <Stamp emphasis="ghost">
    <LucideGlobe />
  </Stamp>
{/snippet}
{#snippet headingTrailing0()}
  <Button size="xs" emphasis="secondary" shape="pill">View docs</Button>
{/snippet}
{#snippet headingTrailing1()}
  <Button size="xs" emphasis="secondary" shape="pill">View docs</Button>
{/snippet}
{#snippet headingTrailing2()}
  <Button size="xs" emphasis="secondary" shape="pill">View docs</Button>
{/snippet}
{#snippet headingTrailing3()}
  <Button size="xs" emphasis="secondary" shape="pill">View docs</Button>
{/snippet}
{#snippet eyebrowTrailing0()}
  <Badge tone="primary">New</Badge>
{/snippet}
{#snippet headingTrailing4()}
  <Badge tone="success">Active</Badge>
{/snippet}
{#snippet subheadingTrailing0()}
  <Badge>3 rules</Badge>
{/snippet}

<div class={stack({ gap: "xl", direction: "column" })}>
  <Banner
    size="xs"
    layout={{ heading: { trailing: "together" } }}
    heading={{
      leading: icon,
      content: "quintal.studio",
      trailing: headingTrailing0,
    }}
    subheading="size xs"
  ></Banner>
  <Banner
    size="sm"
    layout={{ heading: { trailing: "together" } }}
    heading={{
      leading: icon,
      content: "quintal.studio",
      trailing: headingTrailing1,
    }}
    subheading="size sm"
  ></Banner>
  <Banner
    size="md"
    layout={{ heading: { trailing: "together" } }}
    heading={{
      leading: icon,
      content: "quintal.studio",
      trailing: headingTrailing2,
    }}
    subheading="size md"
  ></Banner>
  <Banner
    size="lg"
    layout={{ heading: { trailing: "together" } }}
    heading={{
      leading: icon,
      content: "quintal.studio",
      trailing: headingTrailing3,
    }}
    subheading="size lg"
  ></Banner>
  <Banner
    size="md"
    class={narrow}
    layout={{ heading: { trailing: "together" } }}
    eyebrow={{
      content: "Zone",
      trailing: eyebrowTrailing0,
    }}
    heading={{
      content: "A long heading that wraps onto a second line",
      trailing: headingTrailing4,
    }}
    subheading={{
      content: "Proxied through the edge",
      trailing: subheadingTrailing0,
    }}
  ></Banner>
</div>

quintal.studio

size xs

quintal.studio

size sm

quintal.studio

size md

quintal.studio

size lg

Zone

New

A long heading that wraps onto a second line

Active

Proxied through the edge

3 rules

<script setup lang="ts">
// GENERATED from packages/demos/banner/inline-addons.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/vue-banner";
import { Badge } from "@pindoba/vue-badge";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const narrow = css({ maxWidth: "26rem" });
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <Banner
      size="xs"
      :layout="{ heading: { trailing: 'together' } }"
      heading="quintal.studio"
      subheading="size xs"
    >
      <template #headingLeading>
        <Stamp emphasis="ghost">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-globe"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
            <path d="M2 12h20" />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Button size="xs" emphasis="secondary" shape="pill">View docs</Button>
      </template>
    </Banner>
    <Banner
      size="sm"
      :layout="{ heading: { trailing: 'together' } }"
      heading="quintal.studio"
      subheading="size sm"
    >
      <template #headingLeading>
        <Stamp emphasis="ghost">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-globe"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
            <path d="M2 12h20" />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Button size="xs" emphasis="secondary" shape="pill">View docs</Button>
      </template>
    </Banner>
    <Banner
      size="md"
      :layout="{ heading: { trailing: 'together' } }"
      heading="quintal.studio"
      subheading="size md"
    >
      <template #headingLeading>
        <Stamp emphasis="ghost">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-globe"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
            <path d="M2 12h20" />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Button size="xs" emphasis="secondary" shape="pill">View docs</Button>
      </template>
    </Banner>
    <Banner
      size="lg"
      :layout="{ heading: { trailing: 'together' } }"
      heading="quintal.studio"
      subheading="size lg"
    >
      <template #headingLeading>
        <Stamp emphasis="ghost">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-globe"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
            <path d="M2 12h20" />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Button size="xs" emphasis="secondary" shape="pill">View docs</Button>
      </template>
    </Banner>
    <Banner
      size="md"
      :class="narrow"
      :layout="{ heading: { trailing: 'together' } }"
      eyebrow="Zone"
      heading="A long heading that wraps onto a second line"
      subheading="Proxied through the edge"
    >
      <template #eyebrowTrailing>
        <Badge tone="primary">New</Badge>
      </template>
      <template #headingTrailing>
        <Badge tone="success">Active</Badge>
      </template>
      <template #subheadingTrailing>
        <Badge>3 rules</Badge>
      </template>
    </Banner>
  </div>
</template>

quintal.studio

size xs

quintal.studio

size sm

quintal.studio

size md

quintal.studio

size lg

Zone

New

A long heading that wraps onto a second line

Active

Proxied through the edge

3 rules

// GENERATED from packages/demos/banner/inline-addons.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/solid-banner";
import { Badge } from "@pindoba/solid-badge";
import { Button } from "@pindoba/solid-button";
import { Stamp } from "@pindoba/solid-stamp";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const narrow = css({ maxWidth: "26rem" });
export default function InlineAddonsDemo() {
  const icon = () => (
    <Stamp emphasis="ghost">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-globe"
        aria-hidden="true"
      >
        <circle cx="12" cy="12" r="10" />
        <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
        <path d="M2 12h20" />
      </svg>
    </Stamp>
  );
  const headingTrailing0 = () => (
    <Button size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  );
  const headingTrailing1 = () => (
    <Button size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  );
  const headingTrailing2 = () => (
    <Button size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  );
  const headingTrailing3 = () => (
    <Button size="xs" emphasis="secondary" shape="pill">
      View docs
    </Button>
  );
  const eyebrowTrailing0 = () => <Badge tone="primary">New</Badge>;
  const headingTrailing4 = () => <Badge tone="success">Active</Badge>;
  const subheadingTrailing0 = () => <Badge>3 rules</Badge>;

  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <Banner
        size="xs"
        layout={{ heading: { trailing: "together" } }}
        heading={{
          leading: icon(),
          content: "quintal.studio",
          trailing: headingTrailing0(),
        }}
        subheading="size xs"
      />
      <Banner
        size="sm"
        layout={{ heading: { trailing: "together" } }}
        heading={{
          leading: icon(),
          content: "quintal.studio",
          trailing: headingTrailing1(),
        }}
        subheading="size sm"
      />
      <Banner
        size="md"
        layout={{ heading: { trailing: "together" } }}
        heading={{
          leading: icon(),
          content: "quintal.studio",
          trailing: headingTrailing2(),
        }}
        subheading="size md"
      />
      <Banner
        size="lg"
        layout={{ heading: { trailing: "together" } }}
        heading={{
          leading: icon(),
          content: "quintal.studio",
          trailing: headingTrailing3(),
        }}
        subheading="size lg"
      />
      <Banner
        size="md"
        class={narrow}
        layout={{ heading: { trailing: "together" } }}
        eyebrow={{
          content: "Zone",
          trailing: eyebrowTrailing0(),
        }}
        heading={{
          content: "A long heading that wraps onto a second line",
          trailing: headingTrailing4(),
        }}
        subheading={{
          content: "Proxied through the edge",
          trailing: subheadingTrailing0(),
        }}
      />
    </div>
  );
}

Sizes

Four sizes scale all three text rows together — the heading and subheading each step through a distinct token per size, and the eyebrow nudges up at lg. Padding/radius come from Panel and can be set independently.

PreviewCode

Eyebrow

Extra small

size xs

Eyebrow

Small

size sm

Eyebrow

Medium

size md

Eyebrow

Large

size lg

---
// GENERATED from packages/demos/banner/sizes.demo.tsx — edit the source, not this file.
import Banner from "@pindoba/astro-banner";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "lg", direction: "column" })}>
  <Banner
    size="xs"
    eyebrow="Eyebrow"
    heading="Extra small"
    subheading="size xs"
  />
  <Banner size="sm" eyebrow="Eyebrow" heading="Small" subheading="size sm" />
  <Banner size="md" eyebrow="Eyebrow" heading="Medium" subheading="size md" />
  <Banner size="lg" eyebrow="Eyebrow" heading="Large" subheading="size lg" />
</div>

Eyebrow

Extra small

size xs

Eyebrow

Small

size sm

Eyebrow

Medium

size md

Eyebrow

Large

size lg

// GENERATED from packages/demos/banner/sizes.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/react-banner";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizesDemo() {
  return (
    <div className={stack({ gap: "lg", direction: "column" })}>
      <Banner
        size="xs"
        eyebrow="Eyebrow"
        heading="Extra small"
        subheading="size xs"
      />
      <Banner
        size="sm"
        eyebrow="Eyebrow"
        heading="Small"
        subheading="size sm"
      />
      <Banner
        size="md"
        eyebrow="Eyebrow"
        heading="Medium"
        subheading="size md"
      />
      <Banner
        size="lg"
        eyebrow="Eyebrow"
        heading="Large"
        subheading="size lg"
      />
    </div>
  );
}

Eyebrow

Extra small

size xs

Eyebrow

Small

size sm

Eyebrow

Medium

size md

Eyebrow

Large

size lg

<script lang="ts">
  // GENERATED from packages/demos/banner/sizes.demo.tsx — edit the source, not this file.
  import Banner from "@pindoba/svelte-banner";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "lg", direction: "column" })}>
  <Banner size="xs" eyebrow="Eyebrow" heading="Extra small" subheading="size xs"
  ></Banner>
  <Banner size="sm" eyebrow="Eyebrow" heading="Small" subheading="size sm"
  ></Banner>
  <Banner size="md" eyebrow="Eyebrow" heading="Medium" subheading="size md"
  ></Banner>
  <Banner size="lg" eyebrow="Eyebrow" heading="Large" subheading="size lg"
  ></Banner>
</div>

Eyebrow

Extra small

size xs

Eyebrow

Small

size sm

Eyebrow

Medium

size md

Eyebrow

Large

size lg

<script setup lang="ts">
// GENERATED from packages/demos/banner/sizes.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/vue-banner";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'lg', direction: 'column' })">
    <Banner
      size="xs"
      eyebrow="Eyebrow"
      heading="Extra small"
      subheading="size xs"
    ></Banner>
    <Banner
      size="sm"
      eyebrow="Eyebrow"
      heading="Small"
      subheading="size sm"
    ></Banner>
    <Banner
      size="md"
      eyebrow="Eyebrow"
      heading="Medium"
      subheading="size md"
    ></Banner>
    <Banner
      size="lg"
      eyebrow="Eyebrow"
      heading="Large"
      subheading="size lg"
    ></Banner>
  </div>
</template>

Eyebrow

Extra small

size xs

Eyebrow

Small

size sm

Eyebrow

Medium

size md

Eyebrow

Large

size lg

// GENERATED from packages/demos/banner/sizes.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/solid-banner";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizesDemo() {
  return (
    <div class={stack({ gap: "lg", direction: "column" })}>
      <Banner
        size="xs"
        eyebrow="Eyebrow"
        heading="Extra small"
        subheading="size xs"
      />
      <Banner
        size="sm"
        eyebrow="Eyebrow"
        heading="Small"
        subheading="size sm"
      />
      <Banner
        size="md"
        eyebrow="Eyebrow"
        heading="Medium"
        subheading="size md"
      />
      <Banner
        size="lg"
        eyebrow="Eyebrow"
        heading="Large"
        subheading="size lg"
      />
    </div>
  );
}

Text styles

While size scales all three text rows together, headingTextStyle, eyebrowTextStyle, and subheadingTextStyle let each slot adopt a design-system textStyle token directly — e.g. a big tabular numeric.lg heading over a mono uppercase eyebrow label for KPI/stat cards. A token fully owns its slot’s typography (overriding the size-derived sizing and, for the heading, headingWeight); passThrough.<slot>.style still layers on top. Because these live on the shared base props, any component that extends Banner (such as Card’s header) inherits them.

PreviewCode

Expenses · June 2026

R$ 12,840.55

Across 312 transactions

Revenue

R$ 48,200.00

Section title

---
// GENERATED from packages/demos/banner/text-styles.demo.tsx — edit the source, not this file.
import Banner from "@pindoba/astro-banner";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Banner
    eyebrow="Expenses · June 2026"
    eyebrowTextStyle="eyebrow"
    heading="R$ 12,840.55"
    headingTextStyle="numeric.lg"
    subheading="Across 312 transactions"
    subheadingTextStyle="body.sm"
  />

  <Banner
    size="sm"
    eyebrow="Revenue"
    eyebrowTextStyle="eyebrow"
    heading="R$ 48,200.00"
    headingTextStyle="numeric.md"
  />

  <Banner heading="Section title" headingTextStyle="heading.lg" />
</div>

Expenses · June 2026

R$ 12,840.55

Across 312 transactions

Revenue

R$ 48,200.00

Section title

// GENERATED from packages/demos/banner/text-styles.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/react-banner";
import { stack } from "@pindoba/styled-system/patterns";

export default function TextStylesDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Banner
        eyebrow="Expenses · June 2026"
        eyebrowTextStyle="eyebrow"
        heading="R$ 12,840.55"
        headingTextStyle="numeric.lg"
        subheading="Across 312 transactions"
        subheadingTextStyle="body.sm"
      />

      <Banner
        size="sm"
        eyebrow="Revenue"
        eyebrowTextStyle="eyebrow"
        heading="R$ 48,200.00"
        headingTextStyle="numeric.md"
      />

      <Banner heading="Section title" headingTextStyle="heading.lg" />
    </div>
  );
}

Expenses · June 2026

R$ 12,840.55

Across 312 transactions

Revenue

R$ 48,200.00

Section title

<script lang="ts">
  // GENERATED from packages/demos/banner/text-styles.demo.tsx — edit the source, not this file.
  import Banner from "@pindoba/svelte-banner";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Banner
    eyebrow="Expenses · June 2026"
    eyebrowTextStyle="eyebrow"
    heading="R$ 12,840.55"
    headingTextStyle="numeric.lg"
    subheading="Across 312 transactions"
    subheadingTextStyle="body.sm"
  ></Banner>

  <Banner
    size="sm"
    eyebrow="Revenue"
    eyebrowTextStyle="eyebrow"
    heading="R$ 48,200.00"
    headingTextStyle="numeric.md"
  ></Banner>

  <Banner heading="Section title" headingTextStyle="heading.lg"></Banner>
</div>

Expenses · June 2026

R$ 12,840.55

Across 312 transactions

Revenue

R$ 48,200.00

Section title

<script setup lang="ts">
// GENERATED from packages/demos/banner/text-styles.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/vue-banner";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', width: '100%' })">
    <Banner
      eyebrow="Expenses · June 2026"
      eyebrowTextStyle="eyebrow"
      heading="R$ 12,840.55"
      headingTextStyle="numeric.lg"
      subheading="Across 312 transactions"
      subheadingTextStyle="body.sm"
    ></Banner>

    <Banner
      size="sm"
      eyebrow="Revenue"
      eyebrowTextStyle="eyebrow"
      heading="R$ 48,200.00"
      headingTextStyle="numeric.md"
    ></Banner>

    <Banner heading="Section title" headingTextStyle="heading.lg"></Banner>
  </div>
</template>

Expenses · June 2026

R$ 12,840.55

Across 312 transactions

Revenue

R$ 48,200.00

Section title

// GENERATED from packages/demos/banner/text-styles.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/solid-banner";
import { stack } from "@pindoba/styled-system/patterns";

export default function TextStylesDemo() {
  return (
    <div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Banner
        eyebrow="Expenses · June 2026"
        eyebrowTextStyle="eyebrow"
        heading="R$ 12,840.55"
        headingTextStyle="numeric.lg"
        subheading="Across 312 transactions"
        subheadingTextStyle="body.sm"
      />

      <Banner
        size="sm"
        eyebrow="Revenue"
        eyebrowTextStyle="eyebrow"
        heading="R$ 48,200.00"
        headingTextStyle="numeric.md"
      />

      <Banner heading="Section title" headingTextStyle="heading.lg" />
    </div>
  );
}

Heading level

The heading row renders as an <h3> by default — the right level for a card or dialog title. When a banner is the page or section heading, set headingLevel (1–6) to place it correctly in the document outline; headingLevel={1} renders an <h1>. It is purely semantic: typography still comes from size / headingWeight / headingTextStyle, so raising the level never changes how the banner looks. The docs site’s own page masthead is a Banner with headingLevel={1} and headingTextStyle="heading.2xl".

Slot layout

All layout lives under a single layout prop, keyed per slot (the same shape as passThrough), so you don’t reach for raw passThrough CSS just to nudge alignment or placement. layout.eyebrow, layout.heading, and layout.subheading each take an align (cross-axis alignment of that row’s items) and a trailing placement — "apart" (default) flushes the trailing element to the row’s right edge, while "together" lets it sit next to the content (useful for a small badge after a label, which otherwise drifts to the far edge). layout.content.align aligns the whole text block horizontally — "center" and "end" give you a centered or right-aligned banner. layout.root.align aligns the top-level leading/trailing slots against the whole text block — e.g. "start" top-aligns a leading icon over a multi-line body — and layout.leading.align / layout.trailing.align override it for a single slot (center a leading avatar while the root stays top-aligned). Per-row overrides stay independent, and passThrough.<slot>.style still layers on top for anything outside these axes.

PreviewCode

Featured

New

Trailing together

The eyebrow badge sits next to the label.

Featured

New

Trailing apart

The eyebrow badge flushes to the right edge.

Top-aligned leading icon

With root align start, the icon hugs the top of a multi-line text block rather than centering against it.

Per-slot self-alignment

root align start pins the trailing badge to the top, while leading align center keeps the icon centered on the text block.

New

Centered

Centered banner

The whole text block is centered horizontally.

Right aligned

Right-aligned banner

The whole text block hugs the right edge.

---
// GENERATED from packages/demos/banner/layout.demo.tsx — edit the source, not this file.
import Banner from "@pindoba/astro-banner";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { Info } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Banner
    layout={{ eyebrow: { trailing: "together" } }}
    eyebrow={"Featured"}
    heading="Trailing together"
    subheading="The eyebrow badge sits next to the label."
  >
    <Badge slot="eyebrow-trailing" size="xs" tone="primary">
      New
    </Badge>
  </Banner>

  <Banner
    layout={{ eyebrow: { trailing: "apart" } }}
    eyebrow={"Featured"}
    heading="Trailing apart"
    subheading="The eyebrow badge flushes to the right edge."
  >
    <Badge slot="eyebrow-trailing" size="xs" tone="primary">
      New
    </Badge>
  </Banner>

  <Banner
    layout={{ root: { align: "start" } }}
    heading="Top-aligned leading icon"
    subheading="With root align start, the icon hugs the top of a multi-line text block rather than centering against it."
  >
    <Stamp slot="leading" size="md" shape="square" tone="primary" border="none">
      <Info />
    </Stamp>
  </Banner>

  <Banner
    layout={{ root: { align: "start" }, leading: { align: "center" } }}
    heading="Per-slot self-alignment"
    subheading="root align start pins the trailing badge to the top, while leading align center keeps the icon centered on the text block."
  >
    <Stamp slot="leading" size="md" shape="square" tone="primary" border="none">
      <Info />
    </Stamp>
    <Badge slot="trailing" size="xs" tone="primary">
      New
    </Badge>
  </Banner>

  <Banner
    layout={{ content: { align: "center" } }}
    eyebrow="Centered"
    heading="Centered banner"
    subheading="The whole text block is centered horizontally."
  />

  <Banner
    layout={{ content: { align: "end" } }}
    eyebrow="Right aligned"
    heading="Right-aligned banner"
    subheading="The whole text block hugs the right edge."
  />
</div>

Featured

New

Trailing together

The eyebrow badge sits next to the label.

Featured

New

Trailing apart

The eyebrow badge flushes to the right edge.

Top-aligned leading icon

With root align start, the icon hugs the top of a multi-line text block rather than centering against it.

Per-slot self-alignment

root align start pins the trailing badge to the top, while leading align center keeps the icon centered on the text block.

New

Centered

Centered banner

The whole text block is centered horizontally.

Right aligned

Right-aligned banner

The whole text block hugs the right edge.

// GENERATED from packages/demos/banner/layout.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/react-banner";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { Info } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

export default function LayoutDemo() {
  const newBadge = (
    <Badge size="xs" tone="primary">
      New
    </Badge>
  );

  return (
    <div className={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Banner
        layout={{ eyebrow: { trailing: "together" } }}
        eyebrow={{ content: "Featured", trailing: newBadge }}
        heading="Trailing together"
        subheading="The eyebrow badge sits next to the label."
      />

      <Banner
        layout={{ eyebrow: { trailing: "apart" } }}
        eyebrow={{ content: "Featured", trailing: newBadge }}
        heading="Trailing apart"
        subheading="The eyebrow badge flushes to the right edge."
      />

      <Banner
        layout={{ root: { align: "start" } }}
        heading="Top-aligned leading icon"
        subheading="With root align start, the icon hugs the top of a multi-line text block rather than centering against it."
        leading={
          <Stamp size="md" shape="square" tone="primary" border="none">
            <Info />
          </Stamp>
        }
      />

      <Banner
        layout={{ root: { align: "start" }, leading: { align: "center" } }}
        heading="Per-slot self-alignment"
        subheading="root align start pins the trailing badge to the top, while leading align center keeps the icon centered on the text block."
        leading={
          <Stamp size="md" shape="square" tone="primary" border="none">
            <Info />
          </Stamp>
        }
        trailing={
          <Badge size="xs" tone="primary">
            New
          </Badge>
        }
      />

      <Banner
        layout={{ content: { align: "center" } }}
        eyebrow="Centered"
        heading="Centered banner"
        subheading="The whole text block is centered horizontally."
      />

      <Banner
        layout={{ content: { align: "end" } }}
        eyebrow="Right aligned"
        heading="Right-aligned banner"
        subheading="The whole text block hugs the right edge."
      />
    </div>
  );
}

Featured

New

Trailing together

The eyebrow badge sits next to the label.

Featured

New

Trailing apart

The eyebrow badge flushes to the right edge.

Top-aligned leading icon

With root align start, the icon hugs the top of a multi-line text block rather than centering against it.

Per-slot self-alignment

root align start pins the trailing badge to the top, while leading align center keeps the icon centered on the text block.

New

Centered

Centered banner

The whole text block is centered horizontally.

Right aligned

Right-aligned banner

The whole text block hugs the right edge.

<script lang="ts">
  // GENERATED from packages/demos/banner/layout.demo.tsx — edit the source, not this file.
  import Banner from "@pindoba/svelte-banner";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideInfo from "@lucide/svelte/icons/info";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

{#snippet newBadge()}
  <Badge size="xs" tone="primary">New</Badge>
{/snippet}

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Banner
    layout={{ eyebrow: { trailing: "together" } }}
    eyebrow={{ content: "Featured", trailing: newBadge }}
    heading="Trailing together"
    subheading="The eyebrow badge sits next to the label."
  ></Banner>

  <Banner
    layout={{ eyebrow: { trailing: "apart" } }}
    eyebrow={{ content: "Featured", trailing: newBadge }}
    heading="Trailing apart"
    subheading="The eyebrow badge flushes to the right edge."
  ></Banner>

  <Banner
    layout={{ root: { align: "start" } }}
    heading="Top-aligned leading icon"
    subheading="With root align start, the icon hugs the top of a multi-line text block rather than centering against it."
  >
    {#snippet leading()}
      <Stamp size="md" shape="square" tone="primary" border="none">
        <LucideInfo />
      </Stamp>
    {/snippet}
  </Banner>

  <Banner
    layout={{ root: { align: "start" }, leading: { align: "center" } }}
    heading="Per-slot self-alignment"
    subheading="root align start pins the trailing badge to the top, while leading align center keeps the icon centered on the text block."
  >
    {#snippet leading()}
      <Stamp size="md" shape="square" tone="primary" border="none">
        <LucideInfo />
      </Stamp>
    {/snippet}
    {#snippet trailing()}
      <Badge size="xs" tone="primary">New</Badge>
    {/snippet}
  </Banner>

  <Banner
    layout={{ content: { align: "center" } }}
    eyebrow="Centered"
    heading="Centered banner"
    subheading="The whole text block is centered horizontally."
  ></Banner>

  <Banner
    layout={{ content: { align: "end" } }}
    eyebrow="Right aligned"
    heading="Right-aligned banner"
    subheading="The whole text block hugs the right edge."
  ></Banner>
</div>

Featured

New

Trailing together

The eyebrow badge sits next to the label.

Featured

New

Trailing apart

The eyebrow badge flushes to the right edge.

Top-aligned leading icon

With root align start, the icon hugs the top of a multi-line text block rather than centering against it.

Per-slot self-alignment

root align start pins the trailing badge to the top, while leading align center keeps the icon centered on the text block.

New

Centered

Centered banner

The whole text block is centered horizontally.

Right aligned

Right-aligned banner

The whole text block hugs the right edge.

<script setup lang="ts">
// GENERATED from packages/demos/banner/layout.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/vue-banner";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', width: '100%' })">
    <Banner
      :layout="{ eyebrow: { trailing: 'together' } }"
      eyebrow="Featured"
      heading="Trailing together"
      subheading="The eyebrow badge sits next to the label."
    >
      <template #eyebrowTrailing>
        <Badge size="xs" tone="primary">New</Badge>
      </template>
    </Banner>

    <Banner
      :layout="{ eyebrow: { trailing: 'apart' } }"
      eyebrow="Featured"
      heading="Trailing apart"
      subheading="The eyebrow badge flushes to the right edge."
    >
      <template #eyebrowTrailing>
        <Badge size="xs" tone="primary">New</Badge>
      </template>
    </Banner>

    <Banner
      :layout="{ root: { align: 'start' } }"
      heading="Top-aligned leading icon"
      subheading="With root align start, the icon hugs the top of a multi-line text block rather than centering against it."
    >
      <template #leading>
        <Stamp size="md" shape="square" tone="primary" border="none">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-info"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 16v-4" />
            <path d="M12 8h.01" />
          </svg>
        </Stamp>
      </template>
    </Banner>

    <Banner
      :layout="{ root: { align: 'start' }, leading: { align: 'center' } }"
      heading="Per-slot self-alignment"
      subheading="root align start pins the trailing badge to the top, while leading align center keeps the icon centered on the text block."
    >
      <template #leading>
        <Stamp size="md" shape="square" tone="primary" border="none">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-info"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 16v-4" />
            <path d="M12 8h.01" />
          </svg>
        </Stamp>
      </template>
      <template #trailing>
        <Badge size="xs" tone="primary">New</Badge>
      </template>
    </Banner>

    <Banner
      :layout="{ content: { align: 'center' } }"
      eyebrow="Centered"
      heading="Centered banner"
      subheading="The whole text block is centered horizontally."
    ></Banner>

    <Banner
      :layout="{ content: { align: 'end' } }"
      eyebrow="Right aligned"
      heading="Right-aligned banner"
      subheading="The whole text block hugs the right edge."
    ></Banner>
  </div>
</template>

Featured

New

Trailing together

The eyebrow badge sits next to the label.

Featured

New

Trailing apart

The eyebrow badge flushes to the right edge.

Top-aligned leading icon

With root align start, the icon hugs the top of a multi-line text block rather than centering against it.

Per-slot self-alignment

root align start pins the trailing badge to the top, while leading align center keeps the icon centered on the text block.

New

Centered

Centered banner

The whole text block is centered horizontally.

Right aligned

Right-aligned banner

The whole text block hugs the right edge.

// GENERATED from packages/demos/banner/layout.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/solid-banner";
import { Badge } from "@pindoba/solid-badge";
import { Stamp } from "@pindoba/solid-stamp";
import { stack } from "@pindoba/styled-system/patterns";

export default function LayoutDemo() {
  const newBadge = () => (
    <Badge size="xs" tone="primary">
      New
    </Badge>
  );

  return (
    <div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Banner
        layout={{ eyebrow: { trailing: "together" } }}
        eyebrow={{ content: "Featured", trailing: newBadge() }}
        heading="Trailing together"
        subheading="The eyebrow badge sits next to the label."
      />

      <Banner
        layout={{ eyebrow: { trailing: "apart" } }}
        eyebrow={{ content: "Featured", trailing: newBadge() }}
        heading="Trailing apart"
        subheading="The eyebrow badge flushes to the right edge."
      />

      <Banner
        layout={{ root: { align: "start" } }}
        heading="Top-aligned leading icon"
        subheading="With root align start, the icon hugs the top of a multi-line text block rather than centering against it."
        leading={
          <Stamp size="md" shape="square" tone="primary" border="none">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-info"
              aria-hidden="true"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
          </Stamp>
        }
      />

      <Banner
        layout={{ root: { align: "start" }, leading: { align: "center" } }}
        heading="Per-slot self-alignment"
        subheading="root align start pins the trailing badge to the top, while leading align center keeps the icon centered on the text block."
        leading={
          <Stamp size="md" shape="square" tone="primary" border="none">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-info"
              aria-hidden="true"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
          </Stamp>
        }
        trailing={
          <Badge size="xs" tone="primary">
            New
          </Badge>
        }
      />

      <Banner
        layout={{ content: { align: "center" } }}
        eyebrow="Centered"
        heading="Centered banner"
        subheading="The whole text block is centered horizontally."
      />

      <Banner
        layout={{ content: { align: "end" } }}
        eyebrow="Right aligned"
        heading="Right-aligned banner"
        subheading="The whole text block hugs the right edge."
      />
    </div>
  );
}

Trailing justify

The top-level trailing slot always sits at the right edge (the text block takes the remaining width), and its content is centered inside the slot by default. When the trailing region is wider than its content — a fixed-width metadata column, or a truncating path — layout.trailing.justify positions that content along the slot’s main axis: "end" flushes it to the card’s right edge, "start" hugs the text block, "center" (default) centers it. This replaces reaching for passThrough.trailing.style.justifyContent. It composes with layout.trailing.align (the vertical/cross-axis knob), so { trailing: { align: "start", justify: "end" } } pins content to the top-right corner.

PreviewCode

Flush right

layout.trailing.justify: 'end' pins the path to the right edge — no passThrough needed.

…/Projects/pindoba

Left of its column

justify: 'start' left-aligns the same content within its trailing region.

…/Projects/pindoba

---
// GENERATED from packages/demos/banner/trailing-justify.demo.tsx — edit the source, not this file.
import Banner from "@pindoba/astro-banner";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const metaClass = css({
  width: "12rem",
  fontFamily: "mono",
  fontSize: "xs",
  color: "panel.text.muted",
  whiteSpace: "nowrap",
});
---

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Banner
    layout={{ trailing: { align: "start", justify: "end" } }}
    heading="Flush right"
    subheading="layout.trailing.justify: 'end' pins the path to the right edge — no passThrough needed."
  >
    <span slot="trailing" class={metaClass}>
      …/Projects/pindoba
    </span>
  </Banner>

  <Banner
    layout={{ trailing: { align: "start", justify: "start" } }}
    heading="Left of its column"
    subheading="justify: 'start' left-aligns the same content within its trailing region."
  >
    <span slot="trailing" class={metaClass}>
      …/Projects/pindoba
    </span>
  </Banner>
</div>

Flush right

layout.trailing.justify: 'end' pins the path to the right edge — no passThrough needed.

…/Projects/pindoba

Left of its column

justify: 'start' left-aligns the same content within its trailing region.

…/Projects/pindoba

// GENERATED from packages/demos/banner/trailing-justify.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/react-banner";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const metaClass = css({
  width: "12rem",
  fontFamily: "mono",
  fontSize: "xs",
  color: "panel.text.muted",
  whiteSpace: "nowrap",
});
export default function TrailingJustifyDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Banner
        layout={{ trailing: { align: "start", justify: "end" } }}
        heading="Flush right"
        subheading="layout.trailing.justify: 'end' pins the path to the right edge — no passThrough needed."
        trailing={<span className={metaClass}>…/Projects/pindoba</span>}
      />

      <Banner
        layout={{ trailing: { align: "start", justify: "start" } }}
        heading="Left of its column"
        subheading="justify: 'start' left-aligns the same content within its trailing region."
        trailing={<span className={metaClass}>…/Projects/pindoba</span>}
      />
    </div>
  );
}

Flush right

layout.trailing.justify: 'end' pins the path to the right edge — no passThrough needed.

…/Projects/pindoba

Left of its column

justify: 'start' left-aligns the same content within its trailing region.

…/Projects/pindoba

<script lang="ts">
  // GENERATED from packages/demos/banner/trailing-justify.demo.tsx — edit the source, not this file.
  import Banner from "@pindoba/svelte-banner";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const metaClass = css({
    width: "12rem",
    fontFamily: "mono",
    fontSize: "xs",
    color: "panel.text.muted",
    whiteSpace: "nowrap",
  });
</script>

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Banner
    layout={{ trailing: { align: "start", justify: "end" } }}
    heading="Flush right"
    subheading="layout.trailing.justify: 'end' pins the path to the right edge — no passThrough needed."
  >
    {#snippet trailing()}
      <span class={metaClass}> …/Projects/pindoba </span>
    {/snippet}
  </Banner>

  <Banner
    layout={{ trailing: { align: "start", justify: "start" } }}
    heading="Left of its column"
    subheading="justify: 'start' left-aligns the same content within its trailing region."
  >
    {#snippet trailing()}
      <span class={metaClass}> …/Projects/pindoba </span>
    {/snippet}
  </Banner>
</div>

Flush right

layout.trailing.justify: 'end' pins the path to the right edge — no passThrough needed.

…/Projects/pindoba

Left of its column

justify: 'start' left-aligns the same content within its trailing region.

…/Projects/pindoba

<script setup lang="ts">
// GENERATED from packages/demos/banner/trailing-justify.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/vue-banner";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const metaClass = css({
  width: "12rem",
  fontFamily: "mono",
  fontSize: "xs",
  color: "panel.text.muted",
  whiteSpace: "nowrap",
});
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', width: '100%' })">
    <Banner
      :layout="{ trailing: { align: 'start', justify: 'end' } }"
      heading="Flush right"
      subheading="layout.trailing.justify: 'end' pins the path to the right edge — no passThrough needed."
    >
      <template #trailing>
        <span :class="metaClass">…/Projects/pindoba</span>
      </template>
    </Banner>

    <Banner
      :layout="{ trailing: { align: 'start', justify: 'start' } }"
      heading="Left of its column"
      subheading="justify: 'start' left-aligns the same content within its trailing region."
    >
      <template #trailing>
        <span :class="metaClass">…/Projects/pindoba</span>
      </template>
    </Banner>
  </div>
</template>

Flush right

layout.trailing.justify: 'end' pins the path to the right edge — no passThrough needed.

…/Projects/pindoba

Left of its column

justify: 'start' left-aligns the same content within its trailing region.

…/Projects/pindoba

// GENERATED from packages/demos/banner/trailing-justify.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/solid-banner";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const metaClass = css({
  width: "12rem",
  fontFamily: "mono",
  fontSize: "xs",
  color: "panel.text.muted",
  whiteSpace: "nowrap",
});
export default function TrailingJustifyDemo() {
  return (
    <div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Banner
        layout={{ trailing: { align: "start", justify: "end" } }}
        heading="Flush right"
        subheading="layout.trailing.justify: 'end' pins the path to the right edge — no passThrough needed."
        trailing={<span class={metaClass}>…/Projects/pindoba</span>}
      />

      <Banner
        layout={{ trailing: { align: "start", justify: "start" } }}
        heading="Left of its column"
        subheading="justify: 'start' left-aligns the same content within its trailing region."
        trailing={<span class={metaClass}>…/Projects/pindoba</span>}
      />
    </div>
  );
}

Leading span

By default the leading element (an icon or Stamp) is centered against the whole text block. layout.leading.span lets it flank just a pair of rows instead, which reads more balanced for changelog-style cards. The heading is always flanked; span controls which neighbour rows the element also reaches. "above" flanks the heading + the eyebrow above it and drops the subheading to a full-width row below; "below" flanks the heading + the subheading below it and lifts the eyebrow to a full-width row above. The trailing element rides the flanked row — pair it with layout.trailing.align: "start" to pin it top-right. layout.leading.span has no effect without a leading element.

PreviewCode

Changelog · v2.4

Design tokens, refreshed

June 3, 2026 · 4 min read

New

Changelog · v2.4

Design tokens, refreshed

New

June 3, 2026 · 4 min read

Changelog · v2.4

Design tokens, refreshed

June 3, 2026 · 4 min read

New

---
// GENERATED from packages/demos/banner/leading-span.demo.tsx — edit the source, not this file.
import Banner from "@pindoba/astro-banner";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { Sparkles } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Banner
    layout={{ leading: { span: "all" }, trailing: { align: "start" } }}
    eyebrow="Changelog · v2.4"
    heading="Design tokens, refreshed"
    subheading="June 3, 2026 · 4 min read"
  >
    <Stamp slot="leading" size="lg" shape="square" tone="primary">
      <Sparkles />
    </Stamp>
    <Badge slot="trailing" size="xs" tone="success">
      New
    </Badge>
  </Banner>

  <Banner
    layout={{
      leading: { span: "above" },
      trailing: { align: "start" },
    }}
    eyebrow="Changelog · v2.4"
    heading="Design tokens, refreshed"
    subheading="June 3, 2026 · 4 min read"
  >
    <Stamp slot="leading" size="lg" shape="square" tone="primary">
      <Sparkles />
    </Stamp>
    <Badge slot="trailing" size="xs" tone="success">
      New
    </Badge>
  </Banner>

  <Banner
    layout={{
      leading: { span: "below" },
      trailing: { align: "start" },
    }}
    eyebrow="Changelog · v2.4"
    heading="Design tokens, refreshed"
    subheading="June 3, 2026 · 4 min read"
  >
    <Stamp slot="leading" size="lg" shape="square" tone="primary">
      <Sparkles />
    </Stamp>
    <Badge slot="trailing" size="xs" tone="success">
      New
    </Badge>
  </Banner>
</div>

Changelog · v2.4

Design tokens, refreshed

June 3, 2026 · 4 min read

New

Changelog · v2.4

Design tokens, refreshed

New

June 3, 2026 · 4 min read

Changelog · v2.4

Design tokens, refreshed

June 3, 2026 · 4 min read

New

// GENERATED from packages/demos/banner/leading-span.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/react-banner";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { Sparkles } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

export default function LeadingSpanDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Banner
        layout={{ leading: { span: "all" }, trailing: { align: "start" } }}
        eyebrow="Changelog · v2.4"
        heading="Design tokens, refreshed"
        subheading="June 3, 2026 · 4 min read"
        leading={
          <Stamp size="lg" shape="square" tone="primary">
            <Sparkles />
          </Stamp>
        }
        trailing={
          <Badge size="xs" tone="success">
            New
          </Badge>
        }
      />

      <Banner
        layout={{
          leading: { span: "above" },
          trailing: { align: "start" },
        }}
        eyebrow="Changelog · v2.4"
        heading="Design tokens, refreshed"
        subheading="June 3, 2026 · 4 min read"
        leading={
          <Stamp size="lg" shape="square" tone="primary">
            <Sparkles />
          </Stamp>
        }
        trailing={
          <Badge size="xs" tone="success">
            New
          </Badge>
        }
      />

      <Banner
        layout={{
          leading: { span: "below" },
          trailing: { align: "start" },
        }}
        eyebrow="Changelog · v2.4"
        heading="Design tokens, refreshed"
        subheading="June 3, 2026 · 4 min read"
        leading={
          <Stamp size="lg" shape="square" tone="primary">
            <Sparkles />
          </Stamp>
        }
        trailing={
          <Badge size="xs" tone="success">
            New
          </Badge>
        }
      />
    </div>
  );
}

Changelog · v2.4

Design tokens, refreshed

June 3, 2026 · 4 min read

New

Changelog · v2.4

Design tokens, refreshed

New

June 3, 2026 · 4 min read

Changelog · v2.4

Design tokens, refreshed

June 3, 2026 · 4 min read

New

<script lang="ts">
  // GENERATED from packages/demos/banner/leading-span.demo.tsx — edit the source, not this file.
  import Banner from "@pindoba/svelte-banner";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideSparkles from "@lucide/svelte/icons/sparkles";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Banner
    layout={{ leading: { span: "all" }, trailing: { align: "start" } }}
    eyebrow="Changelog · v2.4"
    heading="Design tokens, refreshed"
    subheading="June 3, 2026 · 4 min read"
  >
    {#snippet leading()}
      <Stamp size="lg" shape="square" tone="primary">
        <LucideSparkles />
      </Stamp>
    {/snippet}
    {#snippet trailing()}
      <Badge size="xs" tone="success">New</Badge>
    {/snippet}
  </Banner>

  <Banner
    layout={{
      leading: { span: "above" },
      trailing: { align: "start" },
    }}
    eyebrow="Changelog · v2.4"
    heading="Design tokens, refreshed"
    subheading="June 3, 2026 · 4 min read"
  >
    {#snippet leading()}
      <Stamp size="lg" shape="square" tone="primary">
        <LucideSparkles />
      </Stamp>
    {/snippet}
    {#snippet trailing()}
      <Badge size="xs" tone="success">New</Badge>
    {/snippet}
  </Banner>

  <Banner
    layout={{
      leading: { span: "below" },
      trailing: { align: "start" },
    }}
    eyebrow="Changelog · v2.4"
    heading="Design tokens, refreshed"
    subheading="June 3, 2026 · 4 min read"
  >
    {#snippet leading()}
      <Stamp size="lg" shape="square" tone="primary">
        <LucideSparkles />
      </Stamp>
    {/snippet}
    {#snippet trailing()}
      <Badge size="xs" tone="success">New</Badge>
    {/snippet}
  </Banner>
</div>

Changelog · v2.4

Design tokens, refreshed

June 3, 2026 · 4 min read

New

Changelog · v2.4

Design tokens, refreshed

New

June 3, 2026 · 4 min read

Changelog · v2.4

Design tokens, refreshed

June 3, 2026 · 4 min read

New

<script setup lang="ts">
// GENERATED from packages/demos/banner/leading-span.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/vue-banner";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', width: '100%' })">
    <Banner
      :layout="{ leading: { span: 'all' }, trailing: { align: 'start' } }"
      eyebrow="Changelog · v2.4"
      heading="Design tokens, refreshed"
      subheading="June 3, 2026 · 4 min read"
    >
      <template #leading>
        <Stamp size="lg" shape="square" tone="primary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-sparkles"
            aria-hidden="true"
          >
            <path
              d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
            />
            <path d="M20 2v4" />
            <path d="M22 4h-4" />
            <circle cx="4" cy="20" r="2" />
          </svg>
        </Stamp>
      </template>
      <template #trailing>
        <Badge size="xs" tone="success">New</Badge>
      </template>
    </Banner>

    <Banner
      :layout="{
        leading: { span: 'above' },
        trailing: { align: 'start' },
      }"
      eyebrow="Changelog · v2.4"
      heading="Design tokens, refreshed"
      subheading="June 3, 2026 · 4 min read"
    >
      <template #leading>
        <Stamp size="lg" shape="square" tone="primary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-sparkles"
            aria-hidden="true"
          >
            <path
              d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
            />
            <path d="M20 2v4" />
            <path d="M22 4h-4" />
            <circle cx="4" cy="20" r="2" />
          </svg>
        </Stamp>
      </template>
      <template #trailing>
        <Badge size="xs" tone="success">New</Badge>
      </template>
    </Banner>

    <Banner
      :layout="{
        leading: { span: 'below' },
        trailing: { align: 'start' },
      }"
      eyebrow="Changelog · v2.4"
      heading="Design tokens, refreshed"
      subheading="June 3, 2026 · 4 min read"
    >
      <template #leading>
        <Stamp size="lg" shape="square" tone="primary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-sparkles"
            aria-hidden="true"
          >
            <path
              d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
            />
            <path d="M20 2v4" />
            <path d="M22 4h-4" />
            <circle cx="4" cy="20" r="2" />
          </svg>
        </Stamp>
      </template>
      <template #trailing>
        <Badge size="xs" tone="success">New</Badge>
      </template>
    </Banner>
  </div>
</template>

Changelog · v2.4

Design tokens, refreshed

June 3, 2026 · 4 min read

New

Changelog · v2.4

Design tokens, refreshed

New

June 3, 2026 · 4 min read

Changelog · v2.4

Design tokens, refreshed

June 3, 2026 · 4 min read

New

// GENERATED from packages/demos/banner/leading-span.demo.tsx — edit the source, not this file.
import { Banner } from "@pindoba/solid-banner";
import { Badge } from "@pindoba/solid-badge";
import { Stamp } from "@pindoba/solid-stamp";
import { stack } from "@pindoba/styled-system/patterns";

export default function LeadingSpanDemo() {
  return (
    <div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Banner
        layout={{ leading: { span: "all" }, trailing: { align: "start" } }}
        eyebrow="Changelog · v2.4"
        heading="Design tokens, refreshed"
        subheading="June 3, 2026 · 4 min read"
        leading={
          <Stamp size="lg" shape="square" tone="primary">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-sparkles"
              aria-hidden="true"
            >
              <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
              <path d="M20 2v4" />
              <path d="M22 4h-4" />
              <circle cx="4" cy="20" r="2" />
            </svg>
          </Stamp>
        }
        trailing={
          <Badge size="xs" tone="success">
            New
          </Badge>
        }
      />

      <Banner
        layout={{
          leading: { span: "above" },
          trailing: { align: "start" },
        }}
        eyebrow="Changelog · v2.4"
        heading="Design tokens, refreshed"
        subheading="June 3, 2026 · 4 min read"
        leading={
          <Stamp size="lg" shape="square" tone="primary">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-sparkles"
              aria-hidden="true"
            >
              <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
              <path d="M20 2v4" />
              <path d="M22 4h-4" />
              <circle cx="4" cy="20" r="2" />
            </svg>
          </Stamp>
        }
        trailing={
          <Badge size="xs" tone="success">
            New
          </Badge>
        }
      />

      <Banner
        layout={{
          leading: { span: "below" },
          trailing: { align: "start" },
        }}
        eyebrow="Changelog · v2.4"
        heading="Design tokens, refreshed"
        subheading="June 3, 2026 · 4 min read"
        leading={
          <Stamp size="lg" shape="square" tone="primary">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-sparkles"
              aria-hidden="true"
            >
              <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
              <path d="M20 2v4" />
              <path d="M22 4h-4" />
              <circle cx="4" cy="20" r="2" />
            </svg>
          </Stamp>
        }
        trailing={
          <Badge size="xs" tone="success">
            New
          </Badge>
        }
      />
    </div>
  );
}

Tone Surface

Banner inherits Panel’s tone surfaces, useful when the banner itself is the component (not wrapped by a card or dialog).

PreviewCode