diff --git a/scss/_index.scss b/scss/_index.scss
index 33d57bea7..5c931e9a4 100644
--- a/scss/_index.scss
+++ b/scss/_index.scss
@@ -35,7 +35,7 @@
 
 // Components
 @use "components/accordion"; // details, summary
-@use "components/card"; // article
+@use "components/card"; // article, role="article"
 @use "components/dropdown"; // details.dropdown
 @use "components/group"; // role="group"
 @use "components/loading"; // aria-busy=true
diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index 19d8358f7..d635566f3 100644
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -3,10 +3,11 @@
 
 @if map.get($modules, "components/card") {
   /**
-   * Card (<article>)
+   * Card (<article>, role="article")
    */
 
-  #{$parent-selector} article {
+  #{$parent-selector} article,
+  #{$parent-selector} [role="article"] {
     margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
     padding: var(#{$css-var-prefix}block-spacing-vertical)
       var(#{$css-var-prefix}block-spacing-horizontal);