@codeforamerica/marcomms-design-system 1.17.2 → 1.18.0

package/dist/index.js

@@ -1466,6 +1466,7 @@
         display: flex;
         flex-direction: column;
         flex-grow: 1;
+        gap: var(--spacing-layout-half);
         padding: var(--padding);
       }
 
@@ -1474,17 +1475,23 @@
         display: flex;
         flex-direction: column;
         gap: var(--spacing-layout-half);
-        margin-block-end: var(--spacing-layout-half);
       }
 
       .body {
         display: flex;
         flex-flow: column nowrap;
+        flex-grow: 1;
         gap: var(--spacing-layout-half);
         height: 100%;
         text-align: var(--text-alignment, start);
       }
 
+      .footer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-layout-half);
+      }
+
       .eyebrow {
         color: var(--purple-60);
       }
@@ -1495,6 +1502,13 @@
 
       .meta-text {
         color: var(--gray-60);
+        border-block-start: var(--hairline) solid var(--gray-40);
+        padding-block-start: var(--spacing-component-2);
+      }
+
+      .card:has(.action-label) .meta-text {
+        border-block-end: var(--hairline) solid var(--gray-40);
+        padding-block-end: var(--spacing-component-2);
       }
 
       .action-label {
@@ -1503,8 +1517,6 @@
         display: inline-block;
         font-size: var(--font-size-small);
         font-weight: bold;
-        margin-block-start: auto;
-        padding-block-start: var(--spacing-component-3);
       }
 
       a:hover .action-label {
@@ -1651,14 +1663,18 @@
         </div>
         <div class="body">
           ${this.text?D` <div class="small" .innerHTML=${this.text}></div> `:K}
-          ${this.metaText?D`
-                <div
-                  class="meta-text small"
-                  .innerHTML=${this.metaText}
-                ></div>
-              `:K}
-          ${this.actionLabel?D` <div class="action-label">${this.actionLabel}</div> `:K}
         </div>
+        ${this.metaText||this.actionLabel?D`
+              <div class="footer">
+                ${this.metaText?D`
+                      <div
+                        class="meta-text small"
+                        .innerHTML=${this.metaText}
+                      ></div>
+                    `:K}
+                ${this.actionLabel?D` <div class="action-label">${this.actionLabel}</div> `:K}
+              </div>
+            `:K}
       </div>
     `}render(){return D`
       ${this.linkUrl?D`
@@ -2338,7 +2354,6 @@
         text-align: center;
         text-decoration: none;
         transition: box-shadow 0.2s ease-in-out;
-        width: 100%;
       }
 
       a.promo:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeforamerica/marcomms-design-system",
-  "version": "1.17.2",
+  "version": "1.18.0",
   "main": "src/index.js",
   "dependencies": {
     "lit": "^3.2.1",

package/src/components/card.js

@@ -63,6 +63,7 @@ class Card extends LitElement {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
+        gap: var(--spacing-layout-half);
         padding: var(--padding);
       }
 
@@ -71,17 +72,23 @@ class Card extends LitElement {
         display: flex;
         flex-direction: column;
         gap: var(--spacing-layout-half);
-        margin-block-end: var(--spacing-layout-half);
       }
 
       .body {
         display: flex;
         flex-flow: column nowrap;
+        flex-grow: 1;
         gap: var(--spacing-layout-half);
         height: 100%;
         text-align: var(--text-alignment, start);
       }
 
+      .footer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-layout-half);
+      }
+
       .eyebrow {
         color: var(--purple-60);
       }
@@ -92,6 +99,13 @@ class Card extends LitElement {
 
       .meta-text {
         color: var(--gray-60);
+        border-block-start: var(--hairline) solid var(--gray-40);
+        padding-block-start: var(--spacing-component-2);
+      }
+
+      .card:has(.action-label) .meta-text {
+        border-block-end: var(--hairline) solid var(--gray-40);
+        padding-block-end: var(--spacing-component-2);
       }
 
       .action-label {
@@ -100,8 +114,6 @@ class Card extends LitElement {
         display: inline-block;
         font-size: var(--font-size-small);
         font-weight: bold;
-        margin-block-start: auto;
-        padding-block-start: var(--spacing-component-3);
       }
 
       a:hover .action-label {
@@ -271,18 +283,24 @@ class Card extends LitElement {
           ${this.text
             ? html` <div class="small" .innerHTML=${this.text}></div> `
             : nothing}
-          ${this.metaText
-            ? html`
-                <div
-                  class="meta-text small"
-                  .innerHTML=${this.metaText}
-                ></div>
-              `
-            : nothing}
-          ${this.actionLabel
-            ? html` <div class="action-label">${this.actionLabel}</div> `
-            : nothing}
         </div>
+        ${(this.metaText || this.actionLabel)
+          ? html`
+              <div class="footer">
+                ${this.metaText
+                  ? html`
+                      <div
+                        class="meta-text small"
+                        .innerHTML=${this.metaText}
+                      ></div>
+                    `
+                  : nothing}
+                ${this.actionLabel
+                  ? html` <div class="action-label">${this.actionLabel}</div> `
+                  : nothing}
+              </div>
+            `
+          : nothing}
       </div>
     `;
   }

package/src/components/card.stories.js

@@ -92,7 +92,7 @@ CardWithImage.args = {
   metaText: "Updated April 14, 2026",
   linkUrl:
     "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
-  actionLabel: "Learn more",
+  actionLabel: "",
   visualType: "image",
   visualUrl:
     "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
@@ -120,3 +120,108 @@ CardWithLogo.args = {
 export const SkeletonCard = () => html`
   <cfa-card-skeleton></cfa-card-skeleton>
 `;
+
+export const CardLayoutExample = () => html`
+  <div class="container-fluid wrapper">
+    <div class="row stretch-md">
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          theme: "default",
+          eyebrow: "Program",
+          title: "Automatic Record Clearance",
+          label: "Now hiring",
+          text: "Working with state governments and communities to fundamentally transform the process of record clearance.",
+          metaText: `
+            <ul class="ul ul--inline-with-separators">
+              <li>Updated May 7, 2026</li>
+              <li>In partnership with the community</li>
+            </ul>
+          `,
+          actionLabel: "Learn more",
+          linkUrl: "https://codeforamerica.org/programs/criminal-justice/automatic-record-clearance/",
+        })}
+      </div>
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          theme: "default",
+          eyebrow: "Program",
+          title: "Food benefits",
+          label: "",
+          text: "Improving access to food assistance and delivery of benefits.",
+          metaText: "Updated April 14, 2026",
+          linkUrl: "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
+          actionLabel: "",
+          visualType: "image",
+          visualUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
+          visualThumbnailUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
+          visualAltText: "Illustration of groceries in a shopping basket and paper bag",
+        })}
+      </div>
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          theme: "default",
+          eyebrow: "Partner",
+          title: "Code for America",
+          label: "Accepting applications",
+          text: "",
+          metaText: "",
+          linkUrl: "https://codeforamerica.org",
+          actionLabel: "Learn more",
+          visualType: "logo",
+          visualUrl: "https://files.codeforamerica.org/2021/05/28124702/code-for-america-logo-black.svg",
+          visualAltText: "Code for America logo",
+        })}
+      </div>
+    </div>
+    <div class="row stretch-md">
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          theme: "default",
+          eyebrow: "Initiative",
+          title: "Voter Registration",
+          label: "",
+          text: "Helping eligible citizens register to vote.",
+          metaText: "Updated March 15, 2026",
+          linkUrl: "https://codeforamerica.org",
+          actionLabel: "",
+          visualType: "image",
+          visualUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
+          visualThumbnailUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
+          visualAltText: "Illustration representing voting",
+        })}
+      </div>
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          theme: "default",
+          eyebrow: "Service",
+          title: "Benefits Enrollment",
+          label: "",
+          text: "Streamlining the process for residents to access vital benefits they qualify for. We work directly with state and local agencies to simplify enrollment workflows.",
+          metaText: "Updated February 28, 2026",
+          linkUrl: "https://codeforamerica.org",
+          actionLabel: "",
+          visualType: "image",
+          visualUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
+          visualThumbnailUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
+          visualAltText: "Illustration representing enrollment",
+        })}
+      </div>
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          theme: "default",
+          eyebrow: "Program",
+          title: "Health Access Initiative",
+          label: "",
+          text: "Connecting communities with healthcare resources.",
+          metaText: "Coming in June 2026",
+          linkUrl: "https://codeforamerica.org",
+          actionLabel: "",
+          visualType: "image",
+          visualUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
+          visualThumbnailUrl: "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
+          visualAltText: "Illustration representing health",
+        })}
+      </div>
+    </div>
+  </div>
+`;

package/src/components/promo.js

@@ -37,7 +37,6 @@ class Promo extends LitElement {
         text-align: center;
         text-decoration: none;
         transition: box-shadow 0.2s ease-in-out;
-        width: 100%;
       }
 
       a.promo:hover {