Component

Item

A composable row for lists, cards, and menus. Assemble media, title, description, and actions inside one item, style it as a variant and size, render it as a link or button, and stack items into separated groups.

Media, content & actions

Oak leaves

Taken along the trail in Freiburg, November 2026.

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbButtonComponent, HbItemImports } from '@herbst/ui';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { phosphorDotsThree, phosphorLeaf } from '@ng-icons/phosphor-icons/regular';

@Component({
  selector: 'hb-demo-item-basic',
  imports: [HbItemImports, HbButtonComponent, NgIcon],
  viewProviders: [provideIcons({ phosphorLeaf, phosphorDotsThree })],
  template: `
    <hb-item class="w-full max-w-md" hbVariant="outline">
      <hb-item-media hbVariant="icon">
        <ng-icon name="phosphorLeaf" />
      </hb-item-media>

      <hb-item-content>
        <hb-item-title>Oak leaves</hb-item-title>
        <hb-item-description>
          Taken along the trail in Freiburg, November 2026.
        </hb-item-description>
      </hb-item-content>

      <hb-item-actions>
        <button hb-button hbType="ghost" hbSize="icon" aria-label="More">
          <ng-icon name="phosphorDotsThree" />
        </button>
      </hb-item-actions>
    </hb-item>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoItemBasicComponent {}

Variants, sizes & media

Muted · small

A subdued background for secondary rows.

Outline · large

Image media, roomier padding.

Default · extra small

Interactive group

Black Forest3

Updated November 2026View all

API reference

hb-item

Property	Description	Type	Default
selector	Use as hb-item, or on an a / button element to make the whole row a link or control (adds hover and focus states).	hb-item \| a[hb-item] \| button[hb-item]	—
[hbVariant]	Background and border treatment.	'default' \| 'outline' \| 'muted'	'default'
[hbSize]	Padding and internal gap.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'

Parts

Property	Description	Type	Default
hb-item-media [hbVariant]	Leading media slot. default \| icon (bordered tile) \| image (rounded cover).	'default' \| 'icon' \| 'image'	'default'
hb-item-content	Vertical stack that fills the remaining space; holds title and description.	component	—
hb-item-title / hb-item-description	Primary label and muted, clamped supporting text.	component	—
hb-item-actions	Trailing slot for buttons, icons, or badges.	component	—
hb-item-header / hb-item-footer	Full-width rows above and below the main line, spaced apart.	component	—
hb-item-group / hb-item-separator	Stack items in a column and draw a thin divider between them.	component	—