diff --git a/.changeset/card-footer-layout.md b/.changeset/card-footer-layout.md
new file mode 100644
index 0000000000..0ed670a99b
--- /dev/null
+++ b/.changeset/card-footer-layout.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: ensure footer is always on the bottom of the card
diff --git a/elements/rh-card/demo/grid.html b/elements/rh-card/demo/grid.html
new file mode 100644
index 0000000000..16789309db
--- /dev/null
+++ b/elements/rh-card/demo/grid.html
@@ -0,0 +1,47 @@
+<div id="card-grid">
+  <rh-card>
+    <h2 slot="header">Grid Card</h2>
+    <p>In a grid, cards will fill all the available vertical space.</p>
+    <rh-cta priority="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <h2 slot="header">Grid Card with More Content</h2>
+    <p>
+      In such a case, all of the grid card's footers should be
+      vertically aligned. Meaning, they should always rest in
+      the bottom of their card. Even when one card has much more
+      content than its neighbour, and thus fill more vertical space
+      in it's body, the footers should still be aligned.
+    </p>
+    <rh-cta priority="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <h2 slot="header">Grid Card</h2>
+    <p>
+      These kinds of situations should best be avoided. See the
+      guidelines for more information.
+    </p>
+    <rh-cta priority="primary" slot="footer">
+      <a href="https://ux.redhat.com/elements/card/guidelines/#vertical-height">Read the Guidelines</a>
+    </rh-cta>
+  </rh-card>
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+</script>
+
+<style>
+#card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--rh-space-lg, 16px);
+}
+</style>
diff --git a/elements/rh-card/demo/rh-card.html b/elements/rh-card/demo/rh-card.html
index 08a3e9029b..20330c6542 100644
--- a/elements/rh-card/demo/rh-card.html
+++ b/elements/rh-card/demo/rh-card.html
@@ -1,10 +1,10 @@
 <rh-card>
-  <h2>Headline, sm</h2>
+  <h2 slot="header">Card</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Nullam eleifend elit sed est egestas, a sollicitudin mauris
      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta slot="footer" priority="primary">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index 6f06e297c2..e6750b0cce 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -28,6 +28,7 @@ article {
   display: flex;
   gap: 0.5em;
   inset-block-end: 0;
+  margin-block-start: auto;
 }
 
 .empty {
@@ -43,7 +44,6 @@ article {
   font-size: inherit !important;
 }
 
-
 #container {
   align-self: stretch;
   display: flex;