chore(Card): add "no padding" example (#4212)

dnbexperience · Nov 4, 2024 · c7459e2 · c7459e2
1 parent ad3ce2d
commit c7459e2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx
@@ -208,6 +208,16 @@ export const WithHeadingsAndAriaLabel = () => {
   )
 }
 
+export const WithoutPadding = () => {
+  return (
+    <ComponentBox>
+      <Card innerSpace={false} align="stretch">
+        <P>no inner space</P>
+      </Card>
+    </ComponentBox>
+  )
+}
+
 export const WithNestedSection = () => {
   return (
     <ComponentBox data-visual-test="card-nested-section">

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx
@@ -20,8 +20,16 @@ import * as Examples from './Examples'
 
 ### Stack
 
+The Card components needs to have `stack={true}` or `align="stretch"` in order to stretch its children components.
+
+For [form components](uilib/extensions/forms/), you should use `stack={true}` to get the correct spacing.
+
 <Examples.Stack />
 
+### Without padding
+
+<Examples.WithoutPadding />
+
 ### With nested Section
 
 The Card components needs to have `stack={true}` or `align="stretch"` in order to stretch its children components.