Close #2736

Author: kkartunov

src/shared/components/Contentful/ContentBlock/index.jsx

@@ -15,6 +15,7 @@ import cardTheme from './themes/card.scss';
 import TCO19Theme from './themes/TCO19.scss';
 import zurichTheme from './themes/zurich.scss';
 import generalTheme from './themes/general.scss';
+import blobCard from './themes/blobCard.scss';
 
 const THEMES = {
   Default: defaultTheme,
@@ -24,6 +25,7 @@ const THEMES = {
   TCO19: TCO19Theme,
   Zurich: zurichTheme,
   General: generalTheme,
+  'Blob Card': blobCard,
 };
 
 /* Loads content block background asset. */

src/shared/components/Contentful/ContentBlock/themes/blobCard.scss

@@ -0,0 +1,140 @@
+@import "~styles/mixins";
+
+.contentWrapper {
+  background-color: #0ab88a;
+  border-radius: 10px;
+  box-shadow: 0 10px 22px 0 rgba(0, 0, 0, 0.25);
+  width: 413px;
+  flex-direction: column;
+  padding: 0;
+}
+
+.container {
+  display: flex;
+  flex: 1;
+  justify-content: flex-end;
+  margin: 5px;
+  padding: 0;
+}
+
+.content {
+  padding: 17px 40px 30px 40px;
+  color: $tc-white;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: "Barlow", Helvetica, Arial, sans-serif;
+    color: $tc-white;
+  }
+
+  h1 {
+    font-size: 80px;
+    font-weight: 600;
+    line-height: 74px;
+
+    @include xs-to-sm {
+      font-size: 42px;
+      font-weight: 600;
+      line-height: 38px;
+    }
+  }
+
+  h2 {
+    font-size: 60px;
+    font-weight: 500;
+    line-height: 58px;
+
+    @include xs-to-sm {
+      font-size: 36px;
+      font-weight: 500;
+    }
+  }
+
+  h3 {
+    font-size: 48px;
+    font-weight: 500;
+    line-height: 50px;
+
+    @include xs-to-sm {
+      font-size: 31px;
+      font-weight: 500;
+      line-height: 33px;
+    }
+  }
+
+  h4 {
+    font-size: 34px;
+    font-weight: 500;
+    line-height: 38px;
+
+    @include xs-to-sm {
+      font-size: 25px;
+      font-weight: 500;
+      line-height: 27px;
+    }
+  }
+
+  h5 {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 26px;
+
+    @include xs-to-sm {
+      font-size: 21px;
+      font-weight: 600;
+      line-height: 25px;
+    }
+  }
+
+  h6 {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 26px;
+    letter-spacing: 0.3px;
+
+    @include xs-to-sm {
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 22px;
+    }
+  }
+
+  p {
+    font-family: "Roboto", Helvetica, Arial, sans-serif;
+    color: $tc-white;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 26px;
+
+    @include xs-to-sm {
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 30px;
+    }
+
+    strong {
+      font-weight: bold;
+    }
+  }
+
+  button {
+    margin: 10px 5px 0 0 !important;
+  }
+}
+
+.image {
+  flex: 1;
+  max-height: 225px;
+  margin: 0;
+
+  img {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+    max-width: 413px;
+  }
+}