fix(card): make two smaller cards same height as one large

src/app/playground-components.ts

@@ -303,6 +303,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'CardWithoutBodyComponent',
         name: 'Card Without Body',
       },
+      {
+        path: 'card-sizes-combinations.component',
+        link: '/card/card-sizes-combinations.component',
+        component: 'CardSizesCombinationsComponent',
+        name: 'Card Sizes Combinations',
+      },
     ],
   },
   {

src/framework/theme/components/card/card.component.ts

@@ -108,6 +108,9 @@ export class NbCardFooterComponent {
  * as well as combine it with `status`:
  * @stacked-example(Accent Card, card/card-accents.component)
  *
+ * Cards of smaller sizes could be combined and put on the same row with a bigger card so they have the same heights.
+ * @stacked-example(Card sizes combinations, card/card-sizes-combinations.component)
+ *
  * @additional-example(Multiple Sizes, card/card-sizes.component)
  *
  * @styles

src/framework/theme/styles/themes/_mapping.scss

@@ -45,12 +45,12 @@ $eva-mapping: (
   card-header-danger-background-color: color-danger-default,
   card-header-danger-text-color: text-control-color,
 
-  card-height-tiny: 6rem,
-  card-height-small: 21rem,
-  card-height-medium: 28.5rem,
-  card-height-large: 36rem,
-  card-height-giant: 43.5rem,
-  card-margin-bottom: 1.5rem,
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
 
   card-scrollbar-color: scrollbar-color,
   card-scrollbar-background-color: scrollbar-background-color,

src/playground/with-layout/card/card-routing.module.ts

@@ -13,6 +13,7 @@ import { CardShowcaseComponent } from './card-showcase.component';
 import { CardSizesComponent } from './card-sizes.component';
 import { CardTestComponent } from './card-test.component';
 import { CardWithoutBodyComponent } from './card-without-body.component';
+import { CardSizesCombinationsComponent } from './card-sizes-combinations.component';
 
 const routes: Route[] = [
   {
@@ -43,6 +44,10 @@ const routes: Route[] = [
     path: 'card-without-body.component',
     component: CardWithoutBodyComponent,
   },
+  {
+    path: 'card-sizes-combinations.component',
+    component: CardSizesCombinationsComponent,
+  },
 ];
 
 @NgModule({

src/playground/with-layout/card/card-sizes-combinations.component.html

@@ -0,0 +1,82 @@
+<div class="card-row">
+  <div class="card-col">
+    <nb-card size="tiny">
+      <nb-card-header>Tiny card</nb-card-header>
+    </nb-card>
+    <nb-card size="tiny">
+      <nb-card-header>Tiny card</nb-card-header>
+    </nb-card>
+  </div>
+  <div class="card-col">
+    <nb-card size="medium">
+      <nb-card-header>Medium card</nb-card-header>
+    </nb-card>
+  </div>
+</div>
+
+<div class="card-row">
+  <div class="card-col">
+    <nb-card size="tiny">
+      <nb-card-header>Tiny card</nb-card-header>
+    </nb-card>
+    <nb-card size="small">
+      <nb-card-header>Small card</nb-card-header>
+    </nb-card>
+  </div>
+  <div class="card-col">
+    <nb-card size="large">
+      <nb-card-header>Large card</nb-card-header>
+    </nb-card>
+  </div>
+</div>
+
+<div class="card-row">
+  <div class="card-col">
+    <nb-card size="tiny">
+      <nb-card-header>Tiny card</nb-card-header>
+    </nb-card>
+    <nb-card size="medium">
+      <nb-card-header>Medium card</nb-card-header>
+    </nb-card>
+  </div>
+  <div class="card-col">
+    <nb-card size="giant">
+      <nb-card-header>Giant card</nb-card-header>
+    </nb-card>
+  </div>
+</div>
+
+<div class="card-row">
+  <div class="card-col">
+    <nb-card size="tiny">
+      <nb-card-header>Tiny card</nb-card-header>
+    </nb-card>
+    <nb-card size="tiny">
+      <nb-card-header>Tiny card</nb-card-header>
+    </nb-card>
+    <nb-card size="tiny">
+      <nb-card-header>Tiny card</nb-card-header>
+    </nb-card>
+  </div>
+  <div class="card-col">
+    <nb-card size="giant">
+      <nb-card-header>Giant card</nb-card-header>
+    </nb-card>
+  </div>
+</div>
+
+<div class="card-row">
+  <div class="card-col">
+    <nb-card size="small">
+      <nb-card-header>Small card</nb-card-header>
+    </nb-card>
+    <nb-card size="small">
+      <nb-card-header>Small card</nb-card-header>
+    </nb-card>
+  </div>
+  <div class="card-col">
+    <nb-card size="giant">
+      <nb-card-header>Giant card</nb-card-header>
+    </nb-card>
+  </div>
+</div>

src/playground/with-layout/card/card-sizes-combinations.component.scss

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  max-height: 25rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.card-row {
+  display: flex;
+  margin: 0 -0.5rem;
+}
+
+.card-col {
+  flex: 1 0 calc(50% - 1rem);
+  margin: 0 0.5rem;
+}

src/playground/with-layout/card/card-sizes-combinations.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './card-sizes-combinations.component.html',
+  styleUrls: ['./card-sizes-combinations.component.scss'],
+})
+export class CardSizesCombinationsComponent {}

src/playground/with-layout/card/card.module.ts

@@ -15,6 +15,7 @@ import { CardShowcaseComponent } from './card-showcase.component';
 import { CardSizesComponent } from './card-sizes.component';
 import { CardTestComponent } from './card-test.component';
 import { CardWithoutBodyComponent } from './card-without-body.component';
+import { CardSizesCombinationsComponent } from './card-sizes-combinations.component';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { CardWithoutBodyComponent } from './card-without-body.component';
     CardSizesComponent,
     CardTestComponent,
     CardWithoutBodyComponent,
+    CardSizesCombinationsComponent,
   ],
   imports: [
     CommonModule,