I honstly lost of what I did, but its definitly worth it

components/01_Atoms/headline/_headline.scss

@@ -4,7 +4,14 @@
     font-size: 1.7rem;
     padding-top: 0px;
     margin-top: 0px;
-    padding-bottom: 0.2rem;
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+
+    &--main{
+        position: relative;
+        top: 2rem;
+        font-size: 2rem;
+    }
 
     &--inline{
         display: inline;

components/01_Atoms/headline/headline.config.json

@@ -1,5 +1,14 @@
 {
     "context": {
         "headline": "Hello here is my headline"
-    }
+    },
+    "title": "Headline",
+    "variants": [
+        {
+            "name": "main",
+            "context": {
+                "modifier": "--main"
+            }
+        }
+    ]
 }

components/01_Atoms/headline/headline.hbs

@@ -1 +1 @@
-<h1 class="LP-Headline">{{headline}}</h1>
+<h1 class="LP-Headline LP-Headline{{modifier}}">{{headline}}</h1>