Skip to content
STYLESCAPE

Empty State

Examples for the ss-c-empty-state module: what a list, table or search shows when there is nothing to show. Keep the icon decorative (aria-hidden) and say what happened and what to do next in text.

Default

No projects yet

Projects you create or are invited to appear here.

New project
HTML 
<div class="ss-c-empty-state">
            <svg class="ss-c-empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M3 7h6l2 2h10v10H3z"/></svg>
            <h3 class="ss-c-empty-state__title">No projects yet</h3>
            <p class="ss-c-empty-state__description">Projects you create or are invited to appear here.</p>
            <div class="ss-c-empty-state__actions">
                <a class="ss-c-button" href="#new">New project</a>
            </div>
        </div>

Bordered

No results for "bridge 2019"

Check the spelling or remove a filter.

HTML 
<div class="ss-c-empty-state ss-c-empty-state--bordered">
            <svg class="ss-c-empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
            <h3 class="ss-c-empty-state__title">No results for "bridge 2019"</h3>
            <p class="ss-c-empty-state__description">Check the spelling or remove a filter.</p>
            <div class="ss-c-empty-state__actions">
                <button type="button" class="ss-c-button">Clear filters</button>
            </div>
        </div>

Compact, inside a grid

No images in this album

Drop files here to upload.

HTML 
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem">
            <div class="ss-c-empty-state ss-c-empty-state--compact ss-c-empty-state--bordered ss-c-empty-state--wide">
                <svg class="ss-c-empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="4" y="4" width="16" height="16"/><path d="M4 15l4-4 4 4 3-3 5 5"/></svg>
                <h3 class="ss-c-empty-state__title">No images in this album</h3>
                <p class="ss-c-empty-state__description">Drop files here to upload.</p>
            </div>
        </div>