Header

ds-ml-css/components/header.scss

+/* Header */
+
+header {
+  display: flex;
+  flex: 1;
+  flex-flow: wrap;
+  align-items: center;
+  gap: 5px 32px;
+  padding: 0 48px;
+  box-shadow: 0px 6px 18px 0px rgba(0, 0, 18, 0.08);
+  .logo {
+    width: 200px;
+    height: 200px;
+  }
+  a {
+    display: flex;
+    font-size: var(--ml-medium-font-size);
+    color: var(--ml-header-links);
+    border-bottom: 4px solid var(--ml-header-background);
+    text-decoration: none;
+    padding: 20px 0px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    &:hover {
+      border-bottom: 4px solid var(--ml-header-hover);
+    }
+    &.selected {
+      border-bottom: 4px solid var(--ml-header-selected);
+      font-weight: bold;
+    }
+  }
+}

ds-ml-css/ds-ml-color-var.scss

@@ -113,7 +113,7 @@
 
   /* FOOTER BACKGROUND */
   --ml-footer-background-color: var(--ml-n950);
-  --ml-footer-links-color:var(--ml-n000);
+  --ml-footer-links-color: var(--ml-n000);
 }
 
 *[dark] {
@@ -251,5 +251,5 @@
 
   /* FOOTER BACKGROUND */
   --ml-footer-background-color: var(--ml-n000);
-  --ml-footer-links-color:var(--ml-n950);
+  --ml-footer-links-color: var(--ml-n950);
 }

ds-ml-css/ds-ml.scss

@@ -6,6 +6,7 @@
 @use 'components/accordion.scss';
 @use 'components/badge.scss';
 @use 'components/button.scss';
+@use 'components/header.scss';
 @use 'components/input.scss';
 @use 'components/radio-button-checkbox.scss';
 @use 'components/footer.scss';