diff --git a/packages/webawesome/docs/docs/components/card.md b/packages/webawesome/docs/docs/components/card.md
index 0baa5c6ad..77f3348b1 100644
--- a/packages/webawesome/docs/docs/components/card.md
+++ b/packages/webawesome/docs/docs/components/card.md
@@ -155,3 +155,18 @@ Use the `appearance` attribute to change the card's visual appearance.
   {%- endfor %}
 </div>
 ```
+
+### Orientation
+
+```html {.example}
+<div class="wa-grid">
+  <wa-card orientation="horizontal">
+    <img
+      slot="media"
+      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+    />
+    Outlined (default)
+  </wa-card>
+</div>
+```
diff --git a/packages/webawesome/src/components/card/card.css b/packages/webawesome/src/components/card/card.css
index 2df00d27a..184753e7c 100644
--- a/packages/webawesome/src/components/card/card.css
+++ b/packages/webawesome/src/components/card/card.css
@@ -42,6 +42,11 @@
   border-color: transparent;
 }
 
+/* Orientation Styles */
+:host([orientation='horizontal']) {
+  display: flex;
+}
+
 /* Take care of top and bottom radii */
 .media,
 :host(:not([with-media])) .header,
diff --git a/packages/webawesome/src/components/card/card.ts b/packages/webawesome/src/components/card/card.ts
index 207eaaed2..2d4313420 100644
--- a/packages/webawesome/src/components/card/card.ts
+++ b/packages/webawesome/src/components/card/card.ts
@@ -55,7 +55,7 @@ export default class WaCard extends WebAwesomeElement {
 
   render() {
     if (this.orientation === 'horizontal') {
-      return html`horizontal`;
+      return html`<slot name="media" part="media" class="media"></slot><slot part="body" class="body"></slot>`;
     }
     return html`
       <slot name="media" part="media" class="media"></slot>