docs: card layout story indents higlight

src/blocks/CardLayout/__stories__/CardLayout.stories.scss

@@ -0,0 +1,72 @@
+@import '../../../../styles/variables.scss';
+@import '../../../../styles/mixins';
+
+@mixin pseudo($content) {
+    background: repeating-linear-gradient(
+        135deg,
+        #fadae4,
+        #fadae4 10px,
+        #f0b4c6 10px,
+        #f0b4c6 20px
+    );
+    content: $content;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+}
+
+@mixin pseudoTop($size, $textSize) {
+    &::before {
+        @include pseudo('top #{$textSize} (#{$size})');
+        top: -$size;
+        height: $size;
+    }
+}
+
+@mixin pseudoBottom($size, $textSize) {
+    &::after {
+        @include pseudo('bottom #{$textSize} (#{$size})');
+        bottom: 0;
+        height: $size;
+    }
+}
+
+.pc-block-base {
+    &_indentTop {
+        &_xs {
+            @include pseudoTop($indentXS, 'XS');
+        }
+        &_s {
+            @include pseudoTop($indentSM, 'S');
+        }
+        &_m {
+            @include pseudoTop($indentM, 'M');
+        }
+        &_l {
+            @include pseudoTop($indentL, 'L');
+        }
+        &_xl {
+            @include pseudoTop($indentXL, 'XL');
+        }
+    }
+
+    &_indentBottom {
+        &_xs {
+            @include pseudoBottom($indentXS, 'XS');
+        }
+        &_s {
+            @include pseudoBottom($indentSM, 'S');
+        }
+        &_m {
+            @include pseudoBottom($indentM, 'M');
+        }
+        &_l {
+            @include pseudoBottom($indentL, 'L');
+        }
+        &_xl {
+            @include pseudoBottom($indentXL, 'XL');
+        }
+    }
+}

src/blocks/CardLayout/__stories__/CardLayout.stories.tsx

@@ -8,6 +8,8 @@ import CardLayout from '../CardLayout';
 
 import data from './data.json';
 
+import './CardLayout.stories.scss';
+
 export default {
     title: 'Blocks/CardLayout',
     component: CardLayout,