diff --git a/.changeset/the-man.md b/.changeset/the-man.md
new file mode 100644
index 000000000..73cd0ab0d
--- /dev/null
+++ b/.changeset/the-man.md
@@ -0,0 +1,5 @@
+---
+"@nordcom/nordstar-card": patch
+---
+
+Add `<Card.Divider/>` child component.
diff --git a/packages/components/card/src/card.module.scss b/packages/components/card/src/card.module.scss
index 35686863b..073297d62 100644
--- a/packages/components/card/src/card.module.scss
+++ b/packages/components/card/src/card.module.scss
@@ -1,12 +1,20 @@
 .container {
-    padding: var(--layout-block-padding);
-
     border-width: var(--border-width-half);
     border-style: solid;
     border-radius: var(--border-radius);
 
     font-family: var(--font-body);
 
+    &:not([data-padding='false']) {
+        $padding: var(--layout-block-padding);
+
+        padding: $padding;
+
+        .divider {
+            margin: $padding calc($padding * -1);
+        }
+    }
+
     &[data-variant='solid'] {
         border-width: 0;
 
@@ -36,4 +44,11 @@
     &[data-color='secondary'] {
         border-color: var(--color-accent-secondary);
     }
+
+    .divider {
+        height: var(--border-width-half);
+
+        // TODO: Use the proper color based on `data-color`.
+        background: var(--color-background-highlight);
+    }
 }
diff --git a/packages/components/card/src/card.stories.tsx b/packages/components/card/src/card.stories.tsx
index 3a885cbaa..bb811c9b5 100644
--- a/packages/components/card/src/card.stories.tsx
+++ b/packages/components/card/src/card.stories.tsx
@@ -20,13 +20,26 @@ const story: Meta<typeof Card> = {
     }
 };
 
-const Template = (args: CardProps) => <Card {...args}>Content inside of the card</Card>;
+const Template = (args: CardProps<any>) => <Card {...args} style={{ width: '18rem', maxWidth: '100%' }} />;
 
 export const Default = {
     render: Template,
     args: {
         variant: 'default',
-        color: 'default'
+        color: 'default',
+        children: (
+            <>
+                Hello World!
+                <Card.Divider />
+                Content inside of the card
+                <br />
+                Another line of content inside of the card.
+                <br />
+                And another one.
+                <Card.Divider />
+                Imaginary footer
+            </>
+        )
     }
 };
 
@@ -34,21 +47,24 @@ export const DefaultSolid = {
     render: Template,
     args: {
         variant: 'solid',
-        color: 'default'
+        color: 'default',
+        children: <>Content inside of the card</>
     }
 };
 export const PrimarySolid = {
     render: Template,
     args: {
         variant: 'solid',
-        color: 'primary'
+        color: 'primary',
+        children: <>Content inside of the card</>
     }
 };
 export const SecondarySolid = {
     render: Template,
     args: {
         variant: 'solid',
-        color: 'secondary'
+        color: 'secondary',
+        children: <>Content inside of the card</>
     }
 };
 
diff --git a/packages/components/card/src/card.tsx b/packages/components/card/src/card.tsx
index 6e8d57e4f..9de316470 100644
--- a/packages/components/card/src/card.tsx
+++ b/packages/components/card/src/card.tsx
@@ -1,13 +1,13 @@
 import type { As, CSSCustomProperties, NordstarColor } from '@nordcom/nordstar-system';
-import { forwardRef } from '@nordcom/nordstar-system';
+import type { ComponentProps, ElementType } from 'react';
 import styles from './card.module.scss';
 
-export type CardProps = {
+export type CardProps<T extends As> = {
     as?: As;
     variant?: 'default' | 'solid';
     color?: NordstarColor;
     style?: CSSCustomProperties;
-};
+} & ComponentProps<T>;
 
 /**
  * `<Card/>`, a component to render cards.
@@ -18,14 +18,31 @@ export type CardProps = {
  * @param {NordstarColor} [props.color='default'] - The color scheme of the card.
  * @returns {React.ReactNode} The `<Card/>` component.
  */
-const Card = forwardRef<'section', CardProps>(
-    ({ as: Tag = 'section', className, variant = 'default', color = 'default', ...props }, ref) => {
-        const classes = `${styles.container}${className ? ` ${className}` : ''}`;
-
-        return <Tag ref={ref} data-variant={variant} data-color={color} {...props} className={classes} />;
-    }
-);
+const Card = <T extends As = ElementType<'section'>>({
+    as: Tag = 'section' as T,
+    className,
+    variant = 'default',
+    color = 'default',
+    ...props
+}: CardProps<T>) => {
+    const classes = `${styles.container}${className ? ` ${className}` : ''}`;
 
+    return <Tag data-variant={variant} data-color={color} {...props} className={classes} />;
+};
 Card.displayName = 'Nordstar.Card';
 
-export default Card;
+export type CardDividerProps = {} & ComponentProps<'hr'>;
+
+/**
+ * `<Card.Divider/>`, a component to render card dividers.
+ * @param {object} props - `<Card.Divider/>` props.
+ * @returns {React.ReactNode} The `<Card.Divider/>` component.
+ */
+const Divider = ({ className, ...props }: CardDividerProps) => {
+    const classes = `${styles.divider}${className ? ` ${className}` : ''}`;
+
+    return <section {...props} className={classes} />;
+};
+Divider.displayName = 'Nordstar.Card.Divider';
+
+export default Object.assign(Card, { Divider });