Team, by department · Klarhimmel UI

Install

npx shadcn add @klarhimmel/team-departments

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import TeamDepartments from '@/components/klarhimmel/blocks/team-departments';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <TeamDepartments props={{
          "eyebrow": "Team",
          "title": "12 people in four teams",
          "description": "Spread over Göteborg, Stockholm and a few kitchens. Most of us have worked in hotels.",
          "departments": [
            {
              "name": "Product",
              "members": [
                {
                  "name": "Priya Nair",
                  "role": "Head of product"
                },
                {
                  "name": "Maja Lund",
                  "role": "Design lead"
                },
                {
                  "name": "Tobias Rydén",
                  "role": "Product designer"
                }
              ]
            },
            {
              "name": "Engineering",
              "members": [
                {
                  "name": "Oskar Wahl",
                  "role": "CTO"
                },
                {
                  "name": "Ines Carvalho",
                  "role": "Backend"
                },
                {
                  "name": "Jonas Vik",
                  "role": "Frontend"
                },
                {
                  "name": "Sofie Berg",
                  "role": "Infrastructure"
                }
              ]
            },
            {
              "name": "Customers",
              "members": [
                {
                  "name": "Leo Strand",
                  "role": "Head of success"
                },
                {
                  "name": "Amina Yusuf",
                  "role": "Support"
                },
                {
                  "name": "Karl Eklund",
                  "role": "Onboarding"
                }
              ]
            },
            {
              "name": "Company",
              "members": [
                {
                  "name": "Elin Sandberg",
                  "role": "CEO"
                },
                {
                  "name": "Greta Holm",
                  "role": "Finance"
                }
              ]
            }
          ],
          "hiring": {
            "label": "See open roles",
            "href": "/careers"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/team-departments';

Also called

team/departments

Category: The people behind it.

Notes

When to use it

Lists a larger company as names and roles in columns under department headings, with no portraits. When you have eight people or fewer and want faces, `team-grid` or `team-list` fits better.

Writing for it

- Give each department a short name of up to 40 characters, such as Product or Customers. The name becomes an h3 and the column's accessible label. - A department takes one to eight members and the block takes two to four departments. Put the biggest team first, since the columns read left to right. - Keep the role to a plain job title within 60 characters. The title line can carry the headcount, as in the default '12 people in four teams'.

Watch out for

The optional hiring link only renders when its label is filled, so clearing the label removes the link entirely. Column count follows the number of departments: with two, the grid stays at two columns at any width, so a short list of departments can look sparse.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import TeamDepartments from '@/components/klarhimmel/blocks/team-departments';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <TeamDepartments props={{
          "eyebrow": "Team",
          "title": "12 people in four teams",
          "description": "Spread over Göteborg, Stockholm and a few kitchens. Most of us have worked in hotels.",
          "departments": [
            {
              "name": "Product",
              "members": [
                {
                  "name": "Priya Nair",
                  "role": "Head of product"
                },
                {
                  "name": "Maja Lund",
                  "role": "Design lead"
                }
              ]
            },
            {
              "name": "Engineering",
              "members": [
                {
                  "name": "Oskar Wahl",
                  "role": "CTO"
                },
                {
                  "name": "Ines Carvalho",
                  "role": "Backend"
                }
              ]
            }
          ],
          "hiring": {
            "label": "See open roles",
            "href": "/careers"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Team'`	Text, up to 60 characters.
`title`	`string`	`'12 people in four teams'`	Text, up to 120 characters.
`description`	`string`	`'Spread over Göteborg, Stockholm and…'`	Text, up to 300 characters.
`departments`	`{ name, members }[]`	`4 items`	List of 2 to 4. Each item: name, members.
`hiring`	`Link`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.