diff --git a/docs/components/card.md b/docs/components/card.md
index 787aadf0..bfe762b2 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -5,17 +5,24 @@ title: Card
 
 <page-intro>Cards are a unit of content, they typically have an image, a heading, and a small amount of copy. They are often used as links.</page-intro>
 
-<component 
+<component
     name="Card"
     component="card"
-    variation="card" 
+    variation="card"
     >
 </component>
 
-<component 
+<component
+    name="Card as a row"
+    component="card"
+    variation="card--row"
+    >
+</component>
+
+<component
     name="Card as a link"
     component="card"
-    variation="card--link" 
+    variation="card--link"
     >
 </component>
 
@@ -26,3 +33,4 @@ Use these modifiers with `.ray-card` class.
 | Selector          | Description                                 |
 | ----------------- | ------------------------------------------- |
 | `.ray-card--link` | Selector for applying link and hover styles |
+| `.ray-card--row`  | Selector for applying row direction         |
diff --git a/docs/html/card/card--row.html b/docs/html/card/card--row.html
new file mode 100644
index 00000000..6f1c80a8
--- /dev/null
+++ b/docs/html/card/card--row.html
@@ -0,0 +1,16 @@
+<div class="ray-card ray-card--row">
+  <div class="ray-card__image ray-image ray-image--16by9">
+    <img
+      src="https://source.unsplash.com/random/800x450?minimalist"
+      alt="card graphic"
+    />
+  </div>
+
+  <div class="ray-card__content">
+    <div class="ray-card__heading">Better Together</div>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
+      minima itaque sint! Doloremque odio quia saepe.
+    </div>
+  </div>
+</div>
diff --git a/packages/core/src/components/card/_card.scss b/packages/core/src/components/card/_card.scss
index a2b89743..3809eed5 100644
--- a/packages/core/src/components/card/_card.scss
+++ b/packages/core/src/components/card/_card.scss
@@ -40,20 +40,86 @@
       }
     }
 
+    $ray-image-ratio-map-half: (
+      4by3: calc(50% / (4 / 3)),
+      3by4: calc(50% / (3 / 4)),
+      1by1: calc(50% / 1),
+      16by9: calc(50% / (16 / 9)),
+      cinema: calc(50% / 2.4)
+    );
+
+    &--row {
+      @media (min-width: map-get($ray-layout-grid-breakpoints, desktop)) {
+        @each $ratio, $value in $ray-image-ratio-map-half {
+          .#{$ray-class-prefix}image--#{$ratio} {
+            padding-bottom: $value;
+          }
+        }
+
+        @each $ratio, $value in $ray-image-ratio-map-half {
+          .#{$ray-class-prefix}bg--#{$ratio} {
+            padding-bottom: $value;
+          }
+        }
+
+        .#{$ray-class-prefix}card__content {
+          padding: 2.5rem;
+
+          &:first-child {
+            border: $ray-border-width solid $ray-color-gray-10;
+            border-right: 0;
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: $ray-border-radius;
+            border-top-right-radius: 0;
+            border-top-left-radius: $ray-border-radius;
+          }
+
+          &:last-child {
+            border-top: $ray-border-width solid $ray-color-gray-10;
+            border-bottom-right-radius: $ray-border-radius;
+            border-top-right-radius: $ray-border-radius;
+            border-bottom-left-radius: 0;
+            border-left: 0;
+          }
+        }
+
+        flex-direction: row;
+
+        .#{$ray-class-prefix}card__image,
+        .#{$ray-class-prefix}card__content {
+          width: 50%;
+        }
+
+        .#{$ray-class-prefix}card__heading {
+          @include ray-h2;
+        }
+
+        .#{$ray-class-prefix}card__image {
+          &:first-child {
+            border-top-right-radius: 0;
+          }
+
+          &:last-child {
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+
     &__content {
       flex-grow: 1;
       padding: $card-padding;
-      border-left: 1px solid $ray-color-gray-10;
-      border-right: 1px solid $ray-color-gray-10;
+      border-left: $ray-border-width solid $ray-color-gray-10;
+      border-right: $ray-border-width solid $ray-color-gray-10;
 
       &:first-child {
-        border-top: 1px solid $ray-color-gray-10;
+        border-top: $ray-border-width solid $ray-color-gray-10;
         border-top-left-radius: $ray-border-radius;
         border-top-right-radius: $ray-border-radius;
       }
 
       &:last-child {
-        border-bottom: 1px solid $ray-color-gray-10;
+        border-bottom: $ray-border-width solid $ray-color-gray-10;
         border-bottom-left-radius: $ray-border-radius;
         border-bottom-right-radius: $ray-border-radius;
       }
diff --git a/packages/core/stories/card.stories.js b/packages/core/stories/card.stories.js
index 1d90322d..3da1c0cf 100644
--- a/packages/core/stories/card.stories.js
+++ b/packages/core/stories/card.stories.js
@@ -2,8 +2,14 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import getPlaceholderURL from './util/placeholder';
+import settings from '../src/global/js/settings';
+
+const viewports = Object.values(settings.breakpointsInPixels).filter(Boolean);
 
 storiesOf('Card', module)
+  .addParameters({
+    chromatic: { viewports }
+  })
   .add('card, link, image on top', () => (
     <a
       href="https://wework.com"
@@ -110,4 +116,55 @@ storiesOf('Card', module)
         <button className="ray-link">Share</button>
       </div>
     </div>
+  ))
+  .add('card, as a row, image on left', () => (
+    <div className="ray-card ray-card--row">
+      <div className="ray-card__image ray-image ray-image--16by9">
+        <img
+          src="https://source.unsplash.com/random/800x450?minimalist"
+          alt="card graphic"
+        />
+      </div>
+      <div className="ray-card__content">
+        <div className="ray-card__heading">Better Together</div>
+        <p className="ray-text--body">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
+          atque minima itaque sint! Doloremque odio quia saepe.
+        </p>
+      </div>
+    </div>
+  ))
+  .add('card, as a row, image on right', () => (
+    <div className="ray-card ray-card--row">
+      <div className="ray-card__content">
+        <div className="ray-card__heading">Better Together</div>
+        <p className="ray-text--body">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
+          atque minima itaque sint! Doloremque odio quia saepe.
+        </p>
+      </div>
+      <div className="ray-card__image ray-image ray-image--16by9">
+        <img
+          src="https://source.unsplash.com/random/800x450?minimalist"
+          alt="card graphic"
+        />
+      </div>
+    </div>
+  ))
+  .add('card, as a row, 4x3 image on left', () => (
+    <div className="ray-card ray-card--row">
+      <div className="ray-card__image ray-image ray-image--4by3">
+        <img
+          src="https://source.unsplash.com/random/800x600?minimalist"
+          alt="card graphic"
+        />
+      </div>
+      <div className="ray-card__content">
+        <div className="ray-card__heading">Better Together</div>
+        <p className="ray-text--body">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
+          atque minima itaque sint! Doloremque odio quia saepe.
+        </p>
+      </div>
+    </div>
   ));