Item

An item lays out one entry in a row: media at the start, a title with a description in the middle, and actions at the end. Items of the same kind stack in a group, so users can scan a list and act on a single entry.

UsageCopy Anchor Link

import {
	Item,
	ItemContent,
	ItemDescription,
	ItemTitle,
} from "@biem/ui/components/ui/item";

export function ItemDefault() {
	return (
		<div className="w-full max-w-sm">
			<Item>
				<ItemContent>
					<ItemTitle>Transfer 4821</ItemTitle>
					<ItemDescription>12 cases from the warehouse to the store</ItemDescription>
				</ItemContent>
			</Item>
		</div>
	);
}

ExamplesCopy Anchor Link

OutlineCopy Anchor Link

On a busy page, a single entry needs a clear edge to read as one unit, such as a notice between a chart and a table. With variant set to "outline", the item draws that edge, so users see at once where the entry begins and ends.

MutedCopy Anchor Link

Supporting information should stay present without competing with the entries users act on, such as the opening hours of a store. Set to "muted", variant sets the item apart from the page through a calm surface instead of a border, so users read it as context rather than as a task.

Extra SmallCopy Anchor Link

Menus and narrow panels hold many entries in little room. There, size set to "xs" shrinks the spacing of the item and the text of its description, so users scan a long list with little scrolling.

PreviewCode

Sparkling water 1.5 l

12 cases arrive on Tuesday

SmallCopy Anchor Link

Side panels and longer lists show many entries at once, while each entry should still be easy to read. An item with size set to "sm" shows a smaller image in its media, and a group of such items moves them closer together, so more entries fit into view while the text keeps its size.

PreviewCode

Sparkling water 1.5 l

12 cases arrive on Tuesday

Default SizeCopy Anchor Link

Most lists in the body of a page, such as the open orders of a store, need no density of their own. Without another value, size stays at "default", which gives media and text their full room and keeps lists at the same scale across every product.

PreviewCode

Sparkling water 1.5 l

12 cases arrive on Tuesday

Default MediaCopy Anchor Link

Some media already brings a size of its own, such as another component of the system. With variant left at "default", ItemMedia keeps that size and adds no background of its own, so the media appears exactly as users know it from elsewhere in the product.

Icon MediaCopy Anchor Link

An icon tells users the kind of an entry before they read it, for example whether it concerns stock, a price or a task. Set to "icon", variant gives every icon in ItemMedia the same size, unless an icon sets a size of its own, so no icon in a list draws more attention than another.

Image MediaCopy Anchor Link

Products are often recognized faster by their picture than by their name. For such media, variant set to "image" crops every picture to fill the same frame, whatever its proportions, and the frame follows the size of the item, so users compare products at a glance.

PreviewCode

Apple juice 1 l

4 cases left in the store

With ActionsCopy Anchor Link

Many entries call for a next step, such as approving a transfer or correcting a count. Placed in ItemActions, these actions stay with the entry they belong to, so users act on it right where they read it.

With HeaderCopy Anchor Link

Context that applies to the whole entry, such as the store it belongs to or the supplier who sent it, helps users place the entry before they read it. Inside ItemHeader, that context comes ahead of the media, the content and the actions, so it frames everything that follows.

With FooterCopy Anchor Link

Details that complete an entry rarely need to be read first, such as the person responsible or the time of the last change. Gathered in ItemFooter, they follow the media, the content and the actions, so the title and the description keep the attention of users.

GroupCopy Anchor Link

Entries of the same kind belong together, such as the tasks of a shift or the suppliers of a store. Wrapped in ItemGroup, they form one list for users and for assistive technology alike. With size set to "sm" or "xs" on its items, the group also moves them closer together to match their density.

Group with SeparatorCopy Anchor Link

In a long list, items without a border of their own can run into each other. Between two items, ItemSeparator marks where one entry ends and the next begins, for the eye as well as for screen readers, so users keep their place while they scan.

As LinkCopy Anchor Link

Often an entry leads to a page of its own, such as the details of an order. Through render, the item becomes a real link, so the whole entry turns into one target and users can open the page in a new tab or share its address.

API ReferenceCopy Anchor Link

ItemCopy Anchor Link

ItemMediaCopy Anchor Link

ItemContentCopy Anchor Link

ItemContent stacks the title and the description and takes the free width of the item. It renders a div and has no props of its own.

ItemTitleCopy Anchor Link

ItemTitle names the entry. It renders a div and has no props of its own.

ItemDescriptionCopy Anchor Link

ItemDescription adds supporting text below the title and cuts it off after two lines. It renders a p and has no props of its own.

ItemActionsCopy Anchor Link

ItemActions holds the actions of the item in a row. It renders a div and has no props of its own.

ItemHeaderCopy Anchor Link

ItemHeader holds a row that spans the full width of the item above the media, the content and the actions. It renders a div and has no props of its own.

ItemFooterCopy Anchor Link

ItemFooter holds a row that spans the full width of the item below the media, the content and the actions. It renders a div and has no props of its own.

ItemGroupCopy Anchor Link

ItemGroup stacks items in a column and marks the group as a list for assistive technology. It renders a div and has no props of its own.

ItemSeparatorCopy Anchor Link