CSSN'T Components 1.0

web_asset

Header

Top page header with actions/branding.

Header Examples

Copy-ready examples with live previews.

Basic usage

Header container with left slot (sideButton) and brand slot.

Live preview

cssnt

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14

Basic header

import Header from "@/packages/ui/src/_components/header/Header";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";
import { Title } from "@/packages/ui/src/_components/text/title/Title";

export default function Example() {
  return (
    <Header
      variant="primary"
      height="64px"
      width="100%"
      zIndex={50}
      sideButton={<Button variant="transparent">Menu</Button>}
      brand={<Title size="h4">cssnt</Title>}
    />
  );
}

Slots (sideButton / brand)

You can provide both slots, only one, or none.

Live preview

Header has 2 slots: sideButton (left) and brand (center/brand area).
Both slots

Brand

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
Only brand

Brand only

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
Only sideButton
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
Empty header (no slots)
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14

Slots

import Header from "@/_components/header/Header";

export default function Example() {
  return (
    <>
      <Header variant="white" sideButton={<button>Menu</button>} brand={<span>Brand</span>} />
      <Header variant="white" brand={<span>Brand only</span>} />
      <Header variant="white" sideButton={<button>Back</button>} />
      <Header variant="white" />
    </>
  );
}

Variants gallery

Variant maps to `cssnt-header--*` classes (colors/tonal surfaces).

Live preview

variant="white"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="black"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="primary"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="secondary"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="tertiary"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="info"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="success"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="warning"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="danger"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="primary-tonal"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="secondary-tonal"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="tertiary-tonal"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="info-tonal"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="success-tonal"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="warning-tonal"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
variant="danger-tonal"

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14

All variants

import Header from "@/_components/header/Header";

export default function Example() {
  return (
    <>
      <Header variant="primary" />
      <Header variant="primary-tonal" />
      <Header variant="success" />
      <Header variant="success-tonal" />
      {/* ... */}
    </>
  );
}

Sizing (height / width) + zIndex

Use inline styles to control layout sizing and layering.

Live preview

height sets the CSS variable --_h via inline style. width and zIndex are also inline styles.

48px height

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14

80px height

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14

Fixed width (320px)

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14

height + width + zIndex

import Header from "@/packages/ui/src/_components/header/Header";

export default function Example() {
  return (
    <Header
      variant="secondary-tonal"
      height="48px"
      width="100%"
      zIndex={10}
    />
  );
}

Custom styles

Add extra inline styling for padding/borders/shadows.

Live preview

customStyles merges into the header inline styles (use it for padding, position, background, etc).

Custom padding + border

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14

customStyles

import Header from "@/packages/ui/src/_components/header/Header";

export default function Example() {
  return (
    <Header
      variant="white"
      height="64px"
      customStyles={{
        paddingInline: 16,
        borderBottom: "1px solid rgba(0,0,0,0.10)",
      }}
    />
  );
}

Interactive playground

Quick way to test combinations (variant + height) in the docs.

Live preview

variant
height

Header

Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14

Playground

import { useState } from "react";
import Header from "@/packages/ui/src/_components/header/Header";

type HeaderVariant = "white" | "primary" | "secondary-tonal" | "danger" | "info-tonal";

export default function Example() {
  const [variant, setVariant] = useState<HeaderVariant>("white");

  return (
    <Header
      variant={variant}
      height="56px"
      width="100%"
      sideButton={<button>Menu</button>}
      brand={<span>Header</span>}
    />
  );
}

On this page

Header Props

Header — Props
PropTypeRequiredDefaultDescription
variant"white" | "black" | "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "info" | "primary-tonal" | "secondary-tonal" | "tertiary-tonal" | "success-tonal" | "warning-tonal" | "danger-tonal" | "info-tonal"NoundefinedVisual style class appended from `variantClasses` (`cssnt-header--*`). If omitted, only the base `cssnt-header` class is applied.
sideButtonReact.ReactNodeNoundefinedLeft slot (commonly a button/icon button). Rendered inside `cssnt-header__side`.
brandReact.ReactNodeNoundefinedBrand slot (logo/text). Rendered inside `cssnt-header__brand`.
heightstringNo"64px" (SCSS default)Sets CSS variable `--_h` via inline style (used by your SCSS to size the header).
widthstringNoundefinedInline `width` style (e.g. `"100%"`, `"var(--layout-w)"`).
zIndexnumberNoundefinedInline `z-index` style.
customStylesReact.CSSPropertiesNoundefinedInline styles merged into the header. Note: `width`, `zIndex`, and `--_h` are applied after `customStyles` and will override any colliding keys.
classNamestringNoundefinedExtra class names appended to the root.