Added PageComponents

src/styles/components/post/simple-header.css

@@ -0,0 +1,87 @@
+@layer components.blocks {
+  .simple-header {
+    @mixin border-t var(--border-hairline), solid, var(--color-border-subtle);
+    @mixin border-b var(--border-hairline), solid, var(--color-border-normal);
+
+    color: var(--color-text-primary);
+    background-color: var(--color-surface-base);
+  }
+
+  .simple-header__inner {
+    @mixin layout-wrapper;
+    @mixin py var(--size-14);
+
+    display: grid;
+    gap: var(--size-10);
+
+    @media (--bp-desktop) {
+      @mixin layout-columns;
+
+      align-items: center;
+    }
+  }
+
+  .simple-header__text {
+    @media (--bp-desktop) {
+      grid-column: body-start / margin-end;
+      grid-row: 1;
+    }
+  }
+
+  .simple-header__eyebrow {
+    @mixin typo_label;
+    @mixin ma var(--size-0);
+
+    color: var(--color-text-quiet);
+  }
+
+  .simple-header__title {
+    @mixin mt var(--size-6);
+    @mixin mb var(--size-0);
+
+    font-family: var(--font-display);
+    font-size: clamp(var(--type-9), 6vw, var(--size-15));
+    font-weight: var(--font-weight-display);
+    line-height: 1;
+    letter-spacing: var(--tracking-display);
+  }
+
+  .simple-header__standfirst {
+    @mixin typo_standfirst;
+    @mixin mt var(--size-8);
+    @mixin mb var(--size-0);
+
+    color: var(--color-text-secondary);
+  }
+
+  .simple-header__count {
+    @mixin ma var(--size-0);
+
+    display: grid;
+    place-items: center;
+    order: -1;
+
+    aspect-ratio: 1;
+    width: var(--size-14);
+
+    font-family: var(--font-header);
+    font-size: var(--type-7);
+    font-weight: var(--font-weight-heading);
+    line-height: 1;
+    color: var(--color-text-on-accent);
+
+    background-color: var(--color-primary);
+    box-shadow: var(--shadow-raised);
+
+    @media (--bp-desktop) {
+      grid-column: rail-start / rail-end;
+      grid-row: 1;
+      width: var(--size-16);
+      font-size: var(--type-10);
+    }
+  }
+
+  .simple-header__hidden {
+    @mixin visually-hidden;
+  }
+}