@arbor-education/design-system.components 0.13.0 → 0.14.0

package/src/components/card/card.scss

@@ -1,6 +1,15 @@
+.ds-card__icon-click {
+  flex-shrink: 0;
+
+  &.ds-icon-arrow-right {
+    display: none;
+  }
+}
+
 .ds-card__container {
   display: flex;
   width: 100%;
+  margin: 0;
   padding: var(--card-spacing-vertical) var(--card-spacing-horizontal);
   flex-direction: column;
   align-items: flex-start;
@@ -12,18 +21,10 @@
   line-height: var(--line-height-default);
   box-sizing: border-box;
 
-  .ds-card__icon-click {
-    flex-shrink: 0;
-
-    &.ds-icon-arrow-right {
-      display: none;
-    }
-  }
-
   &:hover:not(.ds-card__container--disabled) {
     border: var(--border-weight) solid var(--card-hover-color-border);
     background: var(--card-hover-color-background);
-    box-shadow: 0 4px 12px 0 rgb(32 32 32 / 8%);
+    box-shadow: var(--shadow-small);
 
     .ds-card__icon-click {
       &.ds-icon-chevron-right {
@@ -45,6 +46,10 @@
   &--clickable {
     cursor: pointer;
   }
+
+  &--dense {
+    padding: var(--spacing-small);
+  }
 }
 
 .ds-card__content {
@@ -53,27 +58,9 @@
   align-items: flex-start;
   gap: var(--card-spacing-gap-horizontal);
   width: 100%;
+}
 
-  .ds-card__icon-left {
-    flex-shrink: 0;
-  }
-
-  .ds-card__text {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: var(--card-spacing-gap-vertical);
-    flex-grow: 1;
-
-    .ds-card__title {
-      margin: 0;
-      font-family: var(--type-headings-h4-family);
-      font-size: var(--type-headings-h4-size);
-      font-weight: var(--type-headings-h4-weight);
-    }
-
-    .ds-card__paragraph {
-      margin: 0;
-    }
-  }
+.ds-card__body {
+  flex: 1 1 auto;
+  min-width: 0;
 }