Item
A versatile component that you can use to display any content, such as a title, description, and actions.
About
The Item component is a flexible building block for creating lists, feeds, or grids of content. It provides consistent spacing and typography for common patterns like titles, descriptions, and call-to-actions.
Installation
Run the following command to install the item component:
Usage
Default
A basic item with title and description.
Access to basic features and community support.
Variants
Different visual styles like outline and muted, with custom border colors.
The standard look for regular content items.
A bordered style that emphasizes the item boundaries.
Subtle appearance for less important background information.
This action might lead to data loss. Please proceed with caution.
Size
Supports different sizes for compact or standard layouts.
The standard size suitable for most list views.
With Icons & Media
Integrating icons and specialized media containers for visual emphasis.
New login detected from an unrecognized device in Berlin, Germany.
Version 2.4.0 is now available with improved performance.
Avatar
Using hlm-avatar within hlmItemMedia for user-centric items.
Last seen 5 months ago
Invite your team to collaborate on this project.
Image
Render items as media objects with thumbnails and status indicators.
Grouped Items
Combine multiple items into a single container using hlmItemGroup.
spartan@ng.com
maxleiter@vercel.com
evilrabbit@vercel.com
Header & Images
Using hlmItemHeader to display rich media like project thumbnails.
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open Source model for everyone.
Link
Items can be rendered as anchor elements for navigation.
Dropdown Integration
Using items within dropdown menus for rich selection options.
API Reference
Helm API
Item components use a modular set of directives to build complex layouts.
| Class / Directive | Selector | Description |
|---|---|---|
| HlmItem | [hlmItem] | Main container for the item. Supports variant and size. |
| HlmItemContent | [hlmItemContent] | Main body area for text content. |
| HlmItemTitle | [hlmItemTitle] | Styled title element. |
| HlmItemDescription | [hlmItemDescription] | Styled description element. |
| HlmItemMedia | [hlmItemMedia] | Container for icons or small images. |
| HlmItemActions | [hlmItemActions] | Area for action buttons or links. |