diff --git a/demo-shell/src/app/app.component.scss b/demo-shell/src/app/app.component.scss
index bdccc4c219..3d0c82987c 100644
--- a/demo-shell/src/app/app.component.scss
+++ b/demo-shell/src/app/app.component.scss
@@ -1,39 +1,3 @@
-.empty-list {
-    .adf-data-table {
-        height: 100%;
-
-        tr:hover, tr:focus {
-            cursor: default;
-        }
-    }
-
-    &__block {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        p {
-            line-height: 0;
-        }
-    }
-
-    &__title {
-        font-size: 18px;
-        font-weight: 600;
-    }
-
-    &__subtitle {
-        font-size: 14px;
-        font-weight: 300;
-    }
-
-    &__block > mat-icon {
-        font-size: 52px;
-        height: 52px;
-        width: 52px;
-    }
-}
-
 router-outlet[name="overlay"] + * {
     width: 100%;
     height: 100%;
@@ -53,7 +17,7 @@ router-outlet[name="overlay"] + * {
             .adf-data-table-cell:first-child,
             .adf-data-table-cell:nth-child(2) {
                 display: table-cell;
-            }            
+            }
         }
     }
 }
diff --git a/demo-shell/src/app/components/trashcan/trashcan.component.html b/demo-shell/src/app/components/trashcan/trashcan.component.html
index bfb1a192b1..38160376d1 100644
--- a/demo-shell/src/app/components/trashcan/trashcan.component.html
+++ b/demo-shell/src/app/components/trashcan/trashcan.component.html
@@ -29,7 +29,6 @@
     <div class="inner-layout__content">
 
         <adf-document-list #documentList
