diff --git a/angular-workspace/projects/example-client-app/src/app/app.module.ts b/angular-workspace/projects/example-client-app/src/app/app.module.ts
index c47bb4a6ac..02576aa770 100644
--- a/angular-workspace/projects/example-client-app/src/app/app.module.ts
+++ b/angular-workspace/projects/example-client-app/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N
     NimbleCardButtonModule, NimbleDialogModule, NimbleRadioGroupModule, NimbleRadioModule, NimbleSpinnerModule,
     NimbleAnchorModule, NimbleAnchorButtonModule, NimbleAnchorTabModule, NimbleAnchorTabsModule,
     NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule } from '@ni/nimble-angular';
+import { NimbleCardModule } from '@ni/nimble-angular/card';
 import { NimbleLabelProviderCoreModule } from '@ni/nimble-angular/label-provider/core';
 import { NimbleLabelProviderRichTextModule } from '@ni/nimble-angular/label-provider/rich-text';
 import { NimbleLabelProviderTableModule } from '@ni/nimble-angular/label-provider/table';
@@ -72,6 +73,7 @@ import { HeaderComponent } from './header/header.component';
         NimbleComboboxModule,
         NimbleMenuButtonModule,
         NimbleTooltipModule,
+        NimbleCardModule,
         NimbleCardButtonModule,
         NimbleDialogModule,
         NimbleRadioGroupModule,
diff --git a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html
index b0353614f1..e147b09981 100644
--- a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html
+++ b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html
@@ -42,6 +42,19 @@
             <nimble-anchor-button nimbleRouterLink="/customapp" appearance="block">Block Anchor Button</nimble-anchor-button>
             <nimble-anchor-button nimbleRouterLink="/customapp" appearance="ghost">Ghost Anchor Button</nimble-anchor-button>
         </div>
+        <div class="sub-container">
+            <div class="container-label">Card</div>
+            <nimble-card>
+                <span slot="title">Title of the card</span>
+                <nimble-number-field>Numeric field 1</nimble-number-field>
+                <nimble-number-field>Numeric field 2</nimble-number-field>
+                <nimble-select>
+                    <nimble-list-option value="1">Option 1</nimble-list-option>
+                    <nimble-list-option value="2">Option 2</nimble-list-option>
+                    <nimble-list-option value="3">Option 3</nimble-list-option>
+                </nimble-select>
+            </nimble-card>
+        </div>
         <div class="sub-container">
             <div class="container-label">Card Button</div>
             <nimble-card-button>
