diff --git a/addons/rose/addon/components/rose/cards.stories.mdx b/addons/rose/addon/components/rose/cards.stories.mdx
index f91f35961..a032687e2 100644
--- a/addons/rose/addon/components/rose/cards.stories.mdx
+++ b/addons/rose/addon/components/rose/cards.stories.mdx
@@ -10,7 +10,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 A set of cards arranged side-by-side.
 
 <Preview>
-  <Story name="Basic Cards">{{
+  <Story name="Basic Cards" height="20rem">{{
     template: hbs`
       <Rose::Cards as |cards|>
         <cards.link
@@ -23,6 +23,21 @@ A set of cards arranged side-by-side.
           @title="Card Title"
           @description="Description"
         />
+        <cards.link
+          @route="index"
+          @title="Card Title"
+          @description="Description"
+        />
+        <cards.link
+          @route="index"
+          @title="Card Title"
+          @description="Description"
+        />
+        <cards.link
+          @route="index"
+          @title="Card Title"
+          @description="Description"
+        />
       </Rose::Cards>
     `,
     context: {}
diff --git a/addons/rose/addon/styles/rose/components/_cards.scss b/addons/rose/addon/styles/rose/components/_cards.scss
index 72f0c87b7..b3feb536f 100644
--- a/addons/rose/addon/styles/rose/components/_cards.scss
+++ b/addons/rose/addon/styles/rose/components/_cards.scss
@@ -1,3 +1,4 @@
 .rose-cards {
   display: flex;
+  flex-wrap: wrap;
 }
diff --git a/addons/rose/addon/templates/components/rose/cards.hbs b/addons/rose/addon/templates/components/rose/cards.hbs
index 33d116d2f..eafcba07d 100644
--- a/addons/rose/addon/templates/components/rose/cards.hbs
+++ b/addons/rose/addon/templates/components/rose/cards.hbs
@@ -1,4 +1,7 @@
-<div class="rose-cards">
+<div
+  ...attributes
+  class="rose-cards"
+>
   {{yield (hash
     link=(component "rose/card/link")
   )}}