empty-results

no-result

Start by adding your products

You don’t have products yet. You can add products one by one or import them from an Excel sheet.

Copy

Edit

<div class="empty-state"> <span class="empty-state__icon"> <i class="icomoon-search"></i> </span> <h2 class="text-md gray-900">Start by adding your products</h2> <p class="text-sm gray-500">You don’t have products yet. You can add products one by one or import them from an Excel sheet.</p> <div class="empty-state__actions"> <button class="base-btn secondary-gray-btn">Clear search</button> <button class="base-btn"><i class="icomoon-plus"></i> Add Product</button> </div> </div>

emptystate

Start by adding your products

You don’t have products yet. You can add products one by one or import them from an Excel sheet.

Copy

Edit

<div class="empty-state"> <img src="atomic-core/img/empty-state.png" alt="empty state"> <h2 class="text-md gray-900">Start by adding your products</h2> <p class="text-sm gray-500">You don’t have products yet. You can add products one by one or import them from an Excel sheet.</p> <div class="empty-state__actions"> <button class="base-btn"><i class="icomoon-plus"></i> Add Product</button> </div> </div>

Copy

Edit

/* scss/empty-results/_emptystate.scss */ .empty-state{ display: flex; flex-direction: column; align-items: center; justify-content: center; .empty-state__icon{ width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #E3EBFC; color: #1D5CF3; border-radius: 50%; border: 8px solid #F1F5FE; margin-bottom: 10px; } img{ margin-bottom: 5px; } p{ margin-bottom: 19px; width: 30%; text-align: center; @media (max-width: 991px) { width: 100%; } } .empty-state__actions{ display: flex; align-items: center; justify-content: space-evenly; .base-btn { &.secondary-gray-btn{ margin-#{$end}: 7px; padding: 5px 42.5px; } } .base-btn{ padding: 5px 30px; .icomoon-plus{ margin-#{$end}: 10px; } } @media (max-width: 991px) { // flex-direction: column; width: 100%; button{ // width: 100%; &.secondary-gray-btn{ margin-#{$end}: 0 !important; } } } } }