Item
Item (`<pura-item>`) is a native web component that builds a flex row with media on the left, a center column for the title and description, and actions on the right. Use it to build lists, settings, notifications, or any structured row of content. When marked as clickable, it behaves like a button, with role, focus, and keyboard activation (Enter/Space).
Preview
<pura-item bordered>
<span slot="media">📁</span>
<span slot="title">Documents</span>
Files and folders shared with the team
<button slot="actions">Open</button>
</pura-item>
<pura-item hover clickable title="Notifications">
<span slot="media">🔔</span>
Receive alerts by email and push
<span slot="actions">3</span>
</pura-item>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
title | string | — | Convenience text for the title (the "title" slot takes priority over it). |
hover | boolean | false | Applies a subtle background when hovering over the item. |
bordered | boolean | false | Adds a border, radius, and subtle elevation around the item. |
clickable | boolean | false | Makes the item interactive: pointer cursor, role="button", and keyboard activation. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/item.js"></script>import "./pura/lib/item.js";