Componente

Item

Uma linha componível para listas, cards e menus. Monte mídia, título, descrição e ações dentro de um item, estilize-o com uma variante e tamanho, renderize-o como link ou botão, e empilhe itens em grupos separados.

Mídia, conteúdo e ações

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 {}

Variantes, tamanhos e mídia

Muted · small

A subdued background for secondary rows.

Outline · large

Image media, roomier padding.

Default · extra small

Grupo interativo

Black Forest3

Updated November 2026View all

Referência de API

hb-item

Propriedade	Descrição	Tipo	Padrão
selector	Use como hb-item, ou em um elemento a / button para tornar a linha inteira um link ou controle (adiciona estados de hover e foco).	hb-item \| a[hb-item] \| button[hb-item]	—
[hbVariant]	Tratamento de fundo e borda.	'default' \| 'outline' \| 'muted'	'default'
[hbSize]	Padding e espaçamento interno.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'

Parts

Propriedade	Descrição	Tipo	Padrão
hb-item-media [hbVariant]	Slot de mídia à frente. default \| icon (bloco com borda) \| image (cover arredondado).	'default' \| 'icon' \| 'image'	'default'
hb-item-content	Pilha vertical que preenche o espaço restante; contém título e descrição.	component	—
hb-item-title / hb-item-description	Rótulo primário e texto de apoio esmaecido e truncado.	component	—
hb-item-actions	Slot ao final para botões, ícones ou badges.	component	—
hb-item-header / hb-item-footer	Linhas de largura total acima e abaixo da linha principal, com espaçamento entre extremos.	component	—
hb-item-group / hb-item-separator	Empilha itens numa coluna e desenha um divisor fino entre eles.	component	—