Component Library Refactor & New Components (#3510)

* adding showcase page

* adding CardStatsList

* clean up, tighter code

* code review and code clean up

* update import, clean up env for error message

* tweak some css code

* less css, rebuilt

* re-adding bem, modifier for bds variants

shared/patterns/SectionHeader/SectionHeader.scss

@@ -0,0 +1,50 @@
+// BDS SectionHeader Pattern Styles
+// Brand Design System - Consolidated section header (heading + description)
+//
+// Naming Convention: BEM with 'bds' namespace
+// .bds-section-header              - Header wrapper for heading and description
+// .bds-section-header__heading    - Section heading (uses .h-md)
+// .bds-section-header__description - Section description (uses .body-l)
+//
+// Design tokens from _spacing.scss:
+// - Gap between heading and description: $bds-gap-header-*
+// - Light/Dark mode colors: $black / $white
+
+// =============================================================================
+// Header Section
+// =============================================================================
+
+.bds-section-header {
+  display: flex;
+  flex-direction: column;
+  gap: $bds-gap-header-sm;
+  margin-bottom: $bds-gap-section-sm;
+
+  @include media-breakpoint-up(md) {
+    gap: $bds-gap-header-md;
+    margin-bottom: $bds-gap-section-md;
+  }
+
+  @include media-breakpoint-up(lg) {
+    gap: $bds-gap-header-lg;
+    margin-bottom: $bds-gap-section-lg;
+  }
+
+  @include bds-theme-mode(light) {
+    color: $black;
+  }
+
+  @include bds-theme-mode(dark) {
+    color: $white;
+  }
+}
+
+.bds-section-header__heading {
+  margin: 0;
+  // Typography handled by .h-md class from _font.scss
+}
+
+.bds-section-header__description {
+  margin: 0;
+  // Typography handled by .body-l class from _font.scss
+}