item
Flexible list item primitive
Items compose media, content, title, description, and actions.
<div variant="outline" class="item">
<section>
<h3>Item title</h3>
<p>Supporting description.</p>
</section>
</div>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Item</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak>
<ul style="max-width: 32rem">
<li variant="outline" id="outline-item" class="item">
<figure variant="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.75"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
</figure>
<section>
<h3>Profile verified</h3>
<p>Your public display name and email have been confirmed.</p>
</section>
<menu>
<button variant="outline" size="sm">Review</button>
</menu>
</li>
<li variant="muted" size="sm" id="compact-item" class="item">
<section>
<h3>Scheduled reports</h3>
<p>Weekly snapshots are ready for your team.</p>
</section>
<menu>
<span variant="secondary" class="badge">New</span>
</menu>
</li>
<li aria-disabled="true" id="disabled-item" class="item">
<section>
<h3>Archived workspace</h3>
<p>This workspace is retained for audit history.</p>
</section>
<menu>
<button variant="outline" size="sm" disabled>Restore</button>
</menu>
</li>
</ul>
</body>
</html>
Workflows
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Item Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak ng-init="itemState={message:'Ready'}">
<main class="item-workflow-grid" aria-label="Item workflows">
<section data-example="item-demo" class="item-workflow">
<ul>
<li variant="outline" class="item">
<section>
<h3>Basic Item</h3>
<p>A simple item with title and description.</p>
</section>
<menu>
<button
variant="outline"
size="sm"
type="button"
ng-click="itemState.message='Basic action'"
>
Action
</button>
</menu>
</li>
<li variant="outline" size="sm" href="#verified" class="item">
<figure>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 12.75 11.25 15 15 9.75"></path>
<circle cx="12" cy="12" r="9"></circle>
</svg>
</figure>
<section>
<h3>Your profile has been verified.</h3>
</section>
<menu aria-hidden="true">›</menu>
</li>
</ul>
</section>
<section data-example="item-avatar" class="item-workflow">
<ul>
<li variant="outline" class="item">
<figure>
<span class="item-avatar-large avatar"
><img src="../../images/avatars/01.png" alt="Evil Rabbit"
/></span>
</figure>
<section>
<h3>Evil Rabbit</h3>
<p>Last seen 5 months ago</p>
</section>
<menu>
<button
variant="outline"
size="icon-sm"
type="button"
aria-label="Invite Evil Rabbit"
>
+
</button>
</menu>
</li>
<li variant="outline" class="item">
<figure class="item-avatar-stack">
<span class="avatar"
><img
src="../../images/avatars/02.png"
alt="Jordan Lee" /></span
><span class="avatar"
><img src="../../images/avatars/03.png" alt="maxleiter" /></span
><span class="avatar"
><img src="../../images/avatars/01.png" alt="evilrabbit"
/></span>
</figure>
<section>
<h3>No Team Members</h3>
<p>Invite your team to collaborate on this project.</p>
</section>
<menu>
<button
variant="outline"
size="sm"
type="button"
ng-click="itemState.message='Invite opened'"
>
Invite
</button>
</menu>
</li>
</ul>
</section>
<section data-example="item-icon" class="item-workflow">
<article variant="outline" class="item">
<figure variant="icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 9v4m0 4h.01M10.3 3.7 2.5 17.2A2 2 0 0 0 4.2 20h15.6a2 2 0 0 0 1.7-2.8L13.7 3.7a2 2 0 0 0-3.4 0Z"
></path>
</svg>
</figure>
<section>
<h3>Security Alert</h3>
<p>New login detected from unknown device.</p>
</section>
<menu>
<button variant="outline" size="sm" type="button">Review</button>
</menu>
</article>
</section>
<section data-example="item-image" class="item-workflow">
<ul>
<li variant="outline" href="#midnight" class="item">
<figure variant="image">
<img
src="../../images/avatars/01.png"
alt="Midnight City Lights"
/>
</figure>
<section>
<h3>Midnight City Lights - Electric Nights</h3>
<p>Neon Dreams</p>
</section>
<section>
<p>3:45</p>
</section>
</li>
<li variant="outline" href="#coffee" class="item">
<figure variant="image">
<img
src="../../images/avatars/02.png"
alt="Coffee Shop Conversations"
/>
</figure>
<section>
<h3>Coffee Shop Conversations - Urban Stories</h3>
<p>The Morning Brew</p>
</section>
<section>
<p>4:05</p>
</section>
</li>
<li variant="outline" href="#digital" class="item">
<figure variant="image">
<img src="../../images/avatars/03.png" alt="Digital Rain" />
</figure>
<section>
<h3>Digital Rain - Binary Beats</h3>
<p>Cyber Symphony</p>
</section>
<section>
<p>3:30</p>
</section>
</li>
</ul>
</section>
<section
data-example="item-dropdown"
class="item-workflow item-dropdown-workflow"
>
<div ng-dropdown-menu>
<button variant="outline" type="button">
Select <span aria-hidden="true">⌄</span>
</button>
<menu>
<section>
<button ng-click="itemState.message='Selected Jordan Lee'">
<article size="xs" class="item">
<figure>
<span class="avatar"
><img src="../../images/avatars/02.png" alt=""
/></span>
</figure>
<section>
<h3>Jordan Lee</h3>
<p>jordan@example.com</p>
</section>
</article></button
><button ng-click="itemState.message='Selected maxleiter'">
<article size="xs" class="item">
<figure>
<span class="avatar"
><img src="../../images/avatars/03.png" alt=""
/></span>
</figure>
<section>
<h3>maxleiter</h3>
<p>maxleiter@vercel.com</p>
</section>
</article></button
><button ng-click="itemState.message='Selected evilrabbit'">
<article size="xs" class="item">
<figure>
<span class="avatar"
><img src="../../images/avatars/01.png" alt=""
/></span>
</figure>
<section>
<h3>evilrabbit</h3>
<p>evilrabbit@vercel.com</p>
</section>
</article>
</button>
</section>
</menu>
</div>
</section>
<section data-example="item-group" class="item-workflow">
<ul>
<li variant="outline" class="item">
<figure>
<span class="avatar"
><img src="../../images/avatars/02.png" alt="Jordan Lee"
/></span>
</figure>
<section>
<h3>Jordan Lee</h3>
<p>jordan@example.com</p>
</section>
<menu>
<button
variant="ghost"
size="icon-sm"
type="button"
aria-label="Invite Jordan Lee"
>
+
</button>
</menu>
</li>
<li variant="outline" class="item">
<figure>
<span class="avatar"
><img src="../../images/avatars/03.png" alt="maxleiter"
/></span>
</figure>
<section>
<h3>maxleiter</h3>
<p>maxleiter@vercel.com</p>
</section>
<menu>
<button
variant="ghost"
size="icon-sm"
type="button"
aria-label="Invite maxleiter"
>
+
</button>
</menu>
</li>
<li variant="outline" class="item">
<figure>
<span class="avatar"
><img src="../../images/avatars/01.png" alt="evilrabbit"
/></span>
</figure>
<section>
<h3>evilrabbit</h3>
<p>evilrabbit@vercel.com</p>
</section>
<menu>
<button
variant="ghost"
size="icon-sm"
type="button"
aria-label="Invite evilrabbit"
>
+
</button>
</menu>
</li>
</ul>
</section>
<section
data-example="item-header"
class="item-workflow item-workflow-wide"
>
<ul class="item-header-grid">
<li variant="outline" class="item">
<header class="item-header">
<img src="../../images/avatars/01.png" alt="v0-1.5-sm" />
</header>
<section>
<h3>v0-1.5-sm</h3>
<p>Everyday tasks and UI generation.</p>
</section>
</li>
<li variant="outline" class="item">
<header class="item-header">
<img src="../../images/avatars/02.png" alt="v0-1.5-lg" />
</header>
<section>
<h3>v0-1.5-lg</h3>
<p>Advanced thinking or reasoning.</p>
</section>
</li>
<li variant="outline" class="item">
<header class="item-header">
<img src="../../images/avatars/03.png" alt="v0-2.0-mini" />
</header>
<section>
<h3>v0-2.0-mini</h3>
<p>Open Source model for everyone.</p>
</section>
</li>
</ul>
</section>
<section data-example="item-link" class="item-workflow">
<ul>
<li href="#documentation" class="item">
<section>
<h3>Visit our documentation</h3>
<p>Learn how to get started with our components.</p>
</section>
<menu aria-hidden="true">›</menu>
</li>
<li variant="outline" href="#external" class="item">
<section>
<h3>External resource</h3>
<p>Opens in a new tab with security attributes.</p>
</section>
<menu aria-hidden="true">↗</menu>
</li>
</ul>
</section>
<section data-example="item-size" class="item-workflow">
<ul>
<li variant="outline" class="item">
<figure variant="icon">□</figure>
<section>
<h3>Default Size</h3>
<p>The standard size for most use cases.</p>
</section>
</li>
<li variant="outline" size="sm" class="item">
<figure variant="icon">□</figure>
<section>
<h3>Small Size</h3>
<p>A compact size for dense layouts.</p>
</section>
</li>
<li variant="outline" size="xs" class="item">
<figure variant="icon">□</figure>
<section>
<h3>Extra Small Size</h3>
<p>The most compact size available.</p>
</section>
</li>
</ul>
</section>
<section data-example="item-variant" class="item-workflow">
<ul>
<li class="item">
<figure variant="icon">□</figure>
<section>
<h3>Default Variant</h3>
<p>Transparent background with no border.</p>
</section>
</li>
<li variant="outline" class="item">
<figure variant="icon">□</figure>
<section>
<h3>Outline Variant</h3>
<p>Outlined style with a visible border.</p>
</section>
</li>
<li variant="muted" class="item">
<figure variant="icon">□</figure>
<section>
<h3>Muted Variant</h3>
<p>Muted background for secondary content.</p>
</section>
</li>
</ul>
</section>
<section data-example="muted-item-group" class="item-workflow">
<ul>
<li variant="muted" ng-repeat="number in [1,2,3]" class="item">
<section>
<h3>Item {{ number }}</h3>
<p>Item in muted group.</p>
</section>
<menu>
<button variant="outline" size="sm" type="button">Action</button>
</menu>
</li>
</ul>
</section>
<section data-example="outline-item-group" class="item-workflow">
<ul>
<li variant="outline" ng-repeat="number in [1,2,3]" class="item">
<figure variant="icon">□</figure>
<section>
<h3>Item {{ number }}</h3>
<p>Item with icon.</p>
</section>
</li>
</ul>
</section>
<section
data-example="file-upload-list"
class="item-workflow item-workflow-wide"
>
<ul>
<li
size="xs"
class="file-upload-item item"
ng-repeat="file in [{name:'document.pdf',progress:45,time:'2m 30s'},{name:'presentation.pptx',progress:78,time:'45s'},{name:'spreadsheet.xlsx',progress:12,time:'5m 12s'},{name:'image.jpg',progress:100,time:'Complete'}]"
>
<figure variant="icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
></path>
<path d="M14 2v6h6"></path>
</svg>
</figure>
<section>
<h3>{{ file.name }}</h3>
</section>
<section class="file-upload-progress">
<progress
value="{{ file.progress }}"
max="100"
aria-label="Upload progress for {{ file.name }}"
></progress>
</section>
<menu class="file-upload-time">{{ file.time }}</menu>
</li>
</ul>
</section>
<section
data-example="item-rtl"
class="item-workflow"
dir="rtl"
lang="ar"
>
<ul>
<li variant="outline" class="item">
<section>
<h3>عنصر أساسي</h3>
<p>عنصر بسيط يحتوي على عنوان ووصف.</p>
</section>
<menu>
<button variant="outline" size="sm" type="button">إجراء</button>
</menu>
</li>
<li variant="outline" size="sm" href="#verified-rtl" class="item">
<figure>✓</figure>
<section>
<h3>تم التحقق من ملفك الشخصي.</h3>
</section>
<menu aria-hidden="true">‹</menu>
</li>
</ul>
</section>
<output class="item-workflow-output">{{ itemState.message }}</output>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Semantic repeated-content composition.
Anatomy
Root styling selector
.item
Semantic structure
Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
size | Authored | Item density: xs or sm; omit for the default size. |
variant | Authored | Item surface: outline or muted; direct figures additionally accept icon or image. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Semantic repeated-content composition. AngularCSS supplies styling without a runtime directive. Native HTML owns platform behavior; AngularTS owns application values, commands, and authored state.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Prefer semantic landmarks and native elements inside the layout. Any interactive handles or triggers must retain an accessible name and visible focus indicator.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.