-                           [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
                            currentFolderId="-trashcan-"
                            selectionMode="multiple"
                            [multiselect]="true"
@@ -41,12 +40,12 @@
 
             <empty-folder-content>
                 <ng-template>
-                    <div class="empty-list__block">
-                        <mat-icon>delete</mat-icon>
-                        <p class="empty-list__title">{{ 'TRASHCAN.EMPTY_STATE.TITLE' | translate }}</p>
-                        <p class="empty-list__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
-                        <p class="empty-list__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
-                    </div>
+                    <adf-empty-content
+                        icon="delete"
+                        [title]="'TRASHCAN.EMPTY_STATE.TITLE'">
+                        <p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
+                        <p class="adf-empty-content__text">{{ 'TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
+                    </adf-empty-content>
                 </ng-template>
             </empty-folder-content>
 
diff --git a/docs/core/empty-content.component.md b/docs/core/empty-content.component.md
new file mode 100644
index 0000000000..72b068b0a8
--- /dev/null
+++ b/docs/core/empty-content.component.md
@@ -0,0 +1,54 @@
+---
+Added: v2.4.0
+Status: Active
+Last reviewed:
+---
+
+# Empty Content Component
+
+Provides a generic "Empty Content" UI and can used as a placeholder for components that need to show different content when being empty.
+
+## Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| icon | string | Material Icon to use |
+| title | string | String or Resource Key for the title |
+| subtitle | string | String or Resource Key for the subtitle |
+
+## Examples
+
+```html
+<adf-document-list>
+    <empty-folder-content>
+        <ng-template>
+            <adf-empty-content
+                icon="star_rate"
+                title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
+                subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
+            </adf-empty-folder>
+        </ng-template>
+    </empty-folder-content>
+</adf-document-list>
+```
+
+![Favorites screen](../docassets/images/empty-content-favorites.png)
+
+You can also use multiple lines instead of the subtitle section:
+
+```html
+<adf-document-list>
+    <empty-folder-content>
+        <ng-template>
+            <adf-empty-content
+                icon="delete"
+                title="APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE">
+                <p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
+                <p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
+            </adf-empty-content>
+        </ng-template>
+    </empty-folder-content>
+</adf-document-list>
+```
+
+![Trashcan screen](../docassets/images/empty-content-trashcan.png)
diff --git a/docs/docassets/images/empty-content-favorites.png b/docs/docassets/images/empty-content-favorites.png
new file mode 100644
index 0000000000..8f96f3fed8
Binary files /dev/null and b/docs/docassets/images/empty-content-favorites.png differ
diff --git a/docs/docassets/images/empty-content-trashcan.png b/docs/docassets/images/empty-content-trashcan.png
new file mode 100644
index 0000000000..ce072deb9e
Binary files /dev/null and b/docs/docassets/images/empty-content-trashcan.png differ
diff --git a/lib/core/components/empty-content/empty-content.component.html b/lib/core/components/empty-content/empty-content.component.html
new file mode 100644
index 0000000000..67ac339d12
--- /dev/null
+++ b/lib/core/components/empty-content/empty-content.component.html
@@ -0,0 +1,6 @@
+<div class="adf-empty-content">
+    <mat-icon class="adf-empty-content__icon">{{ icon }}</mat-icon>
+    <p class="adf-empty-content__title">{{ title | translate }}</p>
+    <p class="adf-empty-content__subtitle">{{ subtitle | translate }}</p>
+    <ng-content></ng-content>
+</div>
diff --git a/lib/core/components/empty-content/empty-content.component.scss b/lib/core/components/empty-content/empty-content.component.scss
new file mode 100644
index 0000000000..c7204f72d8
--- /dev/null
+++ b/lib/core/components/empty-content/empty-content.component.scss
@@ -0,0 +1,33 @@
+@mixin adf-empty-content-theme($theme) {
+
+    $config: mat-typography-config();
+    $foreground: map-get($theme, foreground);
+
+    .adf-empty-content {
+        color: mat-color($foreground, text, 0.54);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        &__icon {
+            font-size: mat-font-size($config, display-3);
+            height: mat-font-size($config, display-3) !important;
+            width: mat-font-size($config, display-3) !important;
+        }
+
+        p {
+            line-height: 0;
+        }
+
+        &__title {
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        &__subtitle,
+        &__text {
+            font-size: 14px;
+            font-weight: 300;
+        }
+    }
+}
diff --git a/lib/core/components/empty-content/empty-content.component.ts b/lib/core/components/empty-content/empty-content.component.ts
new file mode 100644
index 0000000000..3667d9cda0
--- /dev/null
+++ b/lib/core/components/empty-content/empty-content.component.ts
@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core';
+
+@Component({
+    selector: 'adf-empty-content',
+    templateUrl: './empty-content.component.html',
+    styleUrls: ['./empty-content.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-empty-content' }
+})
+export class EmptyContentComponent {
+
+    @Input()
+    icon = 'cake';
+
+    @Input()
+    title = '';
+
+    @Input()
+    subtitle = '';
+
+}
diff --git a/lib/core/core.module.ts b/lib/core/core.module.ts
index ed078e7d5c..8b3389e0e2 100644
--- a/lib/core/core.module.ts
+++ b/lib/core/core.module.ts
@@ -80,6 +80,7 @@ import { UploadService } from './services/upload.service';
 import { UserPreferencesService } from './services/user-preferences.service';
 import { SearchConfigurationService } from './services/search-configuration.service';
 import { startupServiceFactory } from './services/startup-service-factory';
+import { EmptyContentComponent } from './components/empty-content/empty-content.component';
 
 export function createTranslateLoader(http: HttpClient, logService: LogService) {
     return new TranslateLoaderService(http, logService);
@@ -161,6 +162,9 @@ export function providers() {
             }
         })
     ],
+    declarations: [
+        EmptyContentComponent
+    ],
     exports: [
         ViewerModule,
         SideBarActionModule,
@@ -188,7 +192,8 @@ export function providers() {
         DataColumnModule,
         DataTableModule,
         TranslateModule,
-        ButtonsMenuModule
+        ButtonsMenuModule,
+        EmptyContentComponent
     ]
 })
 export class CoreModuleLazy {
@@ -230,6 +235,9 @@ export class CoreModuleLazy {
             }
         })
     ],
+    declarations: [
+        EmptyContentComponent
+    ],
     exports: [
         ViewerModule,
         SideBarActionModule,
@@ -257,7 +265,8 @@ export class CoreModuleLazy {
         DataColumnModule,
         DataTableModule,
         TranslateModule,
-        ButtonsMenuModule
+        ButtonsMenuModule,
+        EmptyContentComponent
     ],
     providers: [
         ...providers(),
diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index 7cc4b304a9..d185c16a70 100644
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -1,7 +1,8 @@
 <div
     *ngIf="data" class="full-width"
     [class.adf-data-table-card]="display === 'gallery'"
-    [class.adf-data-table]="display === 'list'">
+    [class.adf-data-table]="display === 'list'"
+    [class.adf-data-table--empty]="isEmpty()">
     <div *ngIf="isHeaderVisible()" class="adf-datatable-header">
         <div class="adf-datatable-row" *ngIf="display === 'list'">
             <!-- Actions (left) -->
diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss
index 1cfc40a7a5..68a1e91ef1 100644
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -14,14 +14,9 @@
     $data-table-selection-color: mat-color($background, 'selected-button') !default;
     $data-table-dividers: 1px solid $data-table-divider-color !default;
     $data-table-row-height: 56px !default;
-    // $data-table-last-row-height: 56px !default;
-    // $data-table-header-height: 56px !default;
     $data-table-column-spacing: 36px !default;
     $data-table-column-padding: $data-table-column-spacing / 2;
-    // $data-table-card-header-height: 64px !default;
-    // $data-table-card-title-top: 20px !default;
     $data-table-card-padding: 24px !default;
-    // $data-table-button-padding-right: 16px !default;
     $data-table-cell-top: $data-table-card-padding / 2;
     $data-table-drag-border: 1px dashed rgb(68, 138, 255);
 
@@ -472,4 +467,21 @@
             }
         }
     }
+
+    .adf-data-table--empty {
+        @include flex-column;
+        justify-content: center;
+        align-items: center;
+
+        .adf-datatable-body {
+            .adf-datatable-row {
+                background-color: mat-color($background, card);
+
+                &:hover, &:focus {
+                    background-color: unset;
+                    cursor: default;
+                }
+            }
+        }
+    }
 }
diff --git a/lib/core/index.ts b/lib/core/index.ts
index f48f9ee3b9..dabfd5a901 100644
--- a/lib/core/index.ts
+++ b/lib/core/index.ts
@@ -35,6 +35,8 @@ export * from './sidenav-layout/index';
 export * from './comments/index';
 export * from './buttons-menu/index';
 
+export * from './components/empty-content/empty-content.component';
+
 export * from './pipes/index';
 export * from './services/index';
 export * from './directives/index';
diff --git a/lib/core/login/components/login.component.scss b/lib/core/login/components/login.component.scss
index 1885e3d2e9..1367bff22a 100644
--- a/lib/core/login/components/login.component.scss
+++ b/lib/core/login/components/login.component.scss
@@ -6,6 +6,10 @@
     $foreground: map-get($theme, foreground);
     $text-color-primary: mat-color($foreground, text);
 
+    .adf-login {
+        @include flex-column;
+    }
+
     .adf-login-content {
         background-size: cover;
         background-position: center;
diff --git a/lib/core/login/components/login.component.ts b/lib/core/login/components/login.component.ts
index 09b34bb1c6..57f47e03ac 100644
--- a/lib/core/login/components/login.component.ts
+++ b/lib/core/login/components/login.component.ts
@@ -48,8 +48,11 @@ enum LoginSteps {
     selector: 'adf-login',
     templateUrl: './login.component.html',
     styleUrls: ['./login.component.scss'],
-    host: { '(blur)': 'onBlur($event)' },
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        'class': 'adf-login',
+        '(blur)': 'onBlur($event)'
+    }
 })
 export class LoginComponent implements OnInit {
 
diff --git a/lib/core/styles/_index.scss b/lib/core/styles/_index.scss
index 3755c43023..1a521cb95b 100644
--- a/lib/core/styles/_index.scss
+++ b/lib/core/styles/_index.scss
@@ -26,6 +26,7 @@
 @import '../comments/comment-list.component';
 @import '../comments/comments.component';
 @import '../sidenav-layout/components/layout-container/layout-container.component';
+@import "../components/empty-content/empty-content.component";
 
 @mixin adf-core-theme($theme) {
     @include adf-colors-theme($theme);
@@ -54,6 +55,7 @@
     @include adf-task-list-comment-list-theme($theme);
     @include adf-task-list-comment-theme($theme);
     @include adf-layout-container-theme($theme);
+    @include adf-empty-content-theme($theme);
 }
 
 
diff --git a/lib/core/styles/_mixins.scss b/lib/core/styles/_mixins.scss
index d7e7525139..2e9e0c28b6 100644
--- a/lib/core/styles/_mixins.scss
+++ b/lib/core/styles/_mixins.scss
@@ -48,3 +48,20 @@
         width: 100%;
     }
 }
+
+@mixin flex-column {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+    min-height: 0;
+}
+
+@mixin flex-row {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+}