empty
Empty states compose media, title, description, and action content parts.
<section class="empty">
<header>
<figure variant="icon"></figure>
<h2>No projects yet</h2>
<p>Create your first project.</p>
</header>
</section>
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 Empty</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 data-example="empty-demo">
<section class="visual-example empty" aria-live="polite">
<header>
<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="M3.75 9.75h16.5m-13.5 0V6.75A2.25 2.25 0 0 1 9 4.5h6a2.25 2.25 0 0 1 2.25 2.25v3m-12 0 1.2 8.4A2.25 2.25 0 0 0 8.68 20.25h6.64a2.25 2.25 0 0 0 2.23-2.1l1.2-8.4"
/>
</svg>
</figure>
<h2>No Projects Yet</h2>
<p>
You haven't created any projects yet. Get started by creating your
first project.
</p>
</header>
<section>
<div class="row">
<button>Create Project</button>
<button variant="outline">Import Project</button>
</div>
</section>
<a class="empty-learn-more" href="#learn-more">
Learn More
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M7 17 17 7M7 7h10v10"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
</section>
</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 Empty 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="emptyQuery='';emptyAction='Ready'"
>
<main class="empty-workflow-grid" aria-label="Empty state workflows">
<section data-example="empty-avatar" class="empty-workflow empty">
<header>
<figure>
<span class="empty-avatar-large avatar"
><img src="../../images/avatars/01.png" alt="Jane Doe" /><span
>JD</span
></span
>
</figure>
<h2>User Offline</h2>
<p>
This user is currently offline. Leave a message or try again later.
</p>
</header>
<section>
<button
size="sm"
type="button"
ng-click="emptyAction='Message queued'"
>
Leave Message
</button>
</section>
</section>
<section data-example="empty-avatar-group" class="empty-workflow empty">
<header>
<figure class="empty-avatar-group">
<span class="avatar"
><img src="../../images/avatars/01.png" alt="Jane" /></span
><span class="avatar"
><img src="../../images/avatars/02.png" alt="Alex" /></span
><span class="avatar"
><img src="../../images/avatars/03.png" alt="Sam"
/></span>
</figure>
<h2>No Team Members</h2>
<p>Invite your team to collaborate on this project.</p>
</header>
<section>
<button
size="sm"
type="button"
ng-click="emptyAction='Invite opened'"
>
+ Invite Members
</button>
</section>
</section>
<section
data-example="empty-background"
class="empty-workflow empty-muted-demo empty"
>
<header>
<figure variant="icon">!</figure>
<h2>No Notifications</h2>
<p>You're all caught up. New notifications will appear here.</p>
</header>
<section>
<button
variant="outline"
type="button"
ng-click="emptyAction='Refreshed'"
>
Refresh
</button>
</section>
</section>
<section
data-example="empty-card"
class="empty-workflow empty-card-demo empty"
>
<header>
<figure variant="icon">□</figure>
<h2>No projects yet</h2>
<p>
You haven't created any projects yet. Create your first project.
</p>
</header>
<section>
<div class="row">
<button type="button" ng-click="emptyAction='Create project'">
Create project</button
><button
variant="outline"
type="button"
ng-click="emptyAction='Import project'"
>
Import project
</button>
</div>
<a href="#learn">Learn more</a>
</section>
</section>
<section data-example="empty-input-group" class="empty-workflow empty">
<header>
<h2>404 - Not Found</h2>
<p>The page you're looking for doesn't exist. Try searching below.</p>
</header>
<section>
<div class="input-group">
<input
ng-model="emptyQuery"
placeholder="Try searching for pages..."
aria-label="Search missing pages"
/>
<div>⌕</div>
<div align="inline-end">
<kbd>/</kbd>
</div>
</div>
<p>Need help? <a href="#support">Contact support</a></p>
</section>
</section>
<section
data-example="empty-outline"
class="empty-workflow empty-outline-demo empty"
>
<header>
<figure variant="icon">☁</figure>
<h2>Cloud Storage Empty</h2>
<p>Upload files to access them anywhere.</p>
</header>
<section>
<button
variant="outline"
size="sm"
type="button"
ng-click="emptyAction='Upload opened'"
>
Upload Files
</button>
</section>
</section>
<section
data-example="empty-rtl"
class="empty-workflow empty"
dir="rtl"
lang="ar"
>
<header>
<figure variant="icon">□</figure>
<h2>لا توجد مشاريع بعد</h2>
<p>لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.</p>
</header>
<section>
<div class="row">
<button type="button" ng-click="emptyAction='إنشاء مشروع'">
إنشاء مشروع</button
><button
variant="outline"
type="button"
ng-click="emptyAction='استيراد مشروع'"
>
استيراد مشروع
</button>
</div>
</section>
</section>
<output class="empty-workflow-output">
{{ emptyAction }} · {{ emptyQuery }}
</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 empty-state content.
Anatomy
Root styling selector
.empty
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 |
|---|---|---|
variant | Authored | Optional direct figure presentation: icon; omit for the default media treatment. |
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 empty-state content. 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.