From 05b72f4968a20d856cc9eced7838be08774e8597 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Wed, 25 Feb 2026 11:13:13 -0800
Subject: [PATCH] Banner: use Granite.HeaderLabel

---
 data/styles/HomePage.scss | 18 ------------------
 src/Widgets/Banner.vala   | 24 ++++++------------------
 2 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/data/styles/HomePage.scss b/data/styles/HomePage.scss
index 18bf652057..fc49bd1943 100644
--- a/data/styles/HomePage.scss
+++ b/data/styles/HomePage.scss
@@ -51,24 +51,6 @@ homepage {
             margin-right: -12px; /*Offset space inside icon*/;
         }
 
-        > box {
-            border-spacing: rem(24px);
-        }
-
-        label.name {
-            font-size: 3rem;
-            font-weight: 700;
-            letter-spacing: -0.04em;
-            margin-bottom: -0.1em;
-        }
-
-        label.summary {
-            font-size: 1.25rem;
-            font-weight: 400;
-            letter-spacing: -0.035em;
-            margin-bottom: 0.75em;
-        }
-
         label.description {
             font-size: 0.95rem;
             opacity: 0.85;
diff --git a/src/Widgets/Banner.vala b/src/Widgets/Banner.vala
index 31e3025f5e..f66acb3f37 100644
--- a/src/Widgets/Banner.vala
+++ b/src/Widgets/Banner.vala
@@ -43,21 +43,10 @@ public class AppCenter.Widgets.Banner : Gtk.Button {
     }
 
     construct {
-        var name_label = new Gtk.Label (app_name) {
-            max_width_chars = 50,
-            use_markup = true,
-            wrap = true,
-            xalign = 0
-        };
-        name_label.add_css_class ("name");
-
-        var summary_label = new Gtk.Label (summary) {
-            max_width_chars = 50,
-            use_markup = true,
-            wrap = true,
-            xalign = 0
+        var header = new Granite.HeaderLabel (app_name) {
+            secondary_text = summary,
+            size = H1
         };
-        summary_label.add_css_class ("summary");
 
         if (description != null && description != "") {
             // We only want the first line/paragraph
@@ -74,14 +63,13 @@ public class AppCenter.Widgets.Banner : Gtk.Button {
         };
         description_label.add_css_class ("description");
 
-        var inner_box = new Gtk.Box (VERTICAL, 0) {
+        var inner_box = new Granite.Box (VERTICAL, SINGLE) {
             valign = CENTER
         };
-        inner_box.append (name_label);
-        inner_box.append (summary_label);
+        inner_box.append (header);
         inner_box.append (description_label);
 
-        var outer_box = new Gtk.Box (HORIZONTAL, 0) {
+        var outer_box = new Granite.Box (HORIZONTAL, DOUBLE) {
             halign = CENTER
         };
         outer_box.append (app_icon);