feat: add ul

packages/base/Resources/Public/Icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 6L9 17L4 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/base/Resources/Public/Scss/abstracts/_icons.scss

@@ -17,26 +17,28 @@
   margin-top: 0.125em;
 }
 
+
 .ci-instagram::before {
   mask-image: url(../Icons/instagram.svg);
 }
-
 .ci-linkedin::before {
   mask-image: url(../Icons/linkedin.svg);
   width: 0.9em;
   height: 0.9em;
 }
-
 .ci-facebook::before {
   mask-image: url(../Icons/facebook.svg);
 }
+
 .ci-arrow-down::before {
   mask-image: url(../Icons/arrow-down.svg);
 }
 .ci-arrow-up-right::before {
   mask-image: url(../Icons/arrow-up-right.svg);
 }
-
+.ci-check::before {
+  mask-image: url(../Icons/check.svg);
+}
 .ci-email::before {
   mask-image: url(../Icons/email.svg);
 }

packages/base/Resources/Public/Scss/components/_text.scss

@@ -1,5 +1,5 @@
-$marker-size: 1.5rem;
-$gap-y: 2rem;
+$marker-size: 1.5em;
+$gap-y: 2em;
 
 ol {
   @apply list-none m-0 p-0;
@@ -7,7 +7,7 @@ ol {
 
   > li {
     @apply relative;
-    padding-left: calc(#{$marker-size} + .5rem);
+    padding-left: calc(#{$marker-size} + .5em);
     margin-bottom: $gap-y;
     counter-increment: step;
 
@@ -15,7 +15,7 @@ ol {
     &::before {
       content: counter(step, decimal-leading-zero);
       position: absolute;
-      top: .2rem;
+      top: .2em;
       left: 0;
       @apply text-primary font-bold text-2xl leading-none;
     }
@@ -24,7 +24,7 @@ ol {
     &::after {
       content: "";
       position: absolute;
-      top: calc(#{$marker-size} + .5rem);
+      top: calc(#{$marker-size} + .5em);
       bottom: -$gap-y;              // extend past the li’s bottom margin
       left: calc(#{$marker-size} / 2);
       transform: translateX(-50%);
@@ -41,3 +41,18 @@ ol {
     }
   }
 }
+
+ul {
+  @apply list-none m-0 p-0;
+
+  > li {
+    @apply relative pl-8 mb-4; // Adjust padding-left based on icon size + desired gap
+
+    &::before {
+      @extend .ci; // Inherit base icon styles
+      @extend .ci-check; // Use the check icon
+      @apply absolute left-0 top-1 text-primary; // Position and color the icon
+      // Adjust 'top' value as needed for vertical alignment
+    }
+  }
+}