Add reusable feature-state component

site/assets/scss/_styles_project.scss

@@ -175,4 +175,34 @@ nav.foldable-nav .ul-1 .with-child>label:hover:before {
 
 nav.foldable-nav .ul-1 .with-child>input:checked~label:hover:before {
   transform: rotate(90deg) !important;
-}
+}
+
+div.feature-state-notice {
+    background-color: #daeaf9;
+    border-radius: 0.75rem;
+    padding: 1rem;
+    margin-bottom: 1em;
+
+    font-size: 1.2em;
+
+    > .feature-state-name::before {
+      content: 'ⓘ  ';
+      color: #326ce5; // Kubernetes blue
+    }
+    > .feature-state-name {
+      display: inline-block;
+      font-size: 0.95em;
+      font-weight: bold;
+      color: #000;
+      background-color: #daeaf9;
+    }
+
+    code {
+      color: #000;
+      font-size: 1em;
+      background-color: #daeaf9;
+    }
+
+    margin-right: 2em;
+    max-width: 80%;
+  }

site/layouts/shortcodes/feature-state.html

@@ -0,0 +1,14 @@
+
+{{ $valid_states := "alpha, beta, deprecated, stable" }}
+{{ $state := .Get "state" }}
+{{ $for_k8s_version := .Get "for_k8s_version" | default (.Page.Param "version")}}
+{{ $is_valid := strings.Contains $valid_states $state }}
+
+{{ if not $is_valid }}
+  {{ errorf "%q is not a valid feature-state, use one of %q" $state $valid_states }}
+{{ else }}
+  <div class="feature-state-notice feature-{{ $state }}">
+    <span class="feature-state-name">FEATURE STATE</span> <code>Kubernetes {{ $for_k8s_version }} [{{ $state }}]</code>
+  </div>
+{{ end }}
+