Summary bars for docs

Author: sarahsanders-docker

assets/css/styles.css

@@ -14,3 +14,5 @@
 @import "/assets/css/syntax-light";
 @import "/assets/css/syntax-dark";
 @import "/assets/css/icons";
+
+@import "/assets/css/summary-bar";

assets/css/summary-bar.css

@@ -0,0 +1,26 @@
+.summary-bar {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    background-color: theme("colors.blue.light.500");
+    border: 1px solid theme("colors.blue.light.500");
+    border-radius: 5px;
+    margin-bottom: 1rem;
+    align-items: center;
+}
+
+.summary-icon {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.summary-icon .material-symbols-outlined {
+    font-size: 24px;
+    color: theme("colors.white");
+}
+
+.summary-label {
+    font-size: 14px;
+    color: theme("colors.white");
+}

content/manuals/security/for-admins/hardened-desktop/settings-management/configure-admin-console.md

@@ -11,6 +11,15 @@ params:
       text: EA
 ---
 
+{{< summary-bar
+    subscription="domain"
+    subscriptionText="Business"
+    lifecycle="rocket_launch"
+    lifecycleText="EA"
+    admin="admin_panel_settings"
+    adminText="Admin"
+>}}
+
 {{% restricted title="Early Access" %}}
 Settings Management in the Docker Admin Console is an [early access](/release-lifecycle#early-access-ea) feature and is available to Docker Business customers only.
 {{% /restricted %}}

layouts/shortcodes/summary-bar.html

@@ -0,0 +1,55 @@
+<!--
+Summary bar icon library:
+
+1. Subscription:
+    - Label: Business                   | Icon: domain
+    - Label: Team                       | Icon: groups
+    - Label: Pro                        | Icon: person_add
+    - Label: Personal                   | Icon: person
+    - Label: Available to all           | Icon: public
+
+2. Release lifecycle:
+    - Label: Experimental               | Icon: science
+    - Label: Beta                       | Icon: bolt
+    - Label: EA                         | Icon: rocket_launch
+    - Label: GA                         | Icon: check_circle
+    - Label: Retired                    | Icon: package_2
+
+3. Minimum version:
+    - Label: Version [version_number]   | Icon: browser_updated
+
+4. Admin:
+    - Label: Admin                      | Icon: admin_panel_settings
+-->
+
+{{ $styles := resources.Get "css/summary-bar.css" | resources.Minify }}
+<link rel="stylesheet" href="{{ $styles.RelPermalink }}">
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
+
+<div class="summary-bar">
+    <span class="summary-title">Available for:</span>
+    {{ if .Get "subscription" }}
+        <div class="summary-icon">
+            <span class="material-symbols-outlined">{{ .Get "subscription" }}</span>
+            <span class="summary-label">{{ .Get "subscriptionText" }}</span>
+        </div>
+    {{ end }}
+    {{ if .Get "lifecycle" }}
+        <div class="summary-icon">
+            <span class="material-symbols-outlined">{{ .Get "lifecycle" }}</span>
+            <span class="summary-label">{{ .Get "lifecycleText" }}</span>
+        </div>
+    {{ end }}
+    {{ if .Get "version" }}
+        <div class="summary-icon">
+            <span class="material-symbols-outlined">{{ .Get "version" }}</span>
+            <span class="summary-label">{{ .Get "versionText" }}</span>
+        </div>
+    {{ end }}
+    {{ if .Get "admin" }}
+        <div class="summary-icon">
+            <span class="material-symbols-outlined">{{ .Get "admin" }}</span>
+            <span class="summary-label">{{ .Get "adminText" }}</span>
+        </div>
+    {{ end }}
+</div>