diff --git a/packages/dnb-eufemia/src/components/card/__tests__/Card.screenshot.test.ts b/packages/dnb-eufemia/src/components/card/__tests__/Card.screenshot.test.ts index de75df5288c..f1bd5bb4ea7 100644 --- a/packages/dnb-eufemia/src/components/card/__tests__/Card.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/card/__tests__/Card.screenshot.test.ts @@ -27,3 +27,16 @@ describe('Card', () => { expect(screenshot).toMatchImageSnapshot() }) }) + +describe('Card', () => { + it('have to match border in small screen size', async () => { + const screenshot = await makeScreenshot({ + pageViewport: { + width: 400, + }, + url: '/uilib/components/card/demos', + selector: '[data-visual-test="layout-card-border"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) +}) diff --git a/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-have-to-match-border-in-small-screen-size.snap.png b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-have-to-match-border-in-small-screen-size.snap.png new file mode 100644 index 00000000000..60d9722c86a Binary files /dev/null and b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-have-to-match-border-in-small-screen-size.snap.png differ diff --git a/packages/dnb-eufemia/src/components/card/style/dnb-card.scss b/packages/dnb-eufemia/src/components/card/style/dnb-card.scss index d9e536bd09e..b38af56b20b 100644 --- a/packages/dnb-eufemia/src/components/card/style/dnb-card.scss +++ b/packages/dnb-eufemia/src/components/card/style/dnb-card.scss @@ -1,3 +1,5 @@ +@import '../../../style/core/utilities.scss'; + .dnb-card { --background-color: var(--color-white); --border-color: var(--color-lavender); @@ -11,6 +13,12 @@ border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); + @include allBelow(small) { + --border-radius: 0; + border-left: none; + border-right: none; + } + &__heading { font-size: var(--font-size-basis); font-weight: var(--font-weight-medium);