# nord-item > Item is a flexible, composable row used to display a piece of content such as > a person, a file or a setting. Combine it with Item Media, > Item Content, Item Title, > Item Description and Item Actions > to build rich list rows. Stack several together with Item Group. > > To make a whole Item act as a link, wrap it in an <a> element. The row > highlights on hover when wrapped this way. ## Usage This section includes guidelines for designers and developers about the usage of this component in different contexts. Item is a composable row. Combine it with its parts to build list rows: - [Item Media](/components/item-media/) for a leading icon, avatar or image. - [Item Content](/components/item-content/) wrapping an [Item Title](/components/item-title/) and an [Item Description](/components/item-description/). - [Item Actions](/components/item-actions/) for trailing controls. - [Item Header](/components/item-header/) and [Item Footer](/components/item-footer/) for full-width rows. - [Item Group](/components/item-group/) and [Item Separator](/components/item-separator/) to stack several items as a list. ```html Inbox You have 3 unread messages. View ``` ### Clickable items To make a whole item act as a link, wrap it in an `` element. The row highlights on hover and shows a focus ring when the link is focused. ```html Your profile ``` > **Do:** - Use Item to present a single, self-contained piece of content such as a person, file or setting. - Group related items with [Item Group](/components/item-group/) so assistive technology announces them as a list. - Keep the [Item Title](/components/item-title/) concise and put supporting text in the [Item Description](/components/item-description/). - Wrap an item in an `` element when the entire row should be a link. > **Don't:** - Don’t place interactive controls inside an item that is itself wrapped in a link, as nested interactive elements are not accessible. - Don’t use Item for long-form content, it is intended for compact rows. - Don’t omit an accessible label on icon-only buttons placed in [Item Actions](/components/item-actions/). ## Examples ### Demo ```html Basic Item A simple item with title and description. Action Your profile has been verified. ``` ### Variant ```html Default Variant Transparent background with no border. Outline Variant Outlined style with a visible border. Muted Variant Muted background for secondary content. ``` ### Size ```html Default Size The standard size for most use cases. Small Size A compact size for dense layouts. Extra Small Size The most compact size available. ``` ### Icon ```html
Security Alert New login detected from unknown device. Review
``` ### Avatar ```html Laura Williams Last seen 5 months ago No team members Invite your team to collaborate on this project. Invite ``` ### Image ```html
Bella Bella - Golden Retriever Annual checkup 09:30 Milo Milo - Domestic Shorthair Vaccination 11:00 Luna Luna - Holland Lop Dental cleaning 14:15
``` ### Group ```html Laura Williams laura.williams@nordhealth.com Erik Johansson erik.johansson@nordhealth.com Sofia Bergström sofia.bergstrom@nordhealth.com ``` ### Header ```html
Bella Bella Golden Retriever · 3 yrs Charlie Charlie Beagle · 5 yrs Daisy Daisy Labrador · 2 yrs
``` ### Link ```html Visit our documentation Learn how to get started with our components. External resource Opens in a new tab with security attributes. ``` ### Dropdown ```html Select Laura Williams laura.williams@nordhealth.com Erik Johansson erik.johansson@nordhealth.com Sofia Bergström sofia.bergstrom@nordhealth.com ``` ### Overview ```html
Basic Item A simple item with title and description. Action
``` ### Avatar Single ```html Laura Williams Last seen 5 months ago ``` ### Group Basic ```html Laura Williams laura.williams@nordhealth.com Anne Williams anne.williams@nordhealth.com ``` ## API Reference ### Properties - **variant** (`'default' | 'outline' | 'muted'`, default: `'default'`) — The visual style of the item. - default has a transparent background and no border. - outline adds a visible border. - muted uses a subtle filled background for secondary content. - **size** (`'xs' | 's' | 'm'`, default: `'s'`) — The size of the item, controlling its padding and gap. ### Slots - **(default)** — Default slot for the item parts (media, content, actions, header, footer). ### CSS Custom Properties - `--n-item-gap` — Controls the spacing between the item parts, using our spacing tokens. - `--n-item-padding` — Controls the inner padding of the item, using our spacing tokens. - `--n-item-border-radius` (default: `var(--n-border-radius-s)`) — Controls how rounded the corners are.