diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index 3b5b9da7d12..c74361be73a 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -63,6 +63,7 @@ display: grid; border: 0; grid-row: span 10; + grid-template-columns: subgrid; grid-template-rows: subgrid; margin-block-end: $spacing-07; outline: 1px solid $border-tile-01; diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss index 9c926c7c0f3..143836fdf3f 100644 --- a/packages/styles/scss/components/card/_card.scss +++ b/packages/styles/scss/components/card/_card.scss @@ -157,7 +157,7 @@ } } - .#{$prefix}--card__copy:not([hidden]) { + .#{$prefix}--card__copy { @include type-style('body-02'); margin-block-end: $spacing-07; @@ -219,10 +219,6 @@ .#{$prefix}--card__copy { margin-block: $spacing-07 0; - - &[hidden] { - margin: 0; - } } svg { @@ -254,6 +250,16 @@ align-items: flex-start; } + .#{$prefix}--card__content { + padding-block-end: $spacing-10; + } + + .#{$prefix}--card__pictogram-wrapper { + position: absolute; + inset-block-end: $spacing-05; + inset-inline-start: $spacing-05; + } + .#{$prefix}--card__copy { margin-block-end: $spacing-07; } @@ -286,6 +292,13 @@ display: flex; flex-direction: column; gap: $spacing-05; + + &[hidden] { + // Need important to force [hidden] to really mean hidden above many + // other variants setting display. + /* stylelint-disable declaration-no-important */ + display: none !important; + } } } diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts index c995926af32..826187b5168 100644 --- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts +++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts @@ -157,18 +157,20 @@ const longHeadingCardGroupItem = ( `; }; -const pictogramCard = (colorScheme) => { +const pictogramCard = (colorScheme, hideDescription = false) => { return html` Aerospace and defence -

- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi - ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis - nostrud exercitation. -

+ ${hideDescription + ? '' + : html`

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, + quis nostrud exercitation. +

`} { cta, addCta, colorScheme, + hideDescription, } = args?.CardGroup ?? {}; const allCards: object[] = []; @@ -294,7 +297,7 @@ export const Default = (args) => { if (cardType === 'Card - pictogram') { for (let i = 0; i < cards; i++) { - allCards.push(pictogramCard(colorScheme)); + allCards.push(pictogramCard(colorScheme, hideDescription)); } } @@ -460,6 +463,10 @@ export default { ['Regular', 'Inverse'], 'Regular' ); + const hideDescription = + cardType === 'Card - pictogram' + ? boolean('Hide description', false) + : false; return { cardType, media, @@ -469,6 +476,7 @@ export default { gridMode, cta, colorScheme, + hideDescription, }; }, },