diff --git a/packages/clay-css/src/scss/components/_cards.scss b/packages/clay-css/src/scss/components/_cards.scss index 831dae6a66..8998e88f20 100644 --- a/packages/clay-css/src/scss/components/_cards.scss +++ b/packages/clay-css/src/scss/components/_cards.scss @@ -448,6 +448,10 @@ @include clay-card-type-asset-variant($file-card); } +.user-card { + @include clay-card-type-asset-variant($user-card); +} + // Card Type Directory .card-type-directory { diff --git a/packages/clay-css/src/scss/mixins/_cards.scss b/packages/clay-css/src/scss/mixins/_cards.scss index 6ebdabb050..f9bef87dbe 100644 --- a/packages/clay-css/src/scss/mixins/_cards.scss +++ b/packages/clay-css/src/scss/mixins/_cards.scss @@ -95,6 +95,8 @@ $aspect-ratio-checkered-bg: map-get($map, aspect-ratio-checkered-bg); $asset-icon-color: map-get($map, asset-icon-color); + $asset-icon-min-width: map-get($map, asset-icon-min-width); + $asset-icon-width: map-get($map, asset-icon-width); @if ($enabled) { .aspect-ratio { @@ -107,6 +109,8 @@ .card-type-asset-icon { color: $asset-icon-color; + min-width: $asset-icon-min-width; + width: $asset-icon-width; } } } diff --git a/packages/clay-css/src/scss/variables/_cards.scss b/packages/clay-css/src/scss/variables/_cards.scss index 55d2a43af2..9f0428b3a2 100644 --- a/packages/clay-css/src/scss/variables/_cards.scss +++ b/packages/clay-css/src/scss/variables/_cards.scss @@ -84,6 +84,12 @@ $file-card: map-merge(( asset-icon-color: $gray-600 ), $file-card); +$user-card: () !default; +$user-card: map-merge(( + asset-icon-min-width: 2.5rem, + asset-icon-width: 26% +), $user-card); + $card-page-item-asset: () !default; $card-page-item-asset: map-merge(( base: (