diff --git a/angular-workspace/projects/ni/nimble-angular/card/ng-package.json b/angular-workspace/projects/ni/nimble-angular/card/ng-package.json
new file mode 100644
index 0000000000..90febd7fae
--- /dev/null
+++ b/angular-workspace/projects/ni/nimble-angular/card/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}
diff --git a/angular-workspace/projects/ni/nimble-angular/card/nimble-card.directive.ts b/angular-workspace/projects/ni/nimble-angular/card/nimble-card.directive.ts
new file mode 100644
index 0000000000..365a6f99c6
--- /dev/null
+++ b/angular-workspace/projects/ni/nimble-angular/card/nimble-card.directive.ts
@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { type Card, cardTag } from '@ni/nimble-components/dist/esm/card';
+
+export type { Card };
+export { cardTag };
+
+/**
+ * Directive to provide Angular integration for the card.
+ */
+@Directive({
+    selector: 'nimble-card'
+})
+export class NimbleCardDirective { }
diff --git a/angular-workspace/projects/ni/nimble-angular/card/nimble-card.module.ts b/angular-workspace/projects/ni/nimble-angular/card/nimble-card.module.ts
new file mode 100644
index 0000000000..7b37f52c08
--- /dev/null
+++ b/angular-workspace/projects/ni/nimble-angular/card/nimble-card.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NimbleCardDirective } from './nimble-card.directive';
+
+import '@ni/nimble-components/dist/esm/card';
+
+@NgModule({
+    declarations: [NimbleCardDirective],
+    imports: [CommonModule],
+    exports: [NimbleCardDirective]
+})
+export class NimbleCardModule { }
diff --git a/angular-workspace/projects/ni/nimble-angular/card/public-api.ts b/angular-workspace/projects/ni/nimble-angular/card/public-api.ts
new file mode 100644
index 0000000000..99d8f624d9
--- /dev/null
+++ b/angular-workspace/projects/ni/nimble-angular/card/public-api.ts
@@ -0,0 +1,2 @@
+export * from './nimble-card.directive';
+export * from './nimble-card.module';
diff --git a/angular-workspace/projects/ni/nimble-angular/card/tests/card.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/card/tests/card.directive.spec.ts
new file mode 100644
index 0000000000..f10eaada17
--- /dev/null
+++ b/angular-workspace/projects/ni/nimble-angular/card/tests/card.directive.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { NimbleCardModule } from '../nimble-card.module';
+
+describe('Nimble card', () => {
+    describe('module', () => {
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                imports: [NimbleCardModule]
+            });
+        });
+
+        it('custom element is defined', () => {
+            expect(customElements.get('nimble-card')).not.toBeUndefined();
+        });
+    });
+});
diff --git a/change/@ni-nimble-angular-fb64a60a-b575-4965-bea7-df33b3911b9f.json b/change/@ni-nimble-angular-fb64a60a-b575-4965-bea7-df33b3911b9f.json
new file mode 100644
index 0000000000..0d3688b73e
--- /dev/null
+++ b/change/@ni-nimble-angular-fb64a60a-b575-4965-bea7-df33b3911b9f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add Angular support for the nimble-card component",
+  "packageName": "@ni/nimble-angular",
+  "email": "35350751+kjohn1922@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@ni-nimble-components-258183d7-7c0f-4208-978c-61b6089e7796.json b/change/@ni-nimble-components-258183d7-7c0f-4208-978c-61b6089e7796.json
new file mode 100644
index 0000000000..0700740a81
--- /dev/null
+++ b/change/@ni-nimble-components-258183d7-7c0f-4208-978c-61b6089e7796.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Workaround for Lighthouse accessibility error in nimble-card. Update Angular status of nimble-card component.",
+  "packageName": "@ni/nimble-components",
+  "email": "35350751+kjohn1922@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/card/styles.ts b/packages/nimble-components/src/card/styles.ts
index 03ede1b905..f7f394c0f1 100644
--- a/packages/nimble-components/src/card/styles.ts
+++ b/packages/nimble-components/src/card/styles.ts
@@ -28,7 +28,7 @@ export const styles = css`
         display: contents;
     }
 
-    ::slotted([slot='title']) {
+    slot[name='title'] {
         font: ${titleFont};
         color: ${titleFontColor};
     }
diff --git a/packages/nimble-components/src/card/template.ts b/packages/nimble-components/src/card/template.ts
index 9969efbd43..d36213099a 100644
--- a/packages/nimble-components/src/card/template.ts
+++ b/packages/nimble-components/src/card/template.ts
@@ -2,7 +2,10 @@ import { html } from '@microsoft/fast-element';
 import type { Card } from '.';
 
 export const template = html<Card>`
-    <section aria-labelledby="title-slot">
+    ${
+    '' /* Explicitly set role to work around Lighthouse error. See https://github.com/ni/nimble/issues/1650. */
+}
+    <section role="region" aria-labelledby="title-slot">
         <slot name="title" id="title-slot"></slot>
         <slot></slot>
     </section>
diff --git a/packages/nimble-components/src/tests/component-status.stories.ts b/packages/nimble-components/src/tests/component-status.stories.ts
index 31b64c4dff..0994c32b61 100644
--- a/packages/nimble-components/src/tests/component-status.stories.ts
+++ b/packages/nimble-components/src/tests/component-status.stories.ts
@@ -114,7 +114,7 @@ const components = [
         issueHref: 'https://github.com/ni/nimble/issues/296',
         issueLabel: 'Issue',
         componentStatus: ComponentFrameworkStatus.incubating,
-        angularStatus: ComponentFrameworkStatus.doesNotExist,
+        angularStatus: ComponentFrameworkStatus.incubating,
         blazorStatus: ComponentFrameworkStatus.incubating
     },
     {