import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
import * as stories from "./item.stories";
```ts
import { ItemModule } from "@bitwarden/components";
```
# Item
`` is a horizontal card that contains one or more interactive actions.
It is a generic container that can be used for either standalone content, an alternative to tables,
or to list nav links.
## Primary Content
The primary content of an item is supplied by `bit-item-content`.
### Content Types
The content can be a button, anchor, or static container.
```html
Hi, I am a link. I'm just static :(
```
### Content Slots
`bit-item-content` contains the following slots to help position the content:
| Slot | Description |
| ------------------ | --------------------------------------------------- |
| default | primary text or arbitrary content; fan favorite |
| `slot="secondary"` | supporting text; under the default slot |
| `slot="start"` | commonly an icon or avatar; before the default slot |
| `slot="end"` | commonly an icon; after the default slot |
- Note: There is also an `end` slot within `bit-item` itself. Place
[interactive secondary actions](#secondary-actions) there, and place non-interactive content (such
as icons) in `bit-item-content`
```html
```
## Secondary Actions
Secondary interactive actions can be placed in the item through the `"end"` slot, outside of
`bit-item-content`.
Each action must be wrapped by ``.
Actions are commonly icon buttons or badge buttons.
```html
```
## Item Groups
Groups of items can be associated by wrapping them in the ``.
### A11y
Keyboard nav is currently disabled due to a bug when used within a virtual scroll viewport.
Item groups utilize arrow-based keyboard navigation
([further reading here](https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/#kbd_label)).
Use `aria-label` or `aria-labelledby` to give groups an accessible name.
```html
.........
```
### Virtual Scrolling