@purpurds/card 5.34.4 → 5.35.0

package/dist/styles.css

@@ -1 +1 @@
-._purpur-card_1owb4_1{transition:box-shadow var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);overflow:hidden;border-radius:var(--purpur-border-radius-md);container:card/inline-size}@container card (min-width: 600px){._purpur-card_1owb4_1{border-radius:var(--purpur-border-radius-lg)}}._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]){border:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:focus-visible){border-color:var(--purpur-color-border-interactive-subtle-hover);outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:var(--purpur-spacing-50)}._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:not([class*=purpur-card-trigger-item--disabled]):focus-visible) [class*=purpur-card-link-arrow],._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:not([class*=purpur-card-trigger-item--disabled]):focus-visible) [class*=purpur-card-cta]{background:var(--purpur-color-background-interactive-transparent);color:var(--purpur-color-text-interactive-primary);border-color:var(--purpur-color-border-interactive-primary)}._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:hover:not([class*=purpur-card-trigger-item--disabled])){box-shadow:var(--purpur-shadow-sm);outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-primary-hover);outline-offset:-1px}._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:hover:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-link-arrow],._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:hover:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-cta]{background:var(--purpur-color-background-interactive-transparent-hover);color:var(--purpur-color-text-interactive-primary-hover);border-color:var(--purpur-color-border-interactive-primary-hover)}._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:focus-visible:hover:not([class*=purpur-card-trigger-item--disabled])){border-color:var(--purpur-color-border-interactive-subtle-hover);box-shadow:var(--purpur-shadow-sm);outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:var(--purpur-spacing-50)}._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:focus-visible:hover:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-link-arrow],._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:focus-visible:hover:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-cta]{background:var(--purpur-color-background-interactive-transparent-hover);color:var(--purpur-color-text-interactive-primary-hover);border-color:var(--purpur-color-border-interactive-primary-hover)}._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:active:not([class*=purpur-card-trigger-item--disabled])),._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:focus-visible:active:not([class*=purpur-card-trigger-item--disabled])){outline:none;border-color:1px solid var(--purpur-color-border-interactive-primary-active)}._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:active:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-link-arrow],._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:active:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-cta],._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:focus-visible:active:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-link-arrow],._purpur-card_1owb4_1:has([class*=purpur-card-trigger-item]:focus-visible:active:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-cta]{background:var(--purpur-color-background-interactive-transparent-active);color:var(--purpur-color-text-interactive-primary-active);border-color:var(--purpur-color-border-interactive-primary-active)}._purpur-card-badge_r7moe_1{position:absolute;top:var(--purpur-spacing-100);right:var(--purpur-spacing-100)}._purpur-card-content_2uc00_1{display:flex;flex-direction:column;gap:var(--purpur-spacing-250)}._purpur-card-content-container_ueryq_1{display:flex;flex-direction:column;gap:var(--purpur-spacing-300);padding:var(--purpur-spacing-250) var(--purpur-spacing-200)}@media screen and (min-width: 600px){._purpur-card-content-container_ueryq_1{padding:calc(var(--purpur-spacing-400) + var(--purpur-spacing-100)) var(--purpur-spacing-300) var(--purpur-spacing-400) var(--purpur-spacing-300)}}._purpur-card-content-container--footer_ueryq_12{padding:0 var(--purpur-spacing-200) var(--purpur-spacing-200)}@media screen and (min-width: 600px){._purpur-card-content-container--footer_ueryq_12{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-300)}}._purpur-card-cta_10ord_1{align-items:center;border-radius:var(--purpur-border-radius-full);border-width:0;cursor:pointer;display:inline-flex;font-size:var(--purpur-typography-scale-100);font-family:var(--purpur-typography-family-default);font-weight:var(--purpur-typography-weight-medium);gap:var(--purpur-spacing-100);justify-content:center;line-height:var(--purpur-spacing-300);outline:0;position:relative;text-decoration:none;transition:all var(--purpur-motion-duration-100) ease;width:auto}._purpur-card-cta_10ord_1:focus:before{border-radius:var(--purpur-border-radius-full);box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);content:"";display:block;inset:calc(var(--purpur-spacing-25) * -1);position:absolute}._purpur-card-cta_10ord_1:focus:not(:focus-visible):before{box-shadow:none}._purpur-card-cta_10ord_1 svg{display:block}._purpur-card-cta--xs_10ord_33{padding:var(--purpur-spacing-50) var(--purpur-spacing-250)}._purpur-card-cta--xs_10ord_33._purpur-card-cta--icon-only_10ord_36{padding:var(--purpur-spacing-100)}._purpur-card-cta--sm_10ord_39{padding:var(--purpur-spacing-100) var(--purpur-spacing-250)}._purpur-card-cta--sm_10ord_39._purpur-card-cta--icon-only_10ord_36{padding:var(--purpur-spacing-100)}._purpur-card-cta--md_10ord_45{padding:var(--purpur-spacing-150) var(--purpur-spacing-300)}._purpur-card-cta--md_10ord_45._purpur-card-cta--icon-only_10ord_36{padding:var(--purpur-spacing-150)}._purpur-card-cta--lg_10ord_51{padding:var(--purpur-spacing-200) var(--purpur-spacing-400)}._purpur-card-cta--lg_10ord_51._purpur-card-cta--icon-only_10ord_36{padding:var(--purpur-spacing-200)}._purpur-card-cta--full-width_10ord_57{width:100%}._purpur-card-cta--primary_10ord_60{background-color:var(--purpur-color-background-interactive-primary);color:var(--purpur-color-text-interactive-on-primary)}._purpur-card-cta--primary_10ord_60:hover:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-primary-hover)}._purpur-card-cta--primary_10ord_60:active:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-primary-active)}._purpur-card-cta--primary-negative_10ord_70{background-color:var(--purpur-color-background-interactive-primary-negative);color:var(--purpur-color-text-interactive-on-primary-negative)}._purpur-card-cta--primary-negative_10ord_70:hover:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-primary-negative-hover);border-color:var(--purpur-color-background-interactive-primary-negative-hover)}._purpur-card-cta--primary-negative_10ord_70:active:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-primary-negative-active);border-color:var(--purpur-color-background-interactive-primary-negative-active)}._purpur-card-cta--secondary_10ord_82{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary);color:var(--purpur-color-text-interactive-primary)}._purpur-card-cta--secondary_10ord_82:hover:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-card-cta--secondary_10ord_82:active:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-card-cta--secondary-negative_10ord_93{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary-negative);color:var(--purpur-color-text-interactive-primary-negative)}._purpur-card-cta--secondary-negative_10ord_93:hover:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-card-cta--secondary-negative_10ord_93:active:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-card-cta--expressive_10ord_104{background-color:var(--purpur-color-background-interactive-expressive);color:var(--purpur-color-text-interactive-on-expressive)}._purpur-card-cta--expressive_10ord_104:hover:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-expressive-hover)}._purpur-card-cta--expressive_10ord_104:active:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-expressive-active)}._purpur-card-cta--expressive-negative_10ord_114{background-color:var(--purpur-color-background-interactive-expressive-negative);color:var(--purpur-color-text-interactive-on-expressive-negative)}._purpur-card-cta--expressive-negative_10ord_114:hover:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-expressive-negative-hover);color:var(--purpur-color-text-interactive-on-expressive-negative-hover)}._purpur-card-cta--expressive-negative_10ord_114:active:not(._purpur-card-cta--disabled_10ord_64){background-color:var(--purpur-color-background-interactive-expressive-negative-active);color:var(--purpur-color-text-interactive-on-expressive-negative-active)}._purpur-card-cta--secondary_10ord_82._purpur-card-cta--disabled_10ord_64{box-shadow:none}._purpur-card-cta--disabled_10ord_64{background-color:var(--purpur-color-background-interactive-disabled);color:var(--purpur-color-text-weak);cursor:not-allowed}._purpur-card-cta--text_10ord_134{width:100%;box-sizing:border-box}._purpur-card-feature-list_ej4qm_1{list-style-type:none;margin:0;padding:0}._purpur-card-feature-list__list-item_ej4qm_6{align-items:center;display:flex;gap:var(--purpur-spacing-100)}._purpur-card-link-arrow_blsmb_1{align-items:center;border-radius:var(--purpur-border-radius-full);border-width:0;cursor:pointer;display:inline-flex;font-size:var(--purpur-typography-scale-100);font-family:var(--purpur-typography-family-default);font-weight:var(--purpur-typography-weight-medium);gap:var(--purpur-spacing-100);justify-content:center;line-height:var(--purpur-spacing-300);outline:0;position:relative;text-decoration:none;transition:all var(--purpur-motion-duration-100) ease;width:auto}._purpur-card-link-arrow_blsmb_1:focus:before{border-radius:var(--purpur-border-radius-full);box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);content:"";display:block;inset:calc(var(--purpur-spacing-25) * -1);position:absolute}._purpur-card-link-arrow_blsmb_1:focus:not(:focus-visible):before{box-shadow:none}._purpur-card-link-arrow_blsmb_1 svg{display:block}._purpur-card-link-arrow--xs_blsmb_33{padding:var(--purpur-spacing-50) var(--purpur-spacing-250)}._purpur-card-link-arrow--xs_blsmb_33._purpur-card-link-arrow--icon-only_blsmb_36{padding:var(--purpur-spacing-100)}._purpur-card-link-arrow--sm_blsmb_39{padding:var(--purpur-spacing-100) var(--purpur-spacing-250)}._purpur-card-link-arrow--sm_blsmb_39._purpur-card-link-arrow--icon-only_blsmb_36{padding:var(--purpur-spacing-100)}._purpur-card-link-arrow--md_blsmb_45{padding:var(--purpur-spacing-150) var(--purpur-spacing-300)}._purpur-card-link-arrow--md_blsmb_45._purpur-card-link-arrow--icon-only_blsmb_36{padding:var(--purpur-spacing-150)}._purpur-card-link-arrow--lg_blsmb_51{padding:var(--purpur-spacing-200) var(--purpur-spacing-400)}._purpur-card-link-arrow--lg_blsmb_51._purpur-card-link-arrow--icon-only_blsmb_36{padding:var(--purpur-spacing-200)}._purpur-card-link-arrow--full-width_blsmb_57{width:100%}._purpur-card-link-arrow--primary_blsmb_60{background-color:var(--purpur-color-background-interactive-primary);color:var(--purpur-color-text-interactive-on-primary)}._purpur-card-link-arrow--primary_blsmb_60:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-primary-hover)}._purpur-card-link-arrow--primary_blsmb_60:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-primary-active)}._purpur-card-link-arrow--primary-negative_blsmb_70{background-color:var(--purpur-color-background-interactive-primary-negative);color:var(--purpur-color-text-interactive-on-primary-negative)}._purpur-card-link-arrow--primary-negative_blsmb_70:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-primary-negative-hover);border-color:var(--purpur-color-background-interactive-primary-negative-hover)}._purpur-card-link-arrow--primary-negative_blsmb_70:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-primary-negative-active);border-color:var(--purpur-color-background-interactive-primary-negative-active)}._purpur-card-link-arrow--secondary_blsmb_82{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary);color:var(--purpur-color-text-interactive-primary)}._purpur-card-link-arrow--secondary_blsmb_82:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-card-link-arrow--secondary_blsmb_82:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-card-link-arrow--secondary-negative_blsmb_93{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary-negative);color:var(--purpur-color-text-interactive-primary-negative)}._purpur-card-link-arrow--secondary-negative_blsmb_93:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-card-link-arrow--secondary-negative_blsmb_93:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-card-link-arrow--expressive_blsmb_104{background-color:var(--purpur-color-background-interactive-expressive);color:var(--purpur-color-text-interactive-on-expressive)}._purpur-card-link-arrow--expressive_blsmb_104:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-expressive-hover)}._purpur-card-link-arrow--expressive_blsmb_104:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-expressive-active)}._purpur-card-link-arrow--expressive-negative_blsmb_114{background-color:var(--purpur-color-background-interactive-expressive-negative);color:var(--purpur-color-text-interactive-on-expressive-negative)}._purpur-card-link-arrow--expressive-negative_blsmb_114:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-expressive-negative-hover);color:var(--purpur-color-text-interactive-on-expressive-negative-hover)}._purpur-card-link-arrow--expressive-negative_blsmb_114:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-expressive-negative-active);color:var(--purpur-color-text-interactive-on-expressive-negative-active)}._purpur-card-link-arrow--secondary_blsmb_82._purpur-card-link-arrow--disabled_blsmb_64{box-shadow:none}._purpur-card-link-arrow--disabled_blsmb_64{background-color:var(--purpur-color-background-interactive-disabled);color:var(--purpur-color-text-weak);cursor:not-allowed}._purpur-card-overline_192fe_1._purpur-card-overline_192fe_1{color:var(--purpur-color-text-medium);font-size:var(--purpur-typography-scale-75);font-weight:var(--purpur-typography-weight-normal);margin-bottom:var(--purpur-spacing-50)}._purpur-card-root_bqk1d_1{border-radius:var(--purpur-border-radius-md);display:flex;flex-direction:column;overflow:hidden;position:relative}._purpur-card-root--primary_bqk1d_8{background-color:var(--purpur-color-background-primary)}._purpur-card-root--secondary_bqk1d_11{background-color:var(--purpur-color-background-secondary)}._purpur-card-root--full-height_bqk1d_14{height:100%;justify-content:space-between}._purpur-card-trigger-item_1sp43_1{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}._purpur-card-trigger-item--button_1sp43_6{background-color:transparent;border:none;cursor:pointer}._purpur-card-trigger-item--disabled_1sp43_11{cursor:not-allowed}._purpur-card-trigger-item_1sp43_1:focus-visible{outline:none}
+._purpur-card_1ruml_1{transition:box-shadow var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);overflow:hidden;border-radius:var(--purpur-border-radius-md);container:card/inline-size}@container card (min-width: 600px){._purpur-card_1ruml_1{border-radius:var(--purpur-border-radius-lg)}}._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]){border:var(--purpur-border-width-xs) solid transparent}._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:focus-visible){border-color:var(--purpur-color-border-interactive-subtle-hover);outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:var(--purpur-spacing-50)}._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:not([class*=purpur-card-trigger-item--disabled]):focus-visible) [class*=purpur-card-link-arrow],._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:not([class*=purpur-card-trigger-item--disabled]):focus-visible) [class*=purpur-card-cta--button-styling]{background:var(--purpur-color-background-interactive-transparent);color:var(--purpur-color-text-interactive-primary);border-color:var(--purpur-color-border-interactive-primary)}._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:hover:not([class*=purpur-card-trigger-item--disabled])){box-shadow:var(--purpur-shadow-sm);outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-primary-hover);outline-offset:-1px}._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:hover:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-link-arrow],._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:hover:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-cta--button-styling]{background:var(--purpur-color-background-interactive-transparent-hover);color:var(--purpur-color-text-interactive-primary-hover);border-color:var(--purpur-color-border-interactive-primary-hover)}._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:focus-visible:hover:not([class*=purpur-card-trigger-item--disabled])){border-color:var(--purpur-color-border-interactive-subtle-hover);box-shadow:var(--purpur-shadow-sm);outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:var(--purpur-spacing-50)}._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:focus-visible:hover:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-link-arrow],._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:focus-visible:hover:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-cta--button-styling]{background:var(--purpur-color-background-interactive-transparent-hover);color:var(--purpur-color-text-interactive-primary-hover);border-color:var(--purpur-color-border-interactive-primary-hover)}._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:active:not([class*=purpur-card-trigger-item--disabled])),._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:focus-visible:active:not([class*=purpur-card-trigger-item--disabled])){outline:none;border-color:1px solid var(--purpur-color-border-interactive-primary-active)}._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:active:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-link-arrow],._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:active:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-cta--button-styling],._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:focus-visible:active:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-link-arrow],._purpur-card_1ruml_1:has([class*=purpur-card-trigger-item]:focus-visible:active:not([class*=purpur-card-trigger-item--disabled])) [class*=purpur-card-cta--button-styling]{background:var(--purpur-color-background-interactive-transparent-active);color:var(--purpur-color-text-interactive-primary-active);border-color:var(--purpur-color-border-interactive-primary-active)}._purpur-card-badge_r7moe_1{position:absolute;top:var(--purpur-spacing-100);right:var(--purpur-spacing-100)}._purpur-card-content_2uc00_1{display:flex;flex-direction:column;gap:var(--purpur-spacing-250)}._purpur-card-content-container_putaw_1{display:flex;flex-direction:column;gap:var(--purpur-spacing-300);padding:var(--purpur-spacing-250) var(--purpur-spacing-200)}@container card (min-width: 600px){._purpur-card-content-container_putaw_1{padding:calc(var(--purpur-spacing-400) + var(--purpur-spacing-100)) var(--purpur-spacing-300) var(--purpur-spacing-400) var(--purpur-spacing-300)}}._purpur-card-content-container--footer_putaw_12{padding:0 var(--purpur-spacing-200) var(--purpur-spacing-200)}@container card (min-width: 600px){._purpur-card-content-container--footer_putaw_12{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-300)}}._purpur-card-content-container--gap-size--sm_putaw_20{gap:var(--purpur-spacing-100)}._purpur-card-content-container--gap-size--md_putaw_23{gap:var(--purpur-spacing-200)}._purpur-card-content-container--gap-size--lg_putaw_26{gap:var(--purpur-spacing-300)}._purpur-card-cta--button-styling_1wc0z_1{align-items:center;border-radius:var(--purpur-border-radius-full);border-width:0;cursor:pointer;display:inline-flex;font-size:var(--purpur-typography-scale-100);font-family:var(--purpur-typography-family-default);font-weight:var(--purpur-typography-weight-medium);gap:var(--purpur-spacing-100);justify-content:center;line-height:var(--purpur-spacing-300);outline:0;position:relative;text-decoration:none;transition:all var(--purpur-motion-duration-100) ease;width:auto}._purpur-card-cta--button-styling_1wc0z_1:focus:before{border-radius:var(--purpur-border-radius-full);box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);content:"";display:block;inset:calc(var(--purpur-spacing-25) * -1);position:absolute}._purpur-card-cta--button-styling_1wc0z_1:focus:not(:focus-visible):before{box-shadow:none}._purpur-card-cta--button-styling_1wc0z_1 svg{display:block}._purpur-card-cta--button-styling--xs_1wc0z_33{padding:var(--purpur-spacing-50) var(--purpur-spacing-250)}._purpur-card-cta--button-styling--xs_1wc0z_33._purpur-card-cta--button-styling--icon-only_1wc0z_36{padding:var(--purpur-spacing-100)}._purpur-card-cta--button-styling--sm_1wc0z_39{padding:var(--purpur-spacing-100) var(--purpur-spacing-250)}._purpur-card-cta--button-styling--sm_1wc0z_39._purpur-card-cta--button-styling--icon-only_1wc0z_36{padding:var(--purpur-spacing-100)}._purpur-card-cta--button-styling--md_1wc0z_45{padding:var(--purpur-spacing-150) var(--purpur-spacing-300)}._purpur-card-cta--button-styling--md_1wc0z_45._purpur-card-cta--button-styling--icon-only_1wc0z_36{padding:var(--purpur-spacing-150)}._purpur-card-cta--button-styling--lg_1wc0z_51{padding:var(--purpur-spacing-200) var(--purpur-spacing-400)}._purpur-card-cta--button-styling--lg_1wc0z_51._purpur-card-cta--button-styling--icon-only_1wc0z_36{padding:var(--purpur-spacing-200)}._purpur-card-cta--button-styling--full-width_1wc0z_57{width:100%}._purpur-card-cta--button-styling--primary_1wc0z_60{background-color:var(--purpur-color-background-interactive-primary);color:var(--purpur-color-text-interactive-on-primary)}._purpur-card-cta--button-styling--primary_1wc0z_60:hover:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-primary-hover)}._purpur-card-cta--button-styling--primary_1wc0z_60:active:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-primary-active)}._purpur-card-cta--button-styling--primary-negative_1wc0z_70{background-color:var(--purpur-color-background-interactive-primary-negative);color:var(--purpur-color-text-interactive-on-primary-negative)}._purpur-card-cta--button-styling--primary-negative_1wc0z_70:hover:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-primary-negative-hover);border-color:var(--purpur-color-background-interactive-primary-negative-hover)}._purpur-card-cta--button-styling--primary-negative_1wc0z_70:active:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-primary-negative-active);border-color:var(--purpur-color-background-interactive-primary-negative-active)}._purpur-card-cta--button-styling--secondary_1wc0z_82{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary);color:var(--purpur-color-text-interactive-primary)}._purpur-card-cta--button-styling--secondary_1wc0z_82:hover:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-card-cta--button-styling--secondary_1wc0z_82:active:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-card-cta--button-styling--secondary-negative_1wc0z_93{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary-negative);color:var(--purpur-color-text-interactive-primary-negative)}._purpur-card-cta--button-styling--secondary-negative_1wc0z_93:hover:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-card-cta--button-styling--secondary-negative_1wc0z_93:active:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-card-cta--button-styling--expressive_1wc0z_104{background-color:var(--purpur-color-background-interactive-expressive);color:var(--purpur-color-text-interactive-on-expressive)}._purpur-card-cta--button-styling--expressive_1wc0z_104:hover:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-expressive-hover)}._purpur-card-cta--button-styling--expressive_1wc0z_104:active:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-expressive-active)}._purpur-card-cta--button-styling--expressive-negative_1wc0z_114{background-color:var(--purpur-color-background-interactive-expressive-negative);color:var(--purpur-color-text-interactive-on-expressive-negative)}._purpur-card-cta--button-styling--expressive-negative_1wc0z_114:hover:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-expressive-negative-hover);color:var(--purpur-color-text-interactive-on-expressive-negative-hover)}._purpur-card-cta--button-styling--expressive-negative_1wc0z_114:active:not(._purpur-card-cta--button-styling--disabled_1wc0z_64){background-color:var(--purpur-color-background-interactive-expressive-negative-active);color:var(--purpur-color-text-interactive-on-expressive-negative-active)}._purpur-card-cta--cta-styling_1wc0z_126{display:flex;align-items:center;color:var(--purpur-color-text-interactive-primary)}._purpur-card-cta--secondary_1wc0z_131._purpur-card-cta--disabled_1wc0z_131{box-shadow:none}._purpur-card-cta--disabled_1wc0z_131{background-color:var(--purpur-color-background-interactive-disabled);color:var(--purpur-color-text-weak);cursor:not-allowed}._purpur-card-cta--text_1wc0z_139{width:100%;box-sizing:border-box}._purpur-card-feature-list_ej4qm_1{list-style-type:none;margin:0;padding:0}._purpur-card-feature-list__list-item_ej4qm_6{align-items:center;display:flex;gap:var(--purpur-spacing-100)}._purpur-card-heading_8heg4_1{display:flex;align-items:start;justify-content:space-between}._purpur-card-heading__heading_8heg4_6{display:flex;align-items:start;gap:var(--purpur-spacing-150)}._purpur-card-heading__icon_8heg4_11{flex-shrink:0}._purpur-card-link-arrow_blsmb_1{align-items:center;border-radius:var(--purpur-border-radius-full);border-width:0;cursor:pointer;display:inline-flex;font-size:var(--purpur-typography-scale-100);font-family:var(--purpur-typography-family-default);font-weight:var(--purpur-typography-weight-medium);gap:var(--purpur-spacing-100);justify-content:center;line-height:var(--purpur-spacing-300);outline:0;position:relative;text-decoration:none;transition:all var(--purpur-motion-duration-100) ease;width:auto}._purpur-card-link-arrow_blsmb_1:focus:before{border-radius:var(--purpur-border-radius-full);box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);content:"";display:block;inset:calc(var(--purpur-spacing-25) * -1);position:absolute}._purpur-card-link-arrow_blsmb_1:focus:not(:focus-visible):before{box-shadow:none}._purpur-card-link-arrow_blsmb_1 svg{display:block}._purpur-card-link-arrow--xs_blsmb_33{padding:var(--purpur-spacing-50) var(--purpur-spacing-250)}._purpur-card-link-arrow--xs_blsmb_33._purpur-card-link-arrow--icon-only_blsmb_36{padding:var(--purpur-spacing-100)}._purpur-card-link-arrow--sm_blsmb_39{padding:var(--purpur-spacing-100) var(--purpur-spacing-250)}._purpur-card-link-arrow--sm_blsmb_39._purpur-card-link-arrow--icon-only_blsmb_36{padding:var(--purpur-spacing-100)}._purpur-card-link-arrow--md_blsmb_45{padding:var(--purpur-spacing-150) var(--purpur-spacing-300)}._purpur-card-link-arrow--md_blsmb_45._purpur-card-link-arrow--icon-only_blsmb_36{padding:var(--purpur-spacing-150)}._purpur-card-link-arrow--lg_blsmb_51{padding:var(--purpur-spacing-200) var(--purpur-spacing-400)}._purpur-card-link-arrow--lg_blsmb_51._purpur-card-link-arrow--icon-only_blsmb_36{padding:var(--purpur-spacing-200)}._purpur-card-link-arrow--full-width_blsmb_57{width:100%}._purpur-card-link-arrow--primary_blsmb_60{background-color:var(--purpur-color-background-interactive-primary);color:var(--purpur-color-text-interactive-on-primary)}._purpur-card-link-arrow--primary_blsmb_60:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-primary-hover)}._purpur-card-link-arrow--primary_blsmb_60:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-primary-active)}._purpur-card-link-arrow--primary-negative_blsmb_70{background-color:var(--purpur-color-background-interactive-primary-negative);color:var(--purpur-color-text-interactive-on-primary-negative)}._purpur-card-link-arrow--primary-negative_blsmb_70:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-primary-negative-hover);border-color:var(--purpur-color-background-interactive-primary-negative-hover)}._purpur-card-link-arrow--primary-negative_blsmb_70:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-primary-negative-active);border-color:var(--purpur-color-background-interactive-primary-negative-active)}._purpur-card-link-arrow--secondary_blsmb_82{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary);color:var(--purpur-color-text-interactive-primary)}._purpur-card-link-arrow--secondary_blsmb_82:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-card-link-arrow--secondary_blsmb_82:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-card-link-arrow--secondary-negative_blsmb_93{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary-negative);color:var(--purpur-color-text-interactive-primary-negative)}._purpur-card-link-arrow--secondary-negative_blsmb_93:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-card-link-arrow--secondary-negative_blsmb_93:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-card-link-arrow--expressive_blsmb_104{background-color:var(--purpur-color-background-interactive-expressive);color:var(--purpur-color-text-interactive-on-expressive)}._purpur-card-link-arrow--expressive_blsmb_104:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-expressive-hover)}._purpur-card-link-arrow--expressive_blsmb_104:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-expressive-active)}._purpur-card-link-arrow--expressive-negative_blsmb_114{background-color:var(--purpur-color-background-interactive-expressive-negative);color:var(--purpur-color-text-interactive-on-expressive-negative)}._purpur-card-link-arrow--expressive-negative_blsmb_114:hover:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-expressive-negative-hover);color:var(--purpur-color-text-interactive-on-expressive-negative-hover)}._purpur-card-link-arrow--expressive-negative_blsmb_114:active:not(._purpur-card-link-arrow--disabled_blsmb_64){background-color:var(--purpur-color-background-interactive-expressive-negative-active);color:var(--purpur-color-text-interactive-on-expressive-negative-active)}._purpur-card-link-arrow--secondary_blsmb_82._purpur-card-link-arrow--disabled_blsmb_64{box-shadow:none}._purpur-card-link-arrow--disabled_blsmb_64{background-color:var(--purpur-color-background-interactive-disabled);color:var(--purpur-color-text-weak);cursor:not-allowed}._purpur-card-media_udc1o_1{width:100%}._purpur-card-media_udc1o_1 img,._purpur-card-media_udc1o_1 video{width:100%;display:block;object-fit:cover;aspect-ratio:2/1}@container card (min-width: 600px){._purpur-card-media_udc1o_1 img,._purpur-card-media_udc1o_1 video{aspect-ratio:auto;height:100%}}._purpur-card-media-layout_1yfvb_1{display:grid}._purpur-card-media-layout_1yfvb_1>div{order:1}._purpur-card-media-layout_1yfvb_1>div:has(img,video){order:0}@container card (min-width: 600px){._purpur-card-media-layout_1yfvb_1{grid-template-columns:repeat(2,1fr)}._purpur-card-media-layout_1yfvb_1>div{order:0}._purpur-card-media-layout_1yfvb_1>div:has(img,video){order:0}}._purpur-card-overline_192fe_1._purpur-card-overline_192fe_1{color:var(--purpur-color-text-medium);font-size:var(--purpur-typography-scale-75);font-weight:var(--purpur-typography-weight-normal);margin-bottom:var(--purpur-spacing-50)}._purpur-card-root_bqk1d_1{border-radius:var(--purpur-border-radius-md);display:flex;flex-direction:column;overflow:hidden;position:relative}._purpur-card-root--primary_bqk1d_8{background-color:var(--purpur-color-background-primary)}._purpur-card-root--secondary_bqk1d_11{background-color:var(--purpur-color-background-secondary)}._purpur-card-root--full-height_bqk1d_14{height:100%;justify-content:space-between}._purpur-card-trigger-item_1sp43_1{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}._purpur-card-trigger-item--button_1sp43_6{background-color:transparent;border:none;cursor:pointer}._purpur-card-trigger-item--disabled_1sp43_11{cursor:not-allowed}._purpur-card-trigger-item_1sp43_1:focus-visible{outline:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/card",
-  "version": "5.34.4",
+  "version": "5.35.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/card.cjs.js",
   "types": "./dist/card.d.ts",
@@ -16,12 +16,12 @@
   "source": "src/card.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/spinner": "5.34.4",
-    "@purpurds/icon": "5.34.4",
-    "@purpurds/tokens": "5.34.4",
-    "@purpurds/badge": "5.34.4",
-    "@purpurds/visually-hidden": "5.34.4",
-    "@purpurds/paragraph": "5.34.4"
+    "@purpurds/icon": "5.35.0",
+    "@purpurds/paragraph": "5.35.0",
+    "@purpurds/badge": "5.35.0",
+    "@purpurds/spinner": "5.35.0",
+    "@purpurds/tokens": "5.35.0",
+    "@purpurds/visually-hidden": "5.35.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
@@ -46,11 +46,11 @@
     "typescript": "^5.6.3",
     "vite": "5.4.8",
     "vitest": "^2.1.2",
-    "@purpurds/action": "5.34.4",
-    "@purpurds/heading": "5.34.4",
+    "@purpurds/action": "5.35.0",
+    "@purpurds/button": "5.35.0",
+    "@purpurds/heading": "5.35.0",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/button": "5.34.4",
-    "@purpurds/grid": "5.34.4"
+    "@purpurds/grid": "5.35.0"
   },
   "scripts": {
     "build:dev": "vite",

package/src/card-content-container.module.scss

@@ -6,7 +6,7 @@
   gap: var(--purpur-spacing-300);
   padding: var(--purpur-spacing-250) var(--purpur-spacing-200);
 
-  @media screen and (min-width: #{$purpur-breakpoint-md}) {
+  @container card (min-width: #{$purpur-breakpoint-md}) {
     padding: calc(var(--purpur-spacing-400) + var(--purpur-spacing-100)) var(--purpur-spacing-300)
       var(--purpur-spacing-400) var(--purpur-spacing-300);
   }
@@ -14,8 +14,20 @@
   &--footer {
     padding: 0 var(--purpur-spacing-200) var(--purpur-spacing-200);
 
-    @media screen and (min-width: #{$purpur-breakpoint-md}) {
+    @container card (min-width: #{$purpur-breakpoint-md}) {
       padding: 0 var(--purpur-spacing-300) var(--purpur-spacing-300);
     }
   }
+
+  &--gap-size--sm {
+    gap: var(--purpur-spacing-100);
+  }
+
+  &--gap-size--md {
+    gap: var(--purpur-spacing-200);
+  }
+
+  &--gap-size--lg {
+    gap: var(--purpur-spacing-300);
+  }
 }

package/src/card-content-container.tsx

@@ -20,17 +20,20 @@ type CardContentContainerProps = {
    * Flag to remove the top padding
    */
   isFooter?: boolean;
+  gapSize?: "sm" | "md" | "lg";
 };
 
 export const CardContentContainer = ({
   ["data-testid"]: dataTestId = "purpur-card-content-container",
   children,
   isFooter = false,
+  gapSize = "md",
 }: CardContentContainerProps) => {
   return (
     <div
       className={cx([
         rootClassName,
+        `${rootClassName}--gap-size--${gapSize}`,
         {
           [`${rootClassName}--footer`]: isFooter,
         },

package/src/card-cta.module.scss

@@ -2,7 +2,16 @@
 
 .purpur-card-cta {
   $root: &;
-  @include action.action();
+
+  &--button-styling {
+    @include action.action();
+  }
+
+  &--cta-styling {
+    display: flex;
+    align-items: center;
+    color: var(--purpur-color-text-interactive-primary);
+  }
 
   &--secondary#{$root}--disabled {
     box-shadow: none;

package/src/card-cta.tsx

@@ -17,6 +17,10 @@ export type CardCtaProps = {
    */
   iconPosition?: "left" | "right";
   loading?: boolean;
+  /**
+   * Use this to style the cta as a link (no border)
+   */
+  linkStyling?: boolean;
   text?: string;
 };
 
@@ -30,6 +34,7 @@ export const CardCta = ({
   iconPosition = "right",
   loading = false,
   text,
+  linkStyling = false,
   ...props
 }: CardCtaProps) => {
   return (
@@ -37,12 +42,15 @@ export const CardCta = ({
       className={`${cx([
         rootClassName,
         className,
-        `${rootClassName}--md`,
-        `${rootClassName}--secondary`,
+
         {
           [`${rootClassName}--disabled`]: disabled,
-          [`${rootClassName}--icon-only`]: !text,
           [`${rootClassName}--text`]: !!text,
+          [`${rootClassName}--cta-styling`]: linkStyling,
+          [`${rootClassName}--button-styling`]: !linkStyling,
+          [`${rootClassName}--button-styling--md`]: !linkStyling,
+          [`${rootClassName}--button-styling--secondary`]: !linkStyling,
+          [`${rootClassName}--button-styling--icon-only`]: !linkStyling && !text,
         },
       ])} ${rootClassName}`}
       data-testid={dataTestId}

package/src/card-heading.module.scss

@@ -0,0 +1,16 @@
+.purpur-card-heading {
+  display: flex;
+
+  align-items: start;
+  justify-content: space-between;
+
+  &__heading {
+    display: flex;
+    align-items: start;
+    gap: var(--purpur-spacing-150);
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+}

package/src/card-heading.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode } from "react";
+import { type HeadingTagType, Heading } from "@purpurds/heading";
+import c from "classnames/bind";
+
+import styles from "./card-heading.module.scss";
+
+const cx = c.bind(styles);
+
+export type CardHeadingProps = {
+  /**
+   * Use this to set a testid on the feature list
+   */
+  ["data-testid"]?: string;
+  title: string;
+  /**
+   * Use when you want an icon to the left of the title
+   */
+  icon?: React.ReactNode;
+  /**
+   * Use for the CTA, it will positioned to the right
+   */
+  children?: ReactNode;
+  titleTag?: HeadingTagType;
+};
+
+const rootClassName = "purpur-card-heading";
+
+export const CardHeading = ({
+  ["data-testid"]: dataTestId = "purpur-card-heading",
+  title,
+  icon,
+  children,
+  titleTag = "h2",
+}: CardHeadingProps) => (
+  <div className={cx(rootClassName)} data-testid={dataTestId}>
+    <div className={cx(`${rootClassName}__heading`)}>
+      {icon && <div className={cx(`${rootClassName}__icon`)}>{icon}</div>}
+      <Heading tag={titleTag} variant="title-100">
+        {title}
+      </Heading>
+    </div>
+    {children}
+  </div>
+);

package/src/card-media-layout.module.scss

@@ -0,0 +1,22 @@
+@use "@purpurds/tokens/breakpoint/variables" as *;
+
+.purpur-card-media-layout {
+  display: grid;
+
+  > div {
+    order: 1;
+  }
+  > div:has(img, video) {
+    order: 0;
+  }
+
+  @container card (min-width: #{$purpur-breakpoint-md}) {
+    grid-template-columns: repeat(2, 1fr);
+    > div {
+      order: 0;
+    }
+    > div:has(img, video) {
+      order: 0;
+    }
+  }
+}

package/src/card-media-layout.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode } from "react";
+import c from "classnames/bind";
+
+import styles from "./card-media-layout.module.scss";
+
+const cx = c.bind(styles);
+
+export type CardMediaLayoutProps = {
+  ["data-testid"]?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+const rootClassName = "purpur-card-media-layout";
+
+export const CardMediaLayout = ({
+  ["data-testid"]: dataTestId = "purpur-card-media-layout",
+  className,
+  children,
+}: CardMediaLayoutProps) => (
+  <div className={cx([rootClassName, className])} data-testid={dataTestId}>
+    {children}
+  </div>
+);

package/src/card-media.module.scss

@@ -0,0 +1,18 @@
+@use "@purpurds/tokens/breakpoint/variables" as *;
+
+.purpur-card-media {
+  width: 100%;
+
+  img,
+  video {
+    width: 100%;
+    display: block;
+    object-fit: cover;
+    aspect-ratio: 2/1;
+
+    @container card (min-width: #{$purpur-breakpoint-md}) {
+      aspect-ratio: auto;
+      height: 100%;
+    }
+  }
+}

package/src/card-media.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import c from "classnames/bind";
+
+import styles from "./card-media.module.scss";
+
+const cx = c.bind(styles);
+
+export type CardMediaProps = {
+  ["data-testid"]?: string;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+const rootClassName = "purpur-card-media";
+
+export const CardMedia = ({
+  ["data-testid"]: dataTestId = "purpur-card-media",
+  className,
+  children,
+}: CardMediaProps) => (
+  <div className={cx([rootClassName, className])} data-testid={dataTestId}>
+    {children}
+  </div>
+);

package/src/card-trigger-item.tsx

@@ -24,7 +24,7 @@ export const CardTriggerItem = ({
   onClick,
   screenReaderText,
 }: CardTriggerItemProps) => {
-  const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {
+  const handleClick = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void => {
     if (disabled) {
       e.preventDefault();
     } else if (onClick) {
@@ -49,6 +49,7 @@ export const CardTriggerItem = ({
       data-testid={dataTestId}
       href={disabled ? undefined : href}
       tabIndex={disabled ? 0 : undefined}
+      onClick={handleClick}
     >
       <VisuallyHidden>{screenReaderText}</VisuallyHidden>
     </a>

package/src/card.module.scss

@@ -2,7 +2,8 @@
 
 $card-trigger-item-selector: "[class*=" purpur-card-trigger-item "]";
 $card-trigger-item-disabled-selector: "[class*=" purpur-card-trigger-item--disabled "]";
-$card-link-arrow-selector: "[class*=" purpur-card-link-arrow "], [class*=" purpur-card-cta "]";
+$card-link-arrow-selector: "[class*=" purpur-card-link-arrow "], [class*="
+  purpur-card-cta--button-styling "]";
 
 .purpur-card {
   transition: box-shadow var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
@@ -15,7 +16,7 @@ $card-link-arrow-selector: "[class*=" purpur-card-link-arrow "], [class*=" purpu
   }
 
   &:has(#{$card-trigger-item-selector}) {
-    border: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
+    border: var(--purpur-border-width-xs) solid transparent;
   }
 
   &:has(#{$card-trigger-item-selector}:focus-visible) {

package/src/card.stories.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import { Grid } from "@purpurds/grid";
 import { Heading } from "@purpurds/heading";
-import { IconArrowRight, IconCart } from "@purpurds/icon";
+import { IconArrowRight, IconCart, IconSimcard } from "@purpurds/icon";
 import { Paragraph } from "@purpurds/paragraph";
 import type { Meta, StoryObj } from "@storybook/react";
 
@@ -30,6 +30,12 @@ const meta = {
     "Card.FeatureList": Card.FeatureList,
     //@ts-ignore
     "Card.Overline": Card.Overline,
+    //@ts-ignore
+    "Card.Heading": Card.Heading,
+    //@ts-ignore
+    "Card.Media": Card.Media,
+    //@ts-ignore
+    "Card.MediaLayout": Card.MediaLayout,
   },
   args: {
     href: "/?path=/docs/components-card--docs",
@@ -54,13 +60,103 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof Card>;
 
-export const Showcase: Story = {
+const adaptiveBackground = (variant = "primary") => ({
+  margin: "calc(var(--purpur-spacing-250) * -1)",
+  padding: "var(--purpur-spacing-250)",
+  backgroundColor:
+    variant === "primary" ? "var(--purpur-color-background-secondary)" : "transparent",
+});
+
+export const CardWithHeading: Story = {
+  render: (args) => (
+    <div style={adaptiveBackground(args.variant)}>
+      <Grid colsMd={2} colsSm={1} colsLg={4}>
+        {Array(4)
+          .fill(0)
+          .map((_, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Card {...args} key={index}>
+              <Card.ContentContainer gapSize="sm">
+                <Card.Heading title="Tips and tricks" icon={<IconSimcard size="sm" />}>
+                  <Card.Cta linkStyling>
+                    <IconArrowRight size="sm" />
+                  </Card.Cta>
+                </Card.Heading>
+                <Paragraph>
+                  Read about how to improve your self-service experience with our tips and tricks.
+                  Learn how to manage your account, troubleshoot common issues, and make the most
+                  out of our services efficiently and effectively.
+                </Paragraph>
+              </Card.ContentContainer>
+            </Card>
+          ))}
+      </Grid>
+    </div>
+  ),
+  tags: ["visual:check"],
+};
+
+export const CardWithHeadingAndImage: Story = {
+  render: (args) => (
+    <div style={adaptiveBackground(args.variant)}>
+      <Grid colsMd={1}>
+        <Card {...args}>
+          <Card.MediaLayout>
+            <Card.Media>
+              <img
+                alt="A family looking with joy at something"
+                src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
+              />
+            </Card.Media>
+            <Card.ContentContainer gapSize="sm">
+              <Card.Heading title="Tips and tricks" icon={<IconSimcard size="sm" />}>
+                <Card.Cta linkStyling>
+                  <IconArrowRight size="sm" />
+                </Card.Cta>
+              </Card.Heading>
+              <Paragraph>
+                Read about how to improve your self-service experience with our tips and tricks.
+                Learn how to manage your account, troubleshoot common issues, and make the most out
+                of our services efficiently and effectively.
+              </Paragraph>
+            </Card.ContentContainer>
+          </Card.MediaLayout>
+        </Card>
+        <Card {...args}>
+          <Card.MediaLayout>
+            <Card.ContentContainer gapSize="sm">
+              <Card.Heading title="Tips and tricks" icon={<IconSimcard size="sm" />}>
+                <Card.Cta linkStyling>
+                  <IconArrowRight size="sm" />
+                </Card.Cta>
+              </Card.Heading>
+              <Paragraph>
+                Read about how to improve your self-service experience with our tips and tricks.
+                Learn how to manage your account, troubleshoot common issues, and make the most out
+                of our services efficiently and effectively.
+              </Paragraph>
+            </Card.ContentContainer>
+            <Card.Media>
+              <img
+                alt="A family looking with joy at something"
+                src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
+              />
+            </Card.Media>
+          </Card.MediaLayout>
+        </Card>
+      </Grid>
+    </div>
+  ),
+  tags: ["visual:check"],
+};
+
+export const CardWithBadgeAndFeaturelist: Story = {
   render: (args) => (
-    <Grid colsMd={2}>
-      <Card {...args}>
-        <Card.ContentContainer>
-          <Card.Badge variant="information" text="Best hit" />
-          <Card.Content>
+    <div style={adaptiveBackground(args.variant)}>
+      <Grid colsMd={2}>
+        <Card {...args}>
+          <Card.ContentContainer>
+            <Card.Badge variant="information" text="Best hit" />
             <div>
               <Card.Overline overline="TELIA" />
               <Heading tag="h2" variant="title-200">
@@ -78,13 +174,11 @@ export const Showcase: Story = {
                 </Card.Cta>
               </div>
             </div>
-          </Card.Content>
-        </Card.ContentContainer>
-      </Card>
-      <Card {...args}>
-        <Card.ContentContainer>
-          <Card.Badge variant="information" text="Best hit" />
-          <Card.Content>
+          </Card.ContentContainer>
+        </Card>
+        <Card {...args}>
+          <Card.ContentContainer>
+            <Card.Badge variant="information" text="Best hit" />
             <div>
               <Card.Overline overline="TELIA" />
               <Heading tag="h2" variant="title-200">
@@ -101,10 +195,10 @@ export const Showcase: Story = {
                 </Card.Cta>
               </div>
             </div>
-          </Card.Content>
-        </Card.ContentContainer>
-      </Card>
-    </Grid>
+          </Card.ContentContainer>
+        </Card>
+      </Grid>
+    </div>
   ),
   tags: ["visual:check"],
 };

package/src/card.tsx

@@ -7,7 +7,10 @@ import { CardContent } from "./card-content.tsx";
 import { CardContentContainer } from "./card-content-container.tsx";
 import { CardCta } from "./card-cta.tsx";
 import { CardFeatureList } from "./card-feature-list";
+import { CardHeading } from "./card-heading";
 import { CardLinkArrow } from "./card-link-arrow";
+import { CardMedia } from "./card-media";
+import { CardMediaLayout } from "./card-media-layout";
 import { CardOverline } from "./card-overline";
 import type {
   CardRootButtonProps,
@@ -27,6 +30,9 @@ type CardCmp<P> = React.FunctionComponent<P> & {
   FeatureList: typeof CardFeatureList;
   LinkArrow: typeof CardLinkArrow;
   Overline: typeof CardOverline;
+  Heading: typeof CardHeading;
+  Media: typeof CardMedia;
+  MediaLayout: typeof CardMediaLayout;
 };
 
 export type CardProps = CardRootProps;
@@ -61,5 +67,8 @@ Card.ContentContainer = CardContentContainer;
 Card.Cta = CardCta;
 Card.FeatureList = CardFeatureList;
 Card.Overline = CardOverline;
+Card.Heading = CardHeading;
+Card.Media = CardMedia;
+Card.MediaLayout = CardMediaLayout;
 
 Card.displayName = "Card";