From d7fb9d3d0d1891863242557c22947f63ca5f2174 Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Thu, 21 May 2026 17:06:49 -0700
Subject: [PATCH 01/11] initial commit

---
 blocks/cards/cards.css                 |  67 ++++++++++++
 blocks/cards/cards.js                  |  69 ++++++++++++
 blocks/flagged-cards/flagged-cards.css | 140 +++++++++++++++++++++++++
 blocks/flagged-cards/flagged-cards.js  |  57 ++++++++++
 templates/default/default.css          |   6 +-
 5 files changed, 336 insertions(+), 3 deletions(-)
 create mode 100644 blocks/flagged-cards/flagged-cards.css
 create mode 100644 blocks/flagged-cards/flagged-cards.js

diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
index c34626d8..7cd1b44f 100644
--- a/blocks/cards/cards.css
+++ b/blocks/cards/cards.css
@@ -926,3 +926,70 @@
     padding: 0;
     margin: 0;
 }
+
+.cards.flagged-cards.block {
+  all: unset;
+  display: block;
+}
+
+.flagged-card {
+  width: 320px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e5e5e5;
+  font-family: Arial, sans-serif;
+  background: #fff;
+}
+
+.flagged-card-banner {
+  background: #ffeb3b; /* yellow */
+  color: #000;
+  font-weight: bold;
+  text-align: center;
+  padding: 8px 0;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+}
+
+.flagged-card-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.flagged-card-icon img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.flagged-card-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.flagged-card-description {
+  margin: 0;
+  font-size: 14px;
+  color: #555;
+  text-align: center;
+}
+
+.flagged-card-button {
+  margin-top: 10px;
+  padding: 10px 12px;
+  width: 100%;
+  border: none;
+  border-radius: 8px;
+  background: #2f6fed;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.flagged-card-button:hover {
+  background: #1f5ad6;
+}
\ No newline at end of file
diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
index 83c17441..cb1a5273 100644
--- a/blocks/cards/cards.js
+++ b/blocks/cards/cards.js
@@ -198,6 +198,75 @@ export default function decorate(block) {
           ),
         ),
       );
+    } else if (block.classList.contains('flagged-cards')) {
+
+      const banner = row.children[0];
+const iconImg = row.children[1];
+const cardTitle = row.children[2];
+const cardDesc = row.children[3];
+const cardButton = row.children.length && row.children[4] && row.children[4].querySelector('a');
+
+const { href, title } = cardButton ?? {};
+
+$ul.append(
+  li(
+    div(
+      { class: 'flagged-card' },
+
+      // Banner
+      banner
+        ? div({ class: 'flagged-card-banner' }, banner)
+        : null,
+
+      // Main content
+      div(
+        { class: 'flagged-card-content' },
+
+        iconImg ? div({ class: 'flagged-card-img' }, iconImg) : null,
+
+        cardTitle ? div({ class: 'flagged-card-title' }, cardTitle) : null,
+
+        cardDesc ? div({ class: 'flagged-card-description' }, cardDesc) : null,
+
+        // Button
+        cardButton
+          ? a(
+              { class: 'flagged-card-button', href, title },
+              cardButton
+            )
+          : null,
+      ),
+    ),
+  ),
+);
+
+
+
+      // const iconImg = row.children[0];
+      // const cardTitle = row.children[1];
+      // const cardDesc = row.children[2];
+      // const cardLink = row.children.length && row.children[3] && row.children[3].querySelector('a');
+      // const { href, title } = cardLink ?? {};
+      // $ul.append(
+      //   li(
+      //     cardLink ? a(
+      //       { class: 'card-link', href, title },
+      //       iconImg ? div({ class: 'card-img' }, iconImg) : null,
+      //       div(
+      //         { class: 'card-content' },
+      //         cardTitle ? div({ class: 'card-title' }, cardTitle) : null,
+      //         cardDesc ? div({ class: 'card-description' }, cardDesc) : null,
+      //       ),
+      //     ) : div(
+      //       iconImg ? div({ class: 'card-img' }, iconImg) : null,
+      //       div(
+      //         { class: 'card-content' },
+      //         cardTitle ? div({ class: 'card-title' }, cardTitle) : null,
+      //         cardDesc ? div({ class: 'card-description' }, cardDesc) : null,
+      //       ),
+      //     ),
+      //   ),
+      // );
     } else if (block.classList.contains('logo')) {
       const iconImg = row.children[0];
       const cardTitle = row.children[1];
diff --git a/blocks/flagged-cards/flagged-cards.css b/blocks/flagged-cards/flagged-cards.css
new file mode 100644
index 00000000..50364d30
--- /dev/null
+++ b/blocks/flagged-cards/flagged-cards.css
@@ -0,0 +1,140 @@
+.flagged-cards-title p {
+  margin: 0;
+}
+
+.flagged-cards-description p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+.flagged-cards {
+  background: white;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+.flagged-cards:hover {
+  background: var(--orange);
+  color: white;
+}
+
+.flagged-cards:hover .flagged-cards-button {
+  background: #fff;
+  color: var(--orange);
+      text-decoration: none;
+}
+
+.flagged-cards:hover .flagged-cards-button,
+.flagged-cards:hover .flagged-cards-button * {
+  color: var(--orange);
+
+}
+
+/* .flagged-cards:hover .flagged-cards-button {
+  background: var(--orange);
+  color: white;
+} */
+
+.flagged-cards.block {
+  /* display: flex; */
+  /* flex-wrap: wrap; */
+  margin: 20px 0;
+  /* padding: unset; */
+}
+
+.flagged-cards ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.flagged-cards {
+  width: 320px;
+  /* border-radius: 12px; */
+  overflow: hidden;
+  border: 1px solid #e5e5e5;
+  /* font-family: Arial, sans-serif; */
+  background: #fff;
+}
+
+.flagged-cards-banner {
+  background: #f1c40f;
+  color: #000;
+  font-weight: bold;
+  text-align: center;
+  padding: 1px 0;
+  font-size: 12px;
+  letter-spacing: 1.5px;
+}
+
+.flagged-cards-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* gap: 0px; */
+}
+
+.flagged-cards-img .icon {
+  width: 72px;
+  height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* .flagged-cards-img .icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+} */
+
+.flagged-cards-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 2px;
+}
+
+.flagged-cards-description {
+  margin: 0;
+  font-size: 14px;
+  /* color: #555; */
+  text-align: center;
+}
+
+.flagged-cards-button {
+  margin-top: 10px;
+  padding: 10px 12px;
+  width: 100%;
+  border: none;
+  /* border-radius: 8px; */
+  background: var(--orange);
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: center;
+}
+
+/* .flagged-cards-button a {
+
+  color: white;
+text-decoration: none;
+font-weight: bold;
+} */
+
+.flagged-cards-button a {
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+/* .flagged-cards-button:hover {
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+} */
+
+.flagged-cards-button {
+  transition: background 0.3s ease, color 0.3s ease;
+}
\ No newline at end of file
diff --git a/blocks/flagged-cards/flagged-cards.js b/blocks/flagged-cards/flagged-cards.js
new file mode 100644
index 00000000..007d1b99
--- /dev/null
+++ b/blocks/flagged-cards/flagged-cards.js
@@ -0,0 +1,57 @@
+import { createOptimizedPicture } from '../../scripts/aem.js';
+import {
+  ul, li, a, div, img, h4, br, p,
+} from '../../scripts/dom-helpers.js';
+
+export default function decorate(block) {
+  /* change to ul, li */
+  const $ul = ul();
+  let cardImage;
+  [...block.children].forEach((row) => {
+
+
+      const banner = row.children[0];
+const iconImg = row.children[1];
+const cardTitle = row.children[2];
+const cardDesc = row.children[3];
+const cardButton = row.children.length && row.children[4] && row.children[4].querySelector('a');
+
+const { href, title } = cardButton ?? {};
+
+$ul.append(
+  li(
+    div(
+      { class: 'flagged-cards' },
+
+      // Banner
+      banner
+        ? div({ class: 'flagged-cards-banner' }, banner)
+        : null,
+
+      // Main content
+      div(
+        { class: 'flagged-cards-content' },
+
+        iconImg ? div({ class: 'flagged-cards-img' }, iconImg) : null,
+
+        cardTitle ? div({ class: 'flagged-cards-title' }, cardTitle) : null,
+
+        cardDesc ? div({ class: 'flagged-cards-description' }, cardDesc) : null,
+
+        // Button
+        cardButton
+          ? a(
+              { class: 'flagged-cards-button', href, title },
+              cardButton
+            )
+          : null,
+      ),
+    ),
+  ),
+);
+
+  });
+  $ul.querySelectorAll('picture > img').forEach((imgEl) => imgEl.closest('picture').replaceWith(createOptimizedPicture(imgEl.src, imgEl.alt, false, [{ width: '750' }])));
+  block.textContent = '';
+  block.append($ul);
+}
diff --git a/templates/default/default.css b/templates/default/default.css
index 8215211e..5488a109 100644
--- a/templates/default/default.css
+++ b/templates/default/default.css
@@ -325,7 +325,7 @@ main .mainmenu .rightsection.image-center picture img {
   width: 50%;
 }
 
-main .mainmenu .rightsection.no-button a:any-link:not(.cards a, .cards * a, .hotline a, .newslist a, .newslist-ens a, .document-center a, .tiled-list a) {
+main .mainmenu .rightsection.no-button a:any-link:not(.cards a, .cards * a, .hotline a, .newslist a, .newslist-ens a, .document-center a, .tiled-list a, .flagged-cards a) {
     color: var(--primary-orange-600);
     background-color: transparent;
     text-decoration: underline;
@@ -337,11 +337,11 @@ main .mainmenu .rightsection.no-button a:any-link:not(.cards a, .cards * a, .hot
     font-weight: var(--font-weight-book);
 }
 
-main .mainmenu .rightsection.no-button a:any-link:not(.cards a, .cards * a, .hotline a, .newslist a, .newslist-ens a, .document-center a, .tiled-list a):hover {
+main .mainmenu .rightsection.no-button a:any-link:not(.cards a, .cards * a, .hotline a, .newslist a, .newslist-ens a, .document-center a, .tiled-list a, .flagged-cards a):hover {
     color: var(--primary-orange-900);
 }
 
-main .mainmenu .rightsection.no-button a:any-link:not(.cards a, .cards * a, .hotline a, .newslist a, .newslist-ens a, .document-center a, .tiled-list a):focus {
+main .mainmenu .rightsection.no-button a:any-link:not(.cards a, .cards * a, .hotline a, .newslist a, .newslist-ens a, .document-center a, .tiled-list a, .flagged-cards a):focus {
     border: 1px solid var(--primary-orange-900);
 }
 

From c085dfe54f88791fc13a9bbe4200763f8a528da2 Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Thu, 21 May 2026 17:40:37 -0700
Subject: [PATCH 02/11] add hover transitions

---
 blocks/flagged-cards/flagged-cards.css | 104 +++++++++++++------------
 blocks/flagged-cards/flagged-cards.js  |  86 ++++++++++----------
 styles/styles.css                      |   6 +-
 3 files changed, 102 insertions(+), 94 deletions(-)

diff --git a/blocks/flagged-cards/flagged-cards.css b/blocks/flagged-cards/flagged-cards.css
index 50364d30..9613921d 100644
--- a/blocks/flagged-cards/flagged-cards.css
+++ b/blocks/flagged-cards/flagged-cards.css
@@ -7,54 +7,43 @@
   margin-bottom: 1em;
 }
 
-.flagged-cards {
-  background: white;
-  transition: background 0.3s ease, color 0.3s ease;
-}
-
-.flagged-cards:hover {
-  background: var(--orange);
-  color: white;
-}
-
-.flagged-cards:hover .flagged-cards-button {
-  background: #fff;
-  color: var(--orange);
-      text-decoration: none;
-}
-
-.flagged-cards:hover .flagged-cards-button,
-.flagged-cards:hover .flagged-cards-button * {
-  color: var(--orange);
+/* .flagged-cards.block {
+  display: flex;
+  margin: 20px 0;
+} */
 
+.flagged-cards {
+  margin: 32px auto;
 }
 
-/* .flagged-cards:hover .flagged-cards-button {
-  background: var(--orange);
-  color: white;
-} */
+.flagged-cards .flagged-cards{
+  margin: 32px auto;
+    border: 1px solid #e5e5e5;
 
-.flagged-cards.block {
-  /* display: flex; */
-  /* flex-wrap: wrap; */
-  margin: 20px 0;
-  /* padding: unset; */
 }
 
-.flagged-cards ul {
+.flagged-cards.block ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-.flagged-cards {
+.flagged-cards.block ul li {
+  flex: 0 0 320px;
+  list-style: none;
+
+  /* border: 1px solid #e5e5e5; */
+}
+
+/* .flagged-cards {
   width: 320px;
-  /* border-radius: 12px; */
   overflow: hidden;
   border: 1px solid #e5e5e5;
-  /* font-family: Arial, sans-serif; */
   background: #fff;
-}
+} */
 
 .flagged-cards-banner {
   background: #f1c40f;
@@ -71,6 +60,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+
   /* gap: 0px; */
 }
 
@@ -92,13 +82,14 @@
 .flagged-cards-title {
   margin: 0;
   font-size: 18px;
-  font-weight: bold;
+  font-weight: bolder;
   margin-bottom: 2px;
 }
 
 .flagged-cards-description {
   margin: 0;
   font-size: 14px;
+
   /* color: #555; */
   text-align: center;
 }
@@ -108,6 +99,7 @@
   padding: 10px 12px;
   width: 100%;
   border: none;
+
   /* border-radius: 8px; */
   background: var(--orange);
   color: white;
@@ -116,25 +108,41 @@
   text-align: center;
 }
 
-/* .flagged-cards-button a {
+li:hover .flagged-cards {
+  background: var(--orange);
+  transition: background 0.3s ease;
+}
 
-  color: white;
-text-decoration: none;
-font-weight: bold;
-} */
+li:hover .flagged-cards .flagged-cards-title,
+li:hover .flagged-cards .flagged-cards-description {
+  color: #fff;
+}
 
-.flagged-cards-button a {
-  color: white;
-  text-decoration: none;
-  font-weight: bold;
+li:hover .flagged-cards .flagged-cards-title p,
+li:hover .flagged-cards .flagged-cards-description p {
+  color: #fff;
 }
 
-/* .flagged-cards-button:hover {
+.flagged-cards-button a,
+.flagged-cards-button:link,
+.flagged-cards-button:visited {
   color: white;
   text-decoration: none;
-  font-weight: bold;
-} */
+  font-weight: bold
+}
+
+li:hover .flagged-cards .flagged-cards-button {
+  background: #fff;
+  color: var(--orange);
+}
+
+li:hover .flagged-cards .flagged-cards-button a {
+  color: var(--orange);
+}
 
+.flagged-cards,
+.flagged-cards-title,
+.flagged-cards-description,
 .flagged-cards-button {
-  transition: background 0.3s ease, color 0.3s ease;
-}
\ No newline at end of file
+  transition: all 0.3s ease;
+}
diff --git a/blocks/flagged-cards/flagged-cards.js b/blocks/flagged-cards/flagged-cards.js
index 007d1b99..b48811eb 100644
--- a/blocks/flagged-cards/flagged-cards.js
+++ b/blocks/flagged-cards/flagged-cards.js
@@ -1,55 +1,55 @@
+// TODO: - Fix case where there is nothing placed in the banner... its still showing a small patch
+//         yellow at the top and the card isnt the same height as everything else
+//       - Add the 3rd mockup card as well (use the 6th column to make custom styles or something)
+
 import { createOptimizedPicture } from '../../scripts/aem.js';
 import {
-  ul, li, a, div, img, h4, br, p,
+  ul, li, a, div,
 } from '../../scripts/dom-helpers.js';
 
 export default function decorate(block) {
   /* change to ul, li */
   const $ul = ul();
-  let cardImage;
   [...block.children].forEach((row) => {
-
-
-      const banner = row.children[0];
-const iconImg = row.children[1];
-const cardTitle = row.children[2];
-const cardDesc = row.children[3];
-const cardButton = row.children.length && row.children[4] && row.children[4].querySelector('a');
-
-const { href, title } = cardButton ?? {};
-
-$ul.append(
-  li(
-    div(
-      { class: 'flagged-cards' },
-
-      // Banner
-      banner
-        ? div({ class: 'flagged-cards-banner' }, banner)
-        : null,
-
-      // Main content
-      div(
-        { class: 'flagged-cards-content' },
-
-        iconImg ? div({ class: 'flagged-cards-img' }, iconImg) : null,
-
-        cardTitle ? div({ class: 'flagged-cards-title' }, cardTitle) : null,
-
-        cardDesc ? div({ class: 'flagged-cards-description' }, cardDesc) : null,
-
-        // Button
-        cardButton
-          ? a(
-              { class: 'flagged-cards-button', href, title },
-              cardButton
-            )
-          : null,
+    const banner = row.children[0];
+    const iconImg = row.children[1];
+    const cardTitle = row.children[2];
+    const cardDesc = row.children[3];
+    const cardButton = row.children.length && row.children[4] && row.children[4].querySelector('a');
+
+    const { href, title } = cardButton ?? {};
+
+    $ul.append(
+      li(
+        div(
+          { class: 'flagged-cards' },
+
+          // Banner
+          banner
+            ? div({ class: 'flagged-cards-banner' }, banner)
+            : null,
+
+          // Main content
+          div(
+            { class: 'flagged-cards-content' },
+
+            iconImg ? div({ class: 'flagged-cards-img' }, iconImg) : null,
+
+            cardTitle ? div({ class: 'flagged-cards-title' }, cardTitle) : null,
+
+            cardDesc ? div({ class: 'flagged-cards-description' }, cardDesc) : null,
+
+            // Button
+            cardButton
+              ? a(
+                { class: 'flagged-cards-button', href, title },
+                cardButton,
+              )
+              : null,
+          ),
+        ),
       ),
-    ),
-  ),
-);
-
+    );
   });
   $ul.querySelectorAll('picture > img').forEach((imgEl) => imgEl.closest('picture').replaceWith(createOptimizedPicture(imgEl.src, imgEl.alt, false, [{ width: '750' }])));
   block.textContent = '';
diff --git a/styles/styles.css b/styles/styles.css
index 4613c79d..187066cc 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -207,18 +207,18 @@ main pre {
 }
 
 /* links */
-a:any-link {
+a:any-link:not(.flagged-cards a) {
   color: var(--primary-orange-600);
   text-decoration: underline;
   text-decoration-thickness: 6%;
   text-underline-offset: 12%;
 }
 
-a:hover {
+a:hover:not(.flagged-cards a) {
   color: var(--primary-orange-900);
 }
 
-a:focus {
+a:focus:not(.flagged-cards a) {
   color: var(--primary-orange-900);
   background-color: transparent;
   border: 1px solid var(--primary-blue-900);

From 4f736ed8ecdd39f0b95a993670d761deaee64e6d Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Thu, 21 May 2026 17:44:24 -0700
Subject: [PATCH 03/11] add task to todo list, revert cards.js/cards.css
 changes

---
 blocks/cards/cards.css                | 67 -------------------------
 blocks/cards/cards.js                 | 71 +--------------------------
 blocks/flagged-cards/flagged-cards.js |  1 +
 3 files changed, 2 insertions(+), 137 deletions(-)

diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
index 7cd1b44f..f1e47183 100644
--- a/blocks/cards/cards.css
+++ b/blocks/cards/cards.css
@@ -925,71 +925,4 @@
     border: 0;
     padding: 0;
     margin: 0;
-}
-
-.cards.flagged-cards.block {
-  all: unset;
-  display: block;
-}
-
-.flagged-card {
-  width: 320px;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid #e5e5e5;
-  font-family: Arial, sans-serif;
-  background: #fff;
-}
-
-.flagged-card-banner {
-  background: #ffeb3b; /* yellow */
-  color: #000;
-  font-weight: bold;
-  text-align: center;
-  padding: 8px 0;
-  font-size: 12px;
-  letter-spacing: 0.5px;
-}
-
-.flagged-card-content {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-
-.flagged-card-icon img {
-  width: 48px;
-  height: 48px;
-  object-fit: contain;
-}
-
-.flagged-card-title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.flagged-card-description {
-  margin: 0;
-  font-size: 14px;
-  color: #555;
-  text-align: center;
-}
-
-.flagged-card-button {
-  margin-top: 10px;
-  padding: 10px 12px;
-  width: 100%;
-  border: none;
-  border-radius: 8px;
-  background: #2f6fed;
-  color: white;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.flagged-card-button:hover {
-  background: #1f5ad6;
 }
\ No newline at end of file
diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
index cb1a5273..ca17239c 100644
--- a/blocks/cards/cards.js
+++ b/blocks/cards/cards.js
@@ -198,75 +198,6 @@ export default function decorate(block) {
           ),
         ),
       );
-    } else if (block.classList.contains('flagged-cards')) {
-
-      const banner = row.children[0];
-const iconImg = row.children[1];
-const cardTitle = row.children[2];
-const cardDesc = row.children[3];
-const cardButton = row.children.length && row.children[4] && row.children[4].querySelector('a');
-
-const { href, title } = cardButton ?? {};
-
-$ul.append(
-  li(
-    div(
-      { class: 'flagged-card' },
-
-      // Banner
-      banner
-        ? div({ class: 'flagged-card-banner' }, banner)
-        : null,
-
-      // Main content
-      div(
-        { class: 'flagged-card-content' },
-
-        iconImg ? div({ class: 'flagged-card-img' }, iconImg) : null,
-
-        cardTitle ? div({ class: 'flagged-card-title' }, cardTitle) : null,
-
-        cardDesc ? div({ class: 'flagged-card-description' }, cardDesc) : null,
-
-        // Button
-        cardButton
-          ? a(
-              { class: 'flagged-card-button', href, title },
-              cardButton
-            )
-          : null,
-      ),
-    ),
-  ),
-);
-
-
-
-      // const iconImg = row.children[0];
-      // const cardTitle = row.children[1];
-      // const cardDesc = row.children[2];
-      // const cardLink = row.children.length && row.children[3] && row.children[3].querySelector('a');
-      // const { href, title } = cardLink ?? {};
-      // $ul.append(
-      //   li(
-      //     cardLink ? a(
-      //       { class: 'card-link', href, title },
-      //       iconImg ? div({ class: 'card-img' }, iconImg) : null,
-      //       div(
-      //         { class: 'card-content' },
-      //         cardTitle ? div({ class: 'card-title' }, cardTitle) : null,
-      //         cardDesc ? div({ class: 'card-description' }, cardDesc) : null,
-      //       ),
-      //     ) : div(
-      //       iconImg ? div({ class: 'card-img' }, iconImg) : null,
-      //       div(
-      //         { class: 'card-content' },
-      //         cardTitle ? div({ class: 'card-title' }, cardTitle) : null,
-      //         cardDesc ? div({ class: 'card-description' }, cardDesc) : null,
-      //       ),
-      //     ),
-      //   ),
-      // );
     } else if (block.classList.contains('logo')) {
       const iconImg = row.children[0];
       const cardTitle = row.children[1];
@@ -306,4 +237,4 @@ $ul.append(
   $ul.querySelectorAll('picture > img').forEach((imgEl) => imgEl.closest('picture').replaceWith(createOptimizedPicture(imgEl.src, imgEl.alt, false, [{ width: '750' }])));
   block.textContent = '';
   block.append($ul);
-}
+}
\ No newline at end of file
diff --git a/blocks/flagged-cards/flagged-cards.js b/blocks/flagged-cards/flagged-cards.js
index b48811eb..5528e857 100644
--- a/blocks/flagged-cards/flagged-cards.js
+++ b/blocks/flagged-cards/flagged-cards.js
@@ -1,6 +1,7 @@
 // TODO: - Fix case where there is nothing placed in the banner... its still showing a small patch
 //         yellow at the top and the card isnt the same height as everything else
 //       - Add the 3rd mockup card as well (use the 6th column to make custom styles or something)
+//       - Also make sure that normal pictures work too, we are currently using ":potholes:" etc
 
 import { createOptimizedPicture } from '../../scripts/aem.js';
 import {

From 7f5bf4073259194f0e1cef9959ab870790f36230 Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Thu, 21 May 2026 17:45:45 -0700
Subject: [PATCH 04/11] lint cards.js

---
 blocks/cards/cards.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
index ca17239c..83c17441 100644
--- a/blocks/cards/cards.js
+++ b/blocks/cards/cards.js
@@ -237,4 +237,4 @@ export default function decorate(block) {
   $ul.querySelectorAll('picture > img').forEach((imgEl) => imgEl.closest('picture').replaceWith(createOptimizedPicture(imgEl.src, imgEl.alt, false, [{ width: '750' }])));
   block.textContent = '';
   block.append($ul);
-}
\ No newline at end of file
+}

From 48c186dfc4843715fbc9f6ad9269a4b1217f4a95 Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Tue, 26 May 2026 07:54:56 -0700
Subject: [PATCH 05/11] add empty banner on normal variant, add alt style card

---
 blocks/flagged-cards/flagged-cards.css | 54 ++++++++++++++++++++++----
 blocks/flagged-cards/flagged-cards.js  | 27 ++++++++++---
 2 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/blocks/flagged-cards/flagged-cards.css b/blocks/flagged-cards/flagged-cards.css
index 9613921d..bb5f164a 100644
--- a/blocks/flagged-cards/flagged-cards.css
+++ b/blocks/flagged-cards/flagged-cards.css
@@ -18,8 +18,12 @@
 
 .flagged-cards .flagged-cards{
   margin: 32px auto;
-    border: 1px solid #e5e5e5;
+  border: 1px solid #e5e5e5;
+}
 
+.flagged-cards .flagged-cards-alt {
+  margin: 32px auto;
+  border: 1px dashed var(--orange);
 }
 
 .flagged-cards.block ul {
@@ -53,6 +57,11 @@
   padding: 1px 0;
   font-size: 12px;
   letter-spacing: 1.5px;
+  min-height: 45px;
+}
+
+.flagged-cards-banner.empty-banner {
+  background: #fff;
 }
 
 .flagged-cards-content {
@@ -64,6 +73,16 @@
   /* gap: 0px; */
 }
 
+.flagged-cards-content-alt {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--neutral-black-200);
+
+  /* gap: 0px; */
+}
+
 .flagged-cards-img .icon {
   width: 72px;
   height: 72px;
@@ -108,18 +127,32 @@
   text-align: center;
 }
 
-li:hover .flagged-cards {
+li:hover .flagged-cards,
+li:hover .flagged-cards .flagged-cards-banner.empty-banner,
+li:hover .flagged-cards-alt,
+li:hover .flagged-cards-content-alt {
+  background: var(--orange);
+}
+
+/* li:hover .flagged-cards .flagged-cards-banner.empty-banner {
   background: var(--orange);
-  transition: background 0.3s ease;
 }
 
+li:hover .flagged-cards-alt {
+  background: var(--orange);
+} */
+
 li:hover .flagged-cards .flagged-cards-title,
-li:hover .flagged-cards .flagged-cards-description {
+li:hover .flagged-cards .flagged-cards-description,
+li:hover .flagged-cards-alt .flagged-cards-title,
+li:hover .flagged-cards-alt .flagged-cards-description {
   color: #fff;
 }
 
 li:hover .flagged-cards .flagged-cards-title p,
-li:hover .flagged-cards .flagged-cards-description p {
+li:hover .flagged-cards .flagged-cards-description p,
+li:hover .flagged-cards-alt .flagged-cards-title p,
+li:hover .flagged-cards-alt .flagged-cards-description p {
   color: #fff;
 }
 
@@ -131,18 +164,23 @@ li:hover .flagged-cards .flagged-cards-description p {
   font-weight: bold
 }
 
-li:hover .flagged-cards .flagged-cards-button {
+li:hover .flagged-cards .flagged-cards-button,
+li:hover .flagged-cards-alt .flagged-cards-button {
   background: #fff;
   color: var(--orange);
 }
 
-li:hover .flagged-cards .flagged-cards-button a {
+li:hover .flagged-cards .flagged-cards-button a,
+li:hover .flagged-cards-alt .flagged-cards-button a {
   color: var(--orange);
 }
 
 .flagged-cards,
+.flagged-cards-alt,
+.flagged-cards-banner,
 .flagged-cards-title,
 .flagged-cards-description,
-.flagged-cards-button {
+.flagged-cards-button,
+.flagged-cards-content-alt {
   transition: all 0.3s ease;
 }
diff --git a/blocks/flagged-cards/flagged-cards.js b/blocks/flagged-cards/flagged-cards.js
index 5528e857..1b96ee7a 100644
--- a/blocks/flagged-cards/flagged-cards.js
+++ b/blocks/flagged-cards/flagged-cards.js
@@ -2,6 +2,8 @@
 //         yellow at the top and the card isnt the same height as everything else
 //       - Add the 3rd mockup card as well (use the 6th column to make custom styles or something)
 //       - Also make sure that normal pictures work too, we are currently using ":potholes:" etc
+//       - When you hover the invisible padding above and below the cards, it still hovers orange
+//       - Test alt style empty banner
 
 import { createOptimizedPicture } from '../../scripts/aem.js';
 import {
@@ -13,26 +15,41 @@ export default function decorate(block) {
   const $ul = ul();
   [...block.children].forEach((row) => {
     const banner = row.children[0];
+    const hasBannerContent = banner && banner.textContent.trim();
     const iconImg = row.children[1];
     const cardTitle = row.children[2];
     const cardDesc = row.children[3];
     const cardButton = row.children.length && row.children[4] && row.children[4].querySelector('a');
+    const altStyle = row.children[5];
+    const hasAltStyle = altStyle && altStyle.textContent.trim();
 
     const { href, title } = cardButton ?? {};
 
     $ul.append(
       li(
+
         div(
-          { class: 'flagged-cards' },
+          {
+            class: hasAltStyle === 'alt'
+              ? 'flagged-cards-alt'
+              : 'flagged-cards',
+          },
 
           // Banner
-          banner
-            ? div({ class: 'flagged-cards-banner' }, banner)
-            : null,
+          div(
+            {
+              class: `flagged-cards-banner ${hasBannerContent ? '' : 'empty-banner'}`,
+            },
+            hasBannerContent ? banner : '',
+          ),
 
           // Main content
           div(
-            { class: 'flagged-cards-content' },
+            {
+              class: hasAltStyle === 'alt'
+                ? 'flagged-cards-content-alt'
+                : 'flagged-cards-content',
+            },
 
             iconImg ? div({ class: 'flagged-cards-img' }, iconImg) : null,
 

From aafd1f9be56e06a00ff87a7ccff333c3fa513663 Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Wed, 27 May 2026 11:58:42 -0700
Subject: [PATCH 06/11] finish alt style card, make the block centered

---
 blocks/flagged-cards/flagged-cards.css | 42 +++++++++++++++++++++++---
 blocks/flagged-cards/flagged-cards.js  | 29 ++++++++++++------
 2 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/blocks/flagged-cards/flagged-cards.css b/blocks/flagged-cards/flagged-cards.css
index bb5f164a..cf000d5e 100644
--- a/blocks/flagged-cards/flagged-cards.css
+++ b/blocks/flagged-cards/flagged-cards.css
@@ -12,6 +12,11 @@
   margin: 20px 0;
 } */
 
+.flagged-cards.block {
+  display: flex;
+  justify-content: center;
+}
+
 .flagged-cards {
   margin: 32px auto;
 }
@@ -33,6 +38,8 @@
   list-style: none;
   padding: 0;
   margin: 0;
+
+  /* justify-content: center; */
 }
 
 .flagged-cards.block ul li {
@@ -54,10 +61,35 @@
   color: #000;
   font-weight: bold;
   text-align: center;
-  padding: 1px 0;
   font-size: 12px;
   letter-spacing: 1.5px;
-  min-height: 45px;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flagged-cards-banner-alt {
+  background: var(--neutral-black-200);
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flagged-cards-banner-alt-inner {
+  background: var(--neutral-black-200);
+  color: var(--orange);
+  border: 1px solid var(--orange);
+  font-weight: bold;
+  font-size: 10px;
+  letter-spacing: 1.2px;
+  text-align: center;
+  padding: 4px 16px;
+  line-height: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .flagged-cards-banner.empty-banner {
@@ -130,7 +162,8 @@
 li:hover .flagged-cards,
 li:hover .flagged-cards .flagged-cards-banner.empty-banner,
 li:hover .flagged-cards-alt,
-li:hover .flagged-cards-content-alt {
+li:hover .flagged-cards-content-alt,
+li:hover .flagged-cards-banner-alt {
   background: var(--orange);
 }
 
@@ -181,6 +214,7 @@ li:hover .flagged-cards-alt .flagged-cards-button a {
 .flagged-cards-title,
 .flagged-cards-description,
 .flagged-cards-button,
-.flagged-cards-content-alt {
+.flagged-cards-content-alt,
+.flagged-cards-banner-alt {
   transition: all 0.3s ease;
 }
diff --git a/blocks/flagged-cards/flagged-cards.js b/blocks/flagged-cards/flagged-cards.js
index 1b96ee7a..cec9bc2b 100644
--- a/blocks/flagged-cards/flagged-cards.js
+++ b/blocks/flagged-cards/flagged-cards.js
@@ -1,9 +1,5 @@
-// TODO: - Fix case where there is nothing placed in the banner... its still showing a small patch
-//         yellow at the top and the card isnt the same height as everything else
-//       - Add the 3rd mockup card as well (use the 6th column to make custom styles or something)
-//       - Also make sure that normal pictures work too, we are currently using ":potholes:" etc
-//       - When you hover the invisible padding above and below the cards, it still hovers orange
-//       - Test alt style empty banner
+// TODO: - Ask about how we should handle images... actual images are taller/wider
+//         than the icons, so the cards/image content becomes larger
 
 import { createOptimizedPicture } from '../../scripts/aem.js';
 import {
@@ -27,7 +23,6 @@ export default function decorate(block) {
 
     $ul.append(
       li(
-
         div(
           {
             class: hasAltStyle === 'alt'
@@ -38,9 +33,25 @@ export default function decorate(block) {
           // Banner
           div(
             {
-              class: `flagged-cards-banner ${hasBannerContent ? '' : 'empty-banner'}`,
+              class: `
+      ${hasAltStyle === 'alt'
+    ? 'flagged-cards-banner-alt'
+    : 'flagged-cards-banner'}
+      ${hasBannerContent ? '' : 'empty-banner'}
+    `,
             },
-            hasBannerContent ? banner : '',
+
+            // eslint-disable-next-line no-nested-ternary
+            hasBannerContent
+              ? (
+                hasAltStyle === 'alt'
+                  ? div(
+                    { class: 'flagged-cards-banner-alt-inner' },
+                    banner,
+                  )
+                  : banner
+              )
+              : '',
           ),
 
           // Main content

From b044ef7c790509c34a3dd70261371f684d646791 Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Wed, 27 May 2026 12:33:20 -0700
Subject: [PATCH 07/11] mobile responsiveness and image alignment fixes

---
 blocks/flagged-cards/flagged-cards.css | 37 +++++++-------------------
 blocks/flagged-cards/flagged-cards.js  |  3 +--
 2 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/blocks/flagged-cards/flagged-cards.css b/blocks/flagged-cards/flagged-cards.css
index cf000d5e..4e2eca01 100644
--- a/blocks/flagged-cards/flagged-cards.css
+++ b/blocks/flagged-cards/flagged-cards.css
@@ -7,16 +7,6 @@
   margin-bottom: 1em;
 }
 
-/* .flagged-cards.block {
-  display: flex;
-  margin: 20px 0;
-} */
-
-.flagged-cards.block {
-  display: flex;
-  justify-content: center;
-}
-
 .flagged-cards {
   margin: 32px auto;
 }
@@ -32,30 +22,18 @@
 }
 
 .flagged-cards.block ul {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 320px));
   gap: 24px;
+  justify-content: center;
   list-style: none;
-  padding: 0;
-  margin: 0;
 
-  /* justify-content: center; */
 }
 
 .flagged-cards.block ul li {
-  flex: 0 0 320px;
   list-style: none;
-
-  /* border: 1px solid #e5e5e5; */
 }
 
-/* .flagged-cards {
-  width: 320px;
-  overflow: hidden;
-  border: 1px solid #e5e5e5;
-  background: #fff;
-} */
-
 .flagged-cards-banner {
   background: #f1c40f;
   color: #000;
@@ -123,12 +101,15 @@
   justify-content: center;
 }
 
-/* .flagged-cards-img .icon img {
+.flagged-cards-img picture,
+.flagged-cards-img img {
+  max-width: 750px;
+  aspect-ratio: 1 / 1;
   width: 100%;
   height: 100%;
-  object-fit: contain;
   display: block;
-} */
+  object-fit: contain;
+}
 
 .flagged-cards-title {
   margin: 0;
diff --git a/blocks/flagged-cards/flagged-cards.js b/blocks/flagged-cards/flagged-cards.js
index cec9bc2b..a00b81db 100644
--- a/blocks/flagged-cards/flagged-cards.js
+++ b/blocks/flagged-cards/flagged-cards.js
@@ -1,5 +1,4 @@
-// TODO: - Ask about how we should handle images... actual images are taller/wider
-//         than the icons, so the cards/image content becomes larger
+// TODO: - Fix the Newsletter and Quick Links text... something to do with the :not rule
 
 import { createOptimizedPicture } from '../../scripts/aem.js';
 import {

From 3e21b24714344f4124efd4cadbaaf3970019230b Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Tue, 2 Jun 2026 07:21:18 -0700
Subject: [PATCH 08/11] flagged-cards: add ellipsis after 5 lines

---
 blocks/flagged-cards/flagged-cards.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/blocks/flagged-cards/flagged-cards.css b/blocks/flagged-cards/flagged-cards.css
index 4e2eca01..ffcb2db5 100644
--- a/blocks/flagged-cards/flagged-cards.css
+++ b/blocks/flagged-cards/flagged-cards.css
@@ -121,9 +121,12 @@
 .flagged-cards-description {
   margin: 0;
   font-size: 14px;
-
-  /* color: #555; */
   text-align: center;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .flagged-cards-button {

From 02546d3ce940efc069c75d46a2ba6e259fded8ca Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Thu, 4 Jun 2026 08:33:31 -0700
Subject: [PATCH 09/11] flagged-cards: fix css to not override link color

---
 styles/styles.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styles/styles.css b/styles/styles.css
index 187066cc..703eb43d 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -208,7 +208,6 @@ main pre {
 
 /* links */
 a:any-link:not(.flagged-cards a) {
-  color: var(--primary-orange-600);
   text-decoration: underline;
   text-decoration-thickness: 6%;
   text-underline-offset: 12%;

From 432ef477731138dd43f14b115deb8a4a561c00f7 Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Thu, 4 Jun 2026 08:40:40 -0700
Subject: [PATCH 10/11] flagged-cards: remove css

---
 styles/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/styles/styles.css b/styles/styles.css
index 703eb43d..187066cc 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -208,6 +208,7 @@ main pre {
 
 /* links */
 a:any-link:not(.flagged-cards a) {
+  color: var(--primary-orange-600);
   text-decoration: underline;
   text-decoration-thickness: 6%;
   text-underline-offset: 12%;

From 4aafcf2dfb03eb782a2ebe6b440c4082daf02148 Mon Sep 17 00:00:00 2001
From: Jason Lui <Jason.Lui@ClarkCountyNV.gov>
Date: Thu, 4 Jun 2026 08:42:33 -0700
Subject: [PATCH 11/11] flagged-cards: revert :not selectors for links in
 styles.css

---
 styles/styles.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/styles.css b/styles/styles.css
index 187066cc..4613c79d 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -207,18 +207,18 @@ main pre {
 }
 
 /* links */
-a:any-link:not(.flagged-cards a) {
+a:any-link {
   color: var(--primary-orange-600);
   text-decoration: underline;
   text-decoration-thickness: 6%;
   text-underline-offset: 12%;
 }
 
-a:hover:not(.flagged-cards a) {
+a:hover {
   color: var(--primary-orange-900);
 }
 
-a:focus:not(.flagged-cards a) {
+a:focus {
   color: var(--primary-orange-900);
   background-color: transparent;
   border: 1px solid var(--primary-blue-900);