Empty state

A centered layout for empty views such as no-results screens or first-run prompts. Contains an optional icon or illustration, title, body, and action buttons. The icon shown here is from Font Awesome.

Default

<div class="ln-empty-state">
  <div class="ln-empty-state__icon">
    <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
  </div>
  <h3 class="ln-empty-state__title">No results found</h3>
  <p class="ln-empty-state__body">Try adjusting your search or filters to find what you're looking for.</p>
  <div class="ln-empty-state__actions">
    <button class="ln-button ln-button--solid ln-button--primary">Clear filters</button>
  </div>
</div>

No results found

Try adjusting your search or filters to find what you're looking for.

Reference

Class	Description	Responsive
`.ln-empty-state`	Centred empty state container	No
`.ln-empty-state__media`	Illustration or image	No
`.ln-empty-state__icon`	Icon element	No
`.ln-empty-state__title`	Heading	No
`.ln-empty-state__body`	Description text	No
`.ln-empty-state__actions`	Action buttons container	No
`.ln-empty-state--compact`	Reduced padding and smaller illustration	No
`.ln-empty-state--sunken`	Sunken background surface	No