diff --git a/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss b/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss
index 1ee6230428..9a22a099ab 100644
--- a/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss
+++ b/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss
@@ -23,8 +23,8 @@
 
     .component-icon {
       margin-bottom: 1rem;
-      width: 4rem;
       height: 4rem;
+      width: auto;
     }
 
     .component-name {
diff --git a/src/playground/styles/example-helpers.scss b/src/playground/styles/example-helpers.scss
index 3f38224bcf..cb603dd7e8 100644
--- a/src/playground/styles/example-helpers.scss
+++ b/src/playground/styles/example-helpers.scss
@@ -17,26 +17,26 @@
     justify-content: space-around;
   }
 
-  .example-items-row {
-    margin-top: -1rem;
+  .example-items-rows {
     display: flex;
-    flex-direction: row;
+    flex-wrap: wrap;
     align-items: flex-start;
+    margin: -0.5rem;
 
     > * {
-      margin-top: 1rem;
-      margin-right: 1rem;
-
-      &:last-child {
-        margin-right: 0;
-      }
+      margin: 0.5rem;
     }
   }
 
+  .example-last-child-no-b-margin > :last-child {
+    margin-bottom: 0;
+  }
+
   .example-items-col {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+
     & > * {
       margin-bottom: 1rem;
 
diff --git a/src/playground/with-layout/alert/alert-accents.component.html b/src/playground/with-layout/alert/alert-accents.component.html
index af384d0772..7bda1e6691 100644
--- a/src/playground/with-layout/alert/alert-accents.component.html
+++ b/src/playground/with-layout/alert/alert-accents.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-last-child-no-b-margin">
     <nb-alert accent="primary">Primary. You have been successfully authenticated!</nb-alert>
     <nb-alert accent="success">Success. You have been successfully authenticated!</nb-alert>
     <nb-alert accent="info">Info. You have been successfully authenticated!</nb-alert>
diff --git a/src/playground/with-layout/alert/alert-colors.component.html b/src/playground/with-layout/alert/alert-colors.component.html
index a536924635..3bc9c782c6 100644
--- a/src/playground/with-layout/alert/alert-colors.component.html
+++ b/src/playground/with-layout/alert/alert-colors.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-last-child-no-b-margin">
     <nb-alert status="primary">Primary. You have been successfully authenticated!</nb-alert>
     <nb-alert status="success">Success. You have been successfully authenticated!</nb-alert>
     <nb-alert status="info">Info. You have been successfully authenticated!</nb-alert>
diff --git a/src/playground/with-layout/alert/alert-outline.component.html b/src/playground/with-layout/alert/alert-outline.component.html
index fcccc3ddea..a2b2d16da5 100644
--- a/src/playground/with-layout/alert/alert-outline.component.html
+++ b/src/playground/with-layout/alert/alert-outline.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-last-child-no-b-margin">
     <nb-alert outline="primary">Primary. You have been successfully authenticated!</nb-alert>
     <nb-alert outline="success">Success. You have been successfully authenticated!</nb-alert>
     <nb-alert outline="info">Info. You have been successfully authenticated!</nb-alert>
diff --git a/src/playground/with-layout/alert/alert-showcase.component.html b/src/playground/with-layout/alert/alert-showcase.component.html
index fff247868e..1825b81207 100644
--- a/src/playground/with-layout/alert/alert-showcase.component.html
+++ b/src/playground/with-layout/alert/alert-showcase.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-last-child-no-b-margin">
     <nb-alert status="success" closable>You have been successfully authenticated!</nb-alert>
   </nb-card-body>
 </nb-card>
diff --git a/src/playground/with-layout/alert/alert-sizes.component.html b/src/playground/with-layout/alert/alert-sizes.component.html
index 9b49f6387e..02367aff10 100644
--- a/src/playground/with-layout/alert/alert-sizes.component.html
+++ b/src/playground/with-layout/alert/alert-sizes.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-last-child-no-b-margin">
     <nb-alert status="primary" size="tiny">Tiny. You have been successfully authenticated!</nb-alert>
     <nb-alert status="primary" size="small">Small. You have been successfully authenticated!</nb-alert>
     <nb-alert status="primary" size="medium">Medium. You have been successfully authenticated!</nb-alert>
diff --git a/src/playground/with-layout/button/button-colors.component.html b/src/playground/with-layout/button/button-colors.component.html
index 1635e1746d..3122bf001c 100644
--- a/src/playground/with-layout/button/button-colors.component.html
+++ b/src/playground/with-layout/button/button-colors.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Colors</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton status="primary">Primary</button>
     <button nbButton status="success">Success</button>
     <button nbButton status="info">Info</button>
diff --git a/src/playground/with-layout/button/button-full-width.component.html b/src/playground/with-layout/button/button-full-width.component.html
index 0652b095e7..32c03eed52 100644
--- a/src/playground/with-layout/button/button-full-width.component.html
+++ b/src/playground/with-layout/button/button-full-width.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Full Width</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton fullWidth status="primary">Primary</button>
     <button nbButton fullWidth status="success">Success</button>
     <button nbButton fullWidth status="info">Info</button>
diff --git a/src/playground/with-layout/button/button-hero.component.html b/src/playground/with-layout/button/button-hero.component.html
index 81cde2cd95..ef89c14280 100644
--- a/src/playground/with-layout/button/button-hero.component.html
+++ b/src/playground/with-layout/button/button-hero.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Hero</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton hero status="primary">Primary</button>
     <button nbButton hero status="success">Success</button>
     <button nbButton hero status="info">Info</button>
diff --git a/src/playground/with-layout/button/button-icon.component.html b/src/playground/with-layout/button/button-icon.component.html
index eef0585556..97e482f515 100644
--- a/src/playground/with-layout/button/button-icon.component.html
+++ b/src/playground/with-layout/button/button-icon.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button with Icon</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton status="primary"><nb-icon icon="star"></nb-icon>Primary</button>
     <button nbButton status="success">Success<nb-icon icon="star"></nb-icon></button>
     <button nbButton status="danger"><nb-icon icon="star"></nb-icon></button>
diff --git a/src/playground/with-layout/button/button-outline.component.html b/src/playground/with-layout/button/button-outline.component.html
index 7e950ea432..7fb4ba6abe 100644
--- a/src/playground/with-layout/button/button-outline.component.html
+++ b/src/playground/with-layout/button/button-outline.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Outline</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton outline status="primary">Primary</button>
     <button nbButton outline status="success">Success</button>
     <button nbButton outline status="info">Info</button>
diff --git a/src/playground/with-layout/button/button-shapes.component.html b/src/playground/with-layout/button/button-shapes.component.html
index b14c93528d..2f29a35444 100644
--- a/src/playground/with-layout/button/button-shapes.component.html
+++ b/src/playground/with-layout/button/button-shapes.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Shapes</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton shape="rectangle" status="primary">Rectangle Hero</button>
     <button nbButton shape="semi-round" status="info">Semi-round Outline</button>
     <button nbButton shape="round" size="small" status="success">Round Small</button>
diff --git a/src/playground/with-layout/button/button-showcase.component.html b/src/playground/with-layout/button/button-showcase.component.html
index 8d8a8c4f57..cefb41fb46 100644
--- a/src/playground/with-layout/button/button-showcase.component.html
+++ b/src/playground/with-layout/button/button-showcase.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton>Active</button>
     <button nbButton disabled>Disabled</button>
   </nb-card-body>
diff --git a/src/playground/with-layout/button/button-sizes.component.html b/src/playground/with-layout/button/button-sizes.component.html
index 98d8cab4fa..d35636ec8b 100644
--- a/src/playground/with-layout/button/button-sizes.component.html
+++ b/src/playground/with-layout/button/button-sizes.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Sizes</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton size="tiny">tiny</button>
     <button nbButton size="small">small</button>
     <button nbButton size="medium">medium</button>
diff --git a/src/playground/with-layout/button/button-types.component.html b/src/playground/with-layout/button/button-types.component.html
index 5ab43708ef..3067fed249 100644
--- a/src/playground/with-layout/button/button-types.component.html
+++ b/src/playground/with-layout/button/button-types.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Elements</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button (click)="onClick()" nbButton>Button</button>
     <input (click)="onClick()" nbButton type="submit" value="Input Submit"/>
     <input (click)="onClick()" nbButton type="button" value="Input Button"/>
diff --git a/src/playground/with-layout/button/button-types.component.ts b/src/playground/with-layout/button/button-types.component.ts
index 3236ac0fe7..c1609ac5b0 100644
--- a/src/playground/with-layout/button/button-types.component.ts
+++ b/src/playground/with-layout/button/button-types.component.ts
@@ -12,8 +12,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   templateUrl: './button-types.component.html',
 })
 export class ButtonTypesComponent {
-
-
   onClick() {
     return false;
   }
diff --git a/src/playground/with-layout/icon/icon-colors.component.html b/src/playground/with-layout/icon/icon-colors.component.html
index aa3e78839b..2ebd99cb30 100644
--- a/src/playground/with-layout/icon/icon-colors.component.html
+++ b/src/playground/with-layout/icon/icon-colors.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-items-rows">
     <nb-icon icon="heart-outline" status="primary"></nb-icon>
     <nb-icon icon="heart-outline" status="info"></nb-icon>
     <nb-icon icon="heart-outline" status="success"></nb-icon>
diff --git a/src/playground/with-layout/icon/icon-showcase.component.html b/src/playground/with-layout/icon/icon-showcase.component.html
index 9033bceb67..8c59c4c9ec 100644
--- a/src/playground/with-layout/icon/icon-showcase.component.html
+++ b/src/playground/with-layout/icon/icon-showcase.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-items-rows">
     <nb-icon icon="heart-outline"></nb-icon>
     <nb-icon icon="star"></nb-icon>
   </nb-card-body>
diff --git a/src/playground/with-layout/input/input-showcase.component.ts b/src/playground/with-layout/input/input-showcase.component.ts
index 8a4de3bcc0..96c2794683 100644
--- a/src/playground/with-layout/input/input-showcase.component.ts
+++ b/src/playground/with-layout/input/input-showcase.component.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   template: `
     <nb-card>
-      <nb-card-body class="example-items-row">
+      <nb-card-body class="example-items-rows">
         <input type="text" nbInput placeholder="Text field">
         <input type="text" nbInput placeholder="Disabled Text field" disabled>
       </nb-card-body>
diff --git a/src/playground/with-layout/progress-bar/progress-bar-interactive.component.html b/src/playground/with-layout/progress-bar/progress-bar-interactive.component.html
index 7482b19370..eb79f3bf33 100644
--- a/src/playground/with-layout/progress-bar/progress-bar-interactive.component.html
+++ b/src/playground/with-layout/progress-bar/progress-bar-interactive.component.html
@@ -2,11 +2,11 @@
   <nb-card-body>
     <div class="container">
       <nb-actions size="medium">
-        <nb-action icon="arrowhead-down-outline" (click)="setValue(value - 25)"></nb-action>
+        <nb-action icon="minus-outline" (click)="setValue(value - 25)"></nb-action>
       </nb-actions>
       <nb-progress-bar [value]="value" [status]="status" [displayValue]="true"></nb-progress-bar>
       <nb-actions size="medium">
-        <nb-action icon="arrowhead-up-outline" (click)="setValue(value + 25)"></nb-action>
+        <nb-action icon="plus-outline" (click)="setValue(value + 25)"></nb-action>
       </nb-actions>
     </div>
   </nb-card-body>
diff --git a/src/playground/with-layout/spinner/spinner-button.component.ts b/src/playground/with-layout/spinner/spinner-button.component.ts
index 385dca3b63..987334ee6a 100644
--- a/src/playground/with-layout/spinner/spinner-button.component.ts
+++ b/src/playground/with-layout/spinner/spinner-button.component.ts
@@ -10,7 +10,7 @@ import { Component } from '@angular/core';
   selector: 'nb-app-spinner-button',
   template: `
      <nb-card accent="primary">
-      <nb-card-body class="example-items-row">
+      <nb-card-body class="example-items-rows">
           <button nbButton status="success" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
             Download
diff --git a/src/playground/with-layout/toastr/toastr-destroy-by-click.component.ts b/src/playground/with-layout/toastr/toastr-destroy-by-click.component.ts
index 0bbff32ffb..baa6d0dbe9 100644
--- a/src/playground/with-layout/toastr/toastr-destroy-by-click.component.ts
+++ b/src/playground/with-layout/toastr/toastr-destroy-by-click.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -12,17 +12,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
-
 export class ToastrDestroyByClickComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  className = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 
diff --git a/src/playground/with-layout/toastr/toastr-duration.component.ts b/src/playground/with-layout/toastr/toastr-duration.component.ts
index 9464dcef09..d0e5f49876 100644
--- a/src/playground/with-layout/toastr/toastr-duration.component.ts
+++ b/src/playground/with-layout/toastr/toastr-duration.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -13,17 +13,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
-
 export class ToastrDurationComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  className = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 
diff --git a/src/playground/with-layout/toastr/toastr-icon.component.ts b/src/playground/with-layout/toastr/toastr-icon.component.ts
index ca9480f24f..7d7555433a 100644
--- a/src/playground/with-layout/toastr/toastr-icon.component.ts
+++ b/src/playground/with-layout/toastr/toastr-icon.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -13,17 +13,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
-
 export class ToastrIconComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  className = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 
diff --git a/src/playground/with-layout/toastr/toastr-positions.component.ts b/src/playground/with-layout/toastr/toastr-positions.component.ts
index a7ead0b54b..a81eb2c482 100644
--- a/src/playground/with-layout/toastr/toastr-positions.component.ts
+++ b/src/playground/with-layout/toastr/toastr-positions.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -18,17 +18,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
-
 export class ToastrPositionsComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  classes = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 
diff --git a/src/playground/with-layout/toastr/toastr-prevent-duplicates.component.ts b/src/playground/with-layout/toastr/toastr-prevent-duplicates.component.ts
index ba8c8d3386..52adbd16cb 100644
--- a/src/playground/with-layout/toastr/toastr-prevent-duplicates.component.ts
+++ b/src/playground/with-layout/toastr/toastr-prevent-duplicates.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -12,14 +12,14 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
 export class ToastrPreventDuplicatesComponent {
+
+  @HostBinding('class')
+  classes = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 
diff --git a/src/playground/with-layout/toastr/toastr-showcase.component.ts b/src/playground/with-layout/toastr/toastr-showcase.component.ts
index ef274da439..1da297dfd5 100644
--- a/src/playground/with-layout/toastr/toastr-showcase.component.ts
+++ b/src/playground/with-layout/toastr/toastr-showcase.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -12,16 +12,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
 export class ToastrShowcaseComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  classes = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 
diff --git a/src/playground/with-layout/toastr/toastr-statuses.component.ts b/src/playground/with-layout/toastr/toastr-statuses.component.ts
index 59f521b3c4..eedc5d8a30 100644
--- a/src/playground/with-layout/toastr/toastr-statuses.component.ts
+++ b/src/playground/with-layout/toastr/toastr-statuses.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -16,17 +16,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
-
 export class ToastrStatusesComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  classes = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }