@net7/components 3.6.0 → 3.6.1-rc.1

package/lib/components/hero/hero.d.ts

@@ -23,6 +23,10 @@ export interface HeroData {
      * main text displayed in the hero section
     */
     title: string;
+    /**
+     * optional text displayed above the title
+     */
+    preTitle?: string;
     /**
     * additional text under the title
     */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net7/components",
-  "version": "3.6.0",
+  "version": "3.6.1-rc.1",
   "dependencies": {
     "apexcharts": "^3.8.5",
     "d3": "^7.1.1",

package/src/lib/styles/components/_hero.scss

@@ -12,7 +12,7 @@
  * This component is used for hero section at the top of the homepage or
  *  for call to action sections (usually in homepage)
  */
- 
+
 /* ------------------------------------ *\
    #HERO
 \* ------------------------------------ */
@@ -46,7 +46,7 @@
     }
 
     &__title {
-        margin: 0 0 $space*2 0;
+        margin: 0 0 $space * 2 0;
         font-family: $font-family-headings;
         font-size: $font-size-xxl;
         font-weight: $font-weight-bold;
@@ -54,8 +54,17 @@
         color: $color-text-inverse;
     }
 
+    &__pre-title {
+        margin: 0 0 $space * 2 0;
+        font-family: $font-family-main;
+        font-size: $font-size-m;
+        font-weight: $font-weight-normal;
+        line-height: 1.1;
+        color: $color-text-inverse;
+    }
+
     &__text {
-        margin: 0 0 $space*2 0;
+        margin: 0 0 $space * 2 0;
         font-family: $font-family-main;
         font-size: $font-size-l;
         font-weight: $font-weight-normal;
@@ -76,7 +85,7 @@
 
     &__input {
         width: 100%;
-        margin: 0 0 $space*2 0;
+        margin: 0 0 $space * 2 0;
         box-sizing: border-box;
     }
 
@@ -94,7 +103,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #WITH-IMAGE
 \* ------------------------------------ */
@@ -123,7 +131,7 @@
         align-items: center;
         justify-content: center;
         @include flex-item-width($hero-image-text-width);
-        padding: $space*3 0;
+        padding: $space * 3 0;
     }
 
     .n7-hero__image {
@@ -135,48 +143,42 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
-@media all and (max-width: $hero-content-width + $space*4) {
-
+@media all and (max-width: calc(#{$hero-content-width} + #{$space}*4)) {
     .n7-hero {
         &__content {
-            padding: 0 $space*2;
+            padding: 0 $space * 2;
         }
     }
-
 }
 
 @media all and (max-width: $breakpoint-laptop) {
-
     /* With image */
     .n7-hero.has-image {
         .n7-hero__content {
             grid-template-columns: 1fr 220px;
         }
     }
-
 }
 
 @media all and (max-width: $breakpoint-mobile) {
-
     .n7-hero {
         height: auto;
-        padding: $space*2 0;
+        padding: $space * 2 0;
 
         &__text-wrapper {
             height: auto;
         }
-        
+
         &__title {
-            margin: 0 0 $space*2 0;
+            margin: 0 0 $space * 2 0;
             font-size: $font-size-l;
         }
-    
+
         &__text {
-            margin: 0 0 $space*2 0;
+            margin: 0 0 $space * 2 0;
             font-size: $font-size-m;
         }
     }
@@ -196,12 +198,11 @@
         .n7-hero__image-wrapper {
             order: 1;
             padding: 0;
-            margin-bottom: $space*2;
+            margin-bottom: $space * 2;
         }
     }
-
 }
 
 /* Retina */
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+}