curved edged labels

Author: BipinKalra

examples/views/events-page.hbs

@@ -132,11 +132,14 @@
       <div class="col-4 pt-5">
         <div class="br-10 label-card">
           <div class="br-10 label-card__head">
-            <div class="label-card__label all-center">
-              <div class="white bold">LIVE WEBINAR</div>
+            <div class="label-card__label">
+              <div class="position-relative all-center h-100">
+                <div class="white bold">LIVE WEBINAR</div>
+              </div>
             </div>
             <img
-              src="https://previews.123rf.com/images/baranq/baranq1603/baranq160300758/53954805-businessman-portrait.jpg" class="label-card__head__cover">
+              src="https://previews.123rf.com/images/baranq/baranq1603/baranq160300758/53954805-businessman-portrait.jpg"
+              class="label-card__head__cover">
           </div>
           <div class="br-10 label-card__foot px-md-5 px-4">
             <div class="label-card__foot__tag s-100x100">
@@ -151,7 +154,7 @@
               <div class="mentor-row__image-container">
                 <img src="https://minio.codingblocks.com/amoeba/4078be4e-72e1-451a-9c4e-9223d2bbcc2c"
                   alt="photo ofRishab Kapoor" class="mentor-row__image-container__mentor-image s-60x60">
-                <div class="mentor-row__text-container">
+                <div class="mentor-row__text-container align-self-center">
                   <div>By</div>
                   <div class="bold">Rishab Kapoor</div>
                 </div>

sass/styles/components/label-card.scss

@@ -20,6 +20,53 @@
     width: 55%;
     top: -40px;
     left: 22.5%;
+
+    & > div {
+      &::after,
+      &::before,
+      & > div::after,
+      & > div::before {
+        content: "";
+        position: absolute;
+        bottom: 0;
+      }
+
+      &::before {
+        background: #e74e4b;
+        left: -10px;
+      }
+
+      &::after {
+        background: #fb8133;
+        right: -10px;
+      }
+
+      &::before,
+      &::after {
+        z-index: 1;
+        width: 10px;
+        height: 10px;
+      }
+
+      & > div {
+        &::before {
+          left: -20px;
+        }
+
+        &::after {
+          right: -20px;
+        }
+
+        &::before,
+        &::after {
+          width: 20px;
+          height: 20px;
+          border-radius: 10px;
+          z-index: 2;
+          background: $white;
+        }
+      }
+    }
   }
 
   &__foot {
@@ -42,4 +89,4 @@
       border-radius: 50%;
     }
   }
-}
+}