@codeforamerica/marcomms-design-system 1.16.0 → 1.17.0

package/package.json

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

package/src/components/card.js

@@ -184,99 +184,6 @@ class Card extends LitElement {
       .logo img {
         object-fit: contain;
       }
-
-      /* --- */
-
-      /* Theme: Compact Card */
-
-      .card--compact {
-        --padding: var(--spacing-component-3);
-      }
-
-      .card--compact .title {
-        font-size: var(--font-size-h4);
-        line-height: var(--line-height-h4);
-      }
-
-      .card--compact .action-label {
-        padding-block-start: 0;
-      }
-
-      /* --- */
-
-      /* Theme: Horizontal Card */
-
-      @media (min-width: 768px) {
-        .card--horizontal,
-        a.card--horizontal {
-          align-items: stretch;
-          flex-direction: row;
-        }
-
-        .card--horizontal .visual {
-          aspect-ratio: initial;
-          height: auto;
-          flex: 0 0 50%;
-        }
-
-        .card--horizontal .logo {
-          border-block-end: 0;
-          border-inline-end: 1px solid var(--gray-20);
-        }
-      }
-
-      /* --- */
-
-      /* Theme: Horizontal Compact Card */
-
-      @media (min-width: 768px) {
-        .card--horizontal-compact,
-        a.card--horizontal-compact {
-          align-items: stretch;
-          flex-direction: row;
-        }
-
-        .card--horizontal-compact .visual {
-          aspect-ratio: initial;
-          flex: 0 0 34%;
-          height: auto;
-          position: relative;
-        }
-
-        .card--horizontal-compact .image picture {
-          position: absolute;
-          height: 100%;
-          width: 100%;
-        }
-
-        .card--horizontal-compact .logo {
-          border-block-end: 0;
-          border-right: 1px solid var(--gray-20);
-          padding: var(--spacing-component-4);
-        }
-      }
-
-      .card--horizontal-compact,
-      a.card--horizontal-compact {
-        --padding: var(--spacing-component-3);
-      }
-
-      .card--horizontal-compact .body {
-        gap: var(--spacing-component-2);
-      }
-
-      .card--horizontal-compact .header {
-        margin-block-end: var(--spacing-component-2);
-      }
-
-      .card--horizontal-compact .title {
-        font-size: var(--font-size-h4);
-        line-height: var(--line-height-h4);
-      }
-
-      .card--horizontal-compact .action-label {
-        padding-block-start: var(--spacing-component-2);
-      }
     `,
   ];
   visualTemplate() {
@@ -362,13 +269,13 @@ class Card extends LitElement {
         </div>
         <div class="body">
           ${this.text
-            ? html` <div class="small" .innerHTML="${this.text}"></div> `
+            ? html` <div class="small" .innerHTML=${this.text}></div> `
             : nothing}
           ${this.metaText
             ? html`
                 <div
                   class="meta-text small"
-                  .innerHTML="${this.metaText}"
+                  .innerHTML=${this.metaText}
                 ></div>
               `
             : nothing}

package/src/components/card.stories.js

@@ -6,7 +6,7 @@ export default {
   argTypes: {
     theme: {
       defaultValue: "default",
-      options: ["default", "horizontal", "horizontal-compact"],
+      options: ["default"],
       control: { type: "radio" },
     },
     eyebrow: { type: "string" },
@@ -57,8 +57,8 @@ const Template = ({
     eyebrow="${eyebrow}"
     title="${title}"
     label="${label}"
-    text="${text}"
-    metaText="${metaText}"
+    .text=${text}
+    .metaText=${metaText}
     actionLabel="${actionLabel}"
   >
   </cfa-card>
@@ -71,7 +71,12 @@ Default.args = {
   title: "Automatic Record Clearance",
   label: "Now hiring",
   text: "Working with state governments and communities to fundamentally transform the process of record clearance.",
-  metaText: "Updated September 29, 2022",
+  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/",
@@ -84,7 +89,7 @@ CardWithImage.args = {
   title: "Food benefits",
   label: "",
   text: "Improving access to food assistance and delivery of benefits.",
-  metaText: "",
+  metaText: "Updated April 14, 2026",
   linkUrl:
     "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
   actionLabel: "Learn more",
@@ -112,63 +117,6 @@ CardWithLogo.args = {
   visualAltText: "Code for America logo",
 };
 
-export const CompactCard = Template.bind({});
-CompactCard.args = {
-  theme: "compact",
-  eyebrow: "Program",
-  title: "Food benefits",
-  label: "",
-  text: "Improving access to food assistance and delivery of benefits.",
-  metaText: "",
-  linkUrl:
-    "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
-  actionLabel: "Learn more",
-  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",
-};
-
-export const HorizontalCard = Template.bind({});
-HorizontalCard.args = {
-  theme: "horizontal",
-  eyebrow: "Program",
-  title: "Food benefits",
-  label: "",
-  text: "Improving access to food assistance and delivery of benefits.",
-  metaText: "",
-  linkUrl:
-    "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
-  actionLabel: "Learn more",
-  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",
-};
-
-export const HorizontalCompactCard = Template.bind({});
-HorizontalCompactCard.args = {
-  theme: "horizontal-compact",
-  eyebrow: "Program",
-  title: "Food benefits",
-  label: "",
-  text: "Improving access to food assistance and delivery of benefits.",
-  metaText: "",
-  linkUrl:
-    "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
-  actionLabel: "Learn more",
-  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",
-};
-
 export const SkeletonCard = () => html`
   <cfa-card-skeleton></cfa-card-skeleton>
 `;

package/src/shared/typography.js

@@ -1,76 +1,134 @@
 import { css } from "lit";
 
 export const typographyStyles = css`
-  .serif {
-    font-family: var(--font-family-serif) !important;
-  }
+  // =====
 
-  .sans-serif {
-    font-family: var(--font-family-sans-serif) !important;
+  // Typography spacing
+
+  // Add a single space around paragraphs, blockquotes, and lists
+  p, ul, ol, blockquote {
+    & + * {
+      margin-block-start: var(--spacing, var(--spacing-layout-1, 1.5rem));
+    }
+    * + & {
+      margin-block-start: var(--spacing, var(--spacing-layout-1, 1.5rem));
+    }
   }
 
-  .normal {
-    font-weight: normal !important;
+  h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-1, .display-2 {
+    // Add a single line space after headings
+    & + * {
+      margin-block-start: var(--spacing, var(--spacing-layout-1, 1.5rem));
+    }
+
+    // Add two line spaces before headings
+    * + & {
+      --spacing: var(--spacing-layout-2);
+
+      margin-block-start: --spacing;
+    }
+
+    // Only add a single space between headings and other headings
+    & + & {
+      --spacing: var(--spacing-layout-1);
+    }
+
+    // Reduce space after breadcrumbs and eyebrows
+    cfa-breadcrumbs + & {
+      margin-block-start: var(--spacing-layout-half) !important;
+    }
+
+    .eyebrow + & {
+      margin-block-start: 0 !important;
+    }
   }
 
-  .strong {
-    font-weight: bold !important;
+  h1, .h1, .display-1, .display-2 {
+    text-wrap: balance;
   }
 
-  italic {
-    font-style: italic !important;
+  // =====
+
+  // Font styles
+
+  .regular {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
   }
 
-  .display 1 {
-    font-family: var(--font-family-display-1);
+  .display-1 {
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-display-1);
-    font-weight: var(--font-weight-display-1);
-    letter-spacing: var(--letter-spacing-display-1);
+    font-weight: bold;
     line-height: var(--line-height-display-1);
+    letter-spacing: var(--letter-spacing-display-1);
   }
 
   .display-2 {
-    font-family: var(--font-family-display-2);
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-display-2);
-    font-weight: var(--font-weight-display-2);
-    letter-spacing: var(--letter-spacing-display-2);
+    font-weight: bold;
     line-height: var(--line-height-display-2);
+    letter-spacing: var(--letter-spacing-display-2);
   }
 
+  h1, 
   .h1 {
-    font-family: var(--font-family-h1);
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-h1);
-    font-weight: var(--font-weight-h1);
-    letter-spacing: var(--letter-spacing-h1);
+    font-weight: bold;
     line-height: var(--line-height-h1);
+    letter-spacing: var(--letter-spacing-h1);
   }
 
+  h2, 
   .h2 {
-    font-family: var(--font-family-h2);
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-h2);
-    font-weight: var(--font-weight-h2);
-    letter-spacing: var(--letter-spacing-h2);
+    font-weight: bold;
     line-height: var(--line-height-h2);
+    letter-spacing: var(--letter-spacing-h2);
   }
 
+  h3, 
   .h3 {
-    font-family: var(--font-family-h3);
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-h3);
-    font-weight: var(--font-weight-h3);
-    letter-spacing: var(--letter-spacing-h3);
+    font-weight: bold;
     line-height: var(--line-height-h3);
+    letter-spacing: var(--letter-spacing-h3);
   }
 
+  h4, 
   .h4 {
-    font-family: var(--font-family-h4);
+    font-family: var(--font-family-heading);
     font-size: var(--font-size-h4);
-    font-weight: var(--font-weight-h4);
-    letter-spacing: var(--letter-spacing-h4);
+    font-weight: bold;
     line-height: var(--line-height-h4);
+    letter-spacing: var(--letter-spacing-h4);
+  }
+
+  .extra-large {
+    font-size: var(--font-size-extra-large);
+    line-height: var(--line-height-extra-large);
+    letter-spacing: var(--letter-spacing-extra-large);
+  }
+
+  .large {
+    font-size: var(--font-size-large);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-large);
+  }
+
+  .small {
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-small);
+    letter-spacing: var(--letter-spacing-small);
   }
 
   .eyebrow {
-    font-family: var(--font-family-eyebrow);
+    font-family: var(--font-family-sans-serif);
     font-size: var(--font-size-eyebrow);
     font-weight: var(--font-weight-eyebrow);
     letter-spacing: var(--letter-spacing-eyebrow);
@@ -90,22 +148,272 @@ export const typographyStyles = css`
     margin-block-end: var(--spacing-layout-half);
     position: relative;
     text-transform: uppercase;
+
+    &::after {
+      border-block-end: var(--hairline) solid currentColor;
+      content: "";
+      flex-grow: 1;
+      margin-left: var(--spacing-component-3);
+    }
+  }
+
+  .subtle {
+    opacity: 0.6;
+  }
+
+  .serif {
+    font-family: var(--font-family-serif);
+  }
+
+  .sans-serif {
+    font-family: var(--font-family-sans-serif);
+  }
+
+  i,
+  em,
+  .italic {
+    font-style: italic;
+  }
+
+  b,
+  strong,
+  .strong {
+    font-weight: bold;
+  }
+
+  .normal {
+    font-weight: normal;
+  }
+
+  .prominent-link,
+  a.prominent-link {
+    --accent-color: var(--purple-60);
+
+    font-weight: bold;
+    text-decoration: underline;
+    text-decoration-color: var(--accent-color);
+    text-decoration-thickness: var(--medium);
+    text-underline-offset: 0.4em;
+    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;  
+
+    &:hover {
+      --accent-color: var(--red-60);
+    }
+
+    &:not(:has(cfa-icon))::after {
+      @include icon.icon;
+      
+      content: "arrow_right_alt";
+      display: inline-block;
+      padding-inline-start: 0.1em;
+      text-decoration: none;
+      transition: padding 0.2s ease-in-out;
+      width: 1em;
+    }
+
+    &:not(:has(cfa-icon)):hover::after {
+      padding-inline-start: 0.3em;
+    }
+
+    cfa-icon {
+      text-decoration: none;
+    }
+  }
+
+  .white-text,
+  .text-light /* fallback */ {
+    -moz-osx-font-smoothing: grayscale; // Sharper antialising for white text on a dark background
+    -webkit-font-smoothing: antialiased; // Sharper antialising for white text on a dark background
+    color: var(--white);
+    --link-color: var(--white);
+    --link-hover-color: var(--white);
+  }
+
+  // =====
+
+  // Highlights
+
+  .highlight {  
+    --highlight-offset: 0.2em;
+
+    box-decoration-break: clone;
+    display: inline;
+    background: linear-gradient(to top, transparent 0%, transparent var(--highlight-offset), var(--highlight-color) var(--highlight-offset), var(--highlight-color) calc(var(--highlight-offset) + var(--highlight-thickness)), transparent calc(var(--highlight-offset) + var(--highlight-thickness)), transparent 100%);
+    padding-inline: 0.1em;
+    -webkit-box-decoration-break: clone;
+    margin-inline-start: -0.1em;
+    margin-inline-end: -0.1em;
+    word-wrap: break-word;
+  }
+
+  // ======
+
+  // Lists
+
+  .ul,
+  .content ul {
+    list-style-type: disc;
+    padding-left: var(--spacing-layout-1);
+  }
+
+  .ul + *,
+  .content ul + *,
+  * + .ul,
+  * + .content ul {
+    margin-block-start: var(--spacing, var(--spacing-layout-1));
+  }
+
+  .ul > li,
+  .content ul > li {
+    margin-inline-start: 0;
+    padding-left: var(--spacing-component-2);
+  }
+
+  .ul > li + li,
+  .content ul > li + li {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .ul > li > ul,
+  .content ul > li > ul {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .ol,
+  .content ol {
+    list-style-type: decimal;
+    padding-left: var(--spacing-layout-1);
+  }
+
+  .ol + *,
+  .content ol + *,
+  * + .ol,
+  * + .content ol {
+    margin-block-start: var(--spacing, var(--spacing-layout-1));
+  }
+
+  .ol > li,
+  .content ol > li {
+    margin-inline-start: 0;
+    padding-inline-start: var(--spacing-component-2);
+  }
+
+  .ol > li + li,
+  .content ol > li + li {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .ol > li > ul,
+  .content ol > li > ul {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  .ul--unstyled {
+    list-style: none;
+    padding: 0;
+  }
+
+  .ul--unstyled > li {
+    margin-inline: 0;
+    padding: 0;
   }
 
-  .eyebrow-with-line::after {
-    border-block-end: var(--hairline) solid var(--text-color);
+  .ul--line-separators > li + li::before {
+    border-block-start: 1px solid var(--gray-20);
     content: "";
-    flex-grow: 1;
-    margin-left: var(--spacing-component-3);
+    display: block;
+    margin-block: var(--spacing-layout-half);
+    width: 100%;
   }
 
-  .small {
-    font-size: var(--font-size-small);
-    letter-spacing: var(--letter-spacing-small);
-    line-height: var(--line-height-small);
+  .ul--inline,
+  .ul--inline-with-separators,
+  .ul--inline-with-line-separators {
+    display: inline;
+    list-style: none;
+    padding-inline: 0 !important;
+    padding-left: 0 !important;
   }
 
-  .subtle {
-    color: var(--text-color-subtle);
+  .ul--inline > li,
+  .ul--inline-with-separators > li,
+  .ul--inline-with-line-separators > li {
+    display: inline-block;
+    margin-inline-end: var(--spacing-component-3);
+    padding: 0 !important;
+  }
+
+  .ul--inline li:last-child,
+  .ul--inline-with-separators li:last-child,
+  .ul--inline-with-line-separators li:last-child {
+    margin-inline-end: 0;
+  }
+
+  .ul--inline > li + li,
+  .ul--inline-with-separators > li + li,
+  .ul--inline-with-line-separators > li + li {
+    margin-block-start: 0;
+  }
+
+  .ul--inline-with-separators li,
+  .ul--inline-with-line-separators li {
+    margin-inline-end: 0;
+  }
+
+  .ul--inline-with-separators > li::after {
+    content: "•";
+    margin-inline: var(--spacing-component-2);
+    opacity: 0.5;
+  }
+
+  .ul--inline-with-separators > li:last-child::after {
+    content: "";
+  }
+
+  .ul--inline-with-line-separators > li::after {
+    content: "|";
+    margin-inline: var(--spacing-component-2);
+    opacity: 0.5;
+  }
+
+  .ul--inline-with-line-separators > li:last-child::after {
+    content: "";
+  }
+
+  // ===
+
+  // Horizontal rule
+
+  hr {
+    --color: currentColor;
+
+    background-color: var(--color);
+    border: 0;
+    color: var(--color);
+    display: block;
+    font-size: 0;
+    height: var(--hairline);
+    margin-block: var(--spacing-layout-1);
+    opacity: 0.4;
+  }
+
+  // ===
+
+  // Icons
+
+  .icon {
+    -webkit-font-feature-settings: 'liga';
+    direction: ltr;
+    display: inline-block;
+    font-family: 'Material Symbols Rounded';
+    font-feature-settings: 'liga';
+    font-size: 1.4em; 
+    font-style: normal;
+    font-weight: normal;
+    letter-spacing: normal;
+    text-transform: none;
+    vertical-align: middle;
+    white-space: nowrap;
+    word-wrap: normal;
   }
 `;