diff --git a/.changeset/clean-tools-happen.md b/.changeset/clean-tools-happen.md
new file mode 100644
index 000000000..86b053ca4
--- /dev/null
+++ b/.changeset/clean-tools-happen.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add the `c-card--circle-cover` modifier for circular card covers, intended for team member listings
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index fd311105a..12cef9998 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -75,6 +75,14 @@ $_focus-overflow: (size.$edge-large * -1);
   }
 }
 
+/**
+ * Center-align text content to better match a circular cover image
+ */
+
+.c-card--circle-cover {
+  text-align: center;
+}
+
 /**
  * Responsive horizontal modifiers
  *
@@ -101,6 +109,21 @@ $_focus-overflow: (size.$edge-large * -1);
       'cover cover .';
     grid-template-columns: repeat(3, 1fr); /* 2 */
     grid-template-rows: 1fr repeat(3, minmax(0, auto)) 1fr; /* 3 */
+
+    /**
+     * When the cover image is circular (and thus taller), give it a smaller
+     * amount of space and keep the text left-aligned.
+     */
+
+    &.c-card--circle-cover {
+      grid-template-areas:
+        'cover . .'
+        'cover header header'
+        'cover content content'
+        'cover footer footer'
+        'cover . .';
+      text-align: left;
+    }
   }
 }
 
@@ -204,6 +227,18 @@ $_focus-overflow: (size.$edge-large * -1);
   grid-area: cover;
   @include ratio-box.core-styles($ratio: aspect-ratio.$wide);
 
+  /**
+   * Square aspect ratio + fully rounded corners = circular cover image
+   */
+
+  .c-card--circle-cover & {
+    border-radius: size.$border-radius-full;
+
+    &::before {
+      padding-bottom: 100%;
+    }
+  }
+
   /**
    * Since this element is always visually on top, we can assume it needs a
    * bottom margin _unless_ it's an only child. Unfortunately we need to
diff --git a/src/components/card/card.stories.mdx b/src/components/card/card.stories.mdx
index 432a4d29b..984e405b4 100644
--- a/src/components/card/card.stories.mdx
+++ b/src/components/card/card.stories.mdx
@@ -23,6 +23,9 @@ const singleDemoStory = (args) => {
   if (args.theme !== 'none') {
     classNames.push(`t-${args.theme}`);
   }
+  if (args.class) {
+    classNames.push(args.class);
+  }
   if (classNames.length > 0) {
     props.class = classNames.join(' ');
   }
@@ -157,6 +160,41 @@ If a card with a cover is meant to occupy its full container width, it may be pr
 
 Horizontal cards will attempt to span all available columns of a CSS Grid Layout. This comes in handy when displaying them [in a Deck](/docs/objects-deck--horizontal-card#with-horizontal-cards).
 
+## With circular cover
+
+The `c-card--circle-cover` modifier will change the appearance of the cover and adjacent content in the following ways:
+
+- The cover image's aspect ratio will be square.
+- The cover image will be fully rounded into a circle shape.
+- When vertical, the card's text alignment will be centered to better align with the circle.
+- When horizontal, the card's content will occupy more room than its image to account for the taller aspect ratio of the cover image.
+
+This variation is best suited for links to bio information, such as on our team page.
+
+<Canvas>
+  <Story
+    name="Circular Cover Image"
+    args={{ class: 'c-card--circle-cover', href: '#', horizontal: '@m' }}
+    parameters={{
+      docs: {
+        source: {
+          code: `{% embed '@cloudfour/components/card/card.twig' with {
+  class: 'c-card--circle-cover c-card--horizontal@m',
+  href: '#'
+} only %}
+  {% block heading %}Lorem ipsum dolor sit amet{% endblock %}
+  {% block cover %}<img src="https://placeimg.com/800/450/animals" alt="">{% endblock %}
+  {% block content %}<p>Consectetur adipiscing elit...</p>{% endblock %}
+  {% block footer %}<p>{{'now'|date('M j, Y')}}</p>{% endblock %}
+{% endembed %}`,
+        },
+      },
+    }}
+  >
+    {singleDemoStory.bind({})}
+  </Story>
+</Canvas>
+
 ## Contained
 
 A card with the `c-card--contained` class will gain a background color, padding and rounded corners. This can be helpful for offsetting the card visually from its surroundings.
@@ -230,5 +268,4 @@ When the card is a focal point and more contrast is desired, you may also attach
 
 ## Coming soon
 
-- Progressive enhancement based on CSS Grid support
 - Distinctly contained footers for PWA Stats (if necessary)
diff --git a/src/prototypes/team/example/team-list.scss b/src/prototypes/team/example/team-list.scss
deleted file mode 100644
index 103cc10b2..000000000
--- a/src/prototypes/team/example/team-list.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@use "../../../mixins/ms";
-@use "../../../compiled/tokens/scss/breakpoint";
-@use "../../../compiled/tokens/scss/font-weight";
-@use "../../../compiled/tokens/scss/ease";
-@use "../../../compiled/tokens/scss/transition";
-
-#team-listings {
-
-  .avatar-name {
-    font-weight: font-weight.$semibold;
-    font-size: ms.step(1);
-
-    &:not(:hover) {
-    text-decoration: none;
-    }
-
-    @media (min-width: breakpoint.$l) {
-      font-size: ms.step(2);
-    }
-  }
-
-  .team-member {
-    text-align: center;
-    margin: ms.step(-2);
-
-    .c-card__cover {
-      border-radius: 50%;
-
-      &::before {
-        padding-bottom: 100%;
-      }
-    }
-  }
-}
diff --git a/src/prototypes/team/example/team-list.twig b/src/prototypes/team/example/team-list.twig
index 6bee4352f..00a40e898 100644
--- a/src/prototypes/team/example/team-list.twig
+++ b/src/prototypes/team/example/team-list.twig
@@ -1,4 +1,3 @@
-<div id="team-listings">
 {% include '@cloudfour/components/sky-nav/sky-nav.twig' with {
   "class": "t-dark",
   "menu": {
@@ -35,140 +34,139 @@
     ]
   }
 } only %}
-  {% embed '@cloudfour/components/cloud-cover/cloud-cover.twig' only %}
-    {% block content %}
-      {% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
-        class: 'o-rhythm--condensed'
-      } only %}
-        {% block content %}
-          {% include '@cloudfour/components/heading/heading.twig' with {
-            level: -2,
-            content: 'Our Team'
-          } only %}
-          <p>
-            We are a small, versatile team who care passionately about the web.
-            We’re full of what our industry considers unicorns. Our designers
-            code. Our developers went to art school.
-          </p>
-        {% endblock %}
-      {% endembed %}
-    {% endblock %}
-  {% endembed %}
+{% embed '@cloudfour/components/cloud-cover/cloud-cover.twig' only %}
+  {% block content %}
+    {% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
+      class: 'o-rhythm--condensed'
+    } only %}
+      {% block content %}
+        {% include '@cloudfour/components/heading/heading.twig' with {
+          level: -2,
+          content: 'Our Team'
+        } only %}
+        <p>
+          We are a small, versatile team who care passionately about the web.
+          We’re full of what our industry considers unicorns. Our designers
+          code. Our developers went to art school.
+        </p>
+      {% endblock %}
+    {% endembed %}
+  {% endblock %}
+{% endembed %}
 
-  {% embed '@cloudfour/objects/container/container.twig' with {
-  "class": "o-container--pad" } %}
-    {% block content %}
-      {% embed '@cloudfour/objects/deck/deck.twig' with {
-        class: 'o-deck--2-column@s o-deck--4-column@l',
-        avatars: avatars
-      } only %}
-        {% block content %}
-          {% for avatar in avatars %}
-            {% embed '@cloudfour/components/card/card.twig' with { href: '#', avatar: avatar, class: 'team-member' } only %}
-              {% block heading %}
-               {{avatar.name}}
-              {% endblock %}
-              {% block cover %}
-                <img src="{{avatar.image}}" alt="">
-              {% endblock %}
-              {% block content %}
-                <p>{{avatar.role}}</p>
-              {% endblock %}
-            {% endembed %}
-          {% endfor %}
-        {% endblock %}
-      {% endembed %}
-    {% endblock %}
-  {% endembed %}
-  {% include '@cloudfour/components/ground-nav/ground-nav.twig' with {
-    "menu": {
-      "items": [
-        {
-          "link": "/does",
-          "title": "What We Do",
-          "current": true
-        },
-        {
-          "link": "/believes",
-          "title": "Our Approach"
-        },
-        {
-          "link": "/made",
-          "title": "Our Work"
-        },
-        {
-          "link": "/thinks",
-          "title": "Articles"
-        },
-        {
-          "link": "/presents",
-          "title": "Speaking"
-        },
-        {
-          "link": "/contributes",
-          "title": "Labs"
-        },
-        {
-          "link": "/is",
-          "title": "Team"
-        },
-        {
-          "link": "/portland-device-lab",
-          "title": "Device Lab"
-        },
-        {
-          "link": "https://cloudfour-patterns.netlify.app/",
-          "title": "Patterns"
-        },
-        {
-          "link": "https://www.responsivefieldday.com/",
-          "title": "Responsive Field Day"
-        }
-      ]
-    },
-    "social": {
-      "items": [
-        {
-          "link": "https://twitter.com/cloudfour",
-          "title": "Follow us on Twitter",
-          "icon": "brands/twitter"
-        },
-        {
-          "link": "https://github.com/cloudfour",
-          "title": "Find us on GitHub",
-          "icon": "brands/github"
-        },
-        {
-          "link": "https://www.instagram.com/cloudfourpdx/",
-          "title": "Follow us on Instagram",
-          "icon": "brands/instagram"
-        },
-        {
-          "link": "https://www.linkedin.com/company/cloud-four",
-          "title": "Follow us on LinkedIn",
-          "icon": "brands/linkedin"
-        }
-      ]
-    },
-    "action": {
-      "lead_in": "Let’s discuss your project!",
-      "title": "Email us",
-      "link": "mailto:info@cloudfour.com",
-      "icon": "envelope"
+{% embed '@cloudfour/objects/container/container.twig' with {
+"class": "o-container--pad" } %}
+  {% block content %}
+    {% embed '@cloudfour/objects/deck/deck.twig' with {
+      class: 'o-deck--2-column@s o-deck--4-column@l',
+      avatars: avatars
+    } only %}
+      {% block content %}
+        {% for avatar in avatars %}
+          {% embed '@cloudfour/components/card/card.twig' with { href: '#', avatar: avatar, class: 'c-card--circle-cover' } only %}
+            {% block heading %}
+              {{avatar.name}}
+            {% endblock %}
+            {% block cover %}
+              <img src="{{avatar.image}}" alt="">
+            {% endblock %}
+            {% block content %}
+              <p>{{avatar.role}}</p>
+            {% endblock %}
+          {% endembed %}
+        {% endfor %}
+      {% endblock %}
+    {% endembed %}
+  {% endblock %}
+{% endembed %}
+{% include '@cloudfour/components/ground-nav/ground-nav.twig' with {
+  "menu": {
+    "items": [
+      {
+        "link": "/does",
+        "title": "What We Do",
+        "current": true
+      },
+      {
+        "link": "/believes",
+        "title": "Our Approach"
+      },
+      {
+        "link": "/made",
+        "title": "Our Work"
+      },
+      {
+        "link": "/thinks",
+        "title": "Articles"
+      },
+      {
+        "link": "/presents",
+        "title": "Speaking"
+      },
+      {
+        "link": "/contributes",
+        "title": "Labs"
+      },
+      {
+        "link": "/is",
+        "title": "Team"
+      },
+      {
+        "link": "/portland-device-lab",
+        "title": "Device Lab"
+      },
+      {
+        "link": "https://cloudfour-patterns.netlify.app/",
+        "title": "Patterns"
+      },
+      {
+        "link": "https://www.responsivefieldday.com/",
+        "title": "Responsive Field Day"
+      }
+    ]
+  },
+  "social": {
+    "items": [
+      {
+        "link": "https://twitter.com/cloudfour",
+        "title": "Follow us on Twitter",
+        "icon": "brands/twitter"
+      },
+      {
+        "link": "https://github.com/cloudfour",
+        "title": "Find us on GitHub",
+        "icon": "brands/github"
+      },
+      {
+        "link": "https://www.instagram.com/cloudfourpdx/",
+        "title": "Follow us on Instagram",
+        "icon": "brands/instagram"
+      },
+      {
+        "link": "https://www.linkedin.com/company/cloud-four",
+        "title": "Follow us on LinkedIn",
+        "icon": "brands/linkedin"
+      }
+    ]
+  },
+  "action": {
+    "lead_in": "Let’s discuss your project!",
+    "title": "Email us",
+    "link": "mailto:info@cloudfour.com",
+    "icon": "envelope"
+  },
+  "organization": {
+    "name": "Cloud Four, Inc.",
+    "address": {
+      "street_address": "510 SW 3rd Ave, Suite 420",
+      "address_locality": "Portland",
+      "address_region": "Oregon",
+      "postal_code": "97204",
+      "address_country": "USA"
     },
-    "organization": {
-      "name": "Cloud Four, Inc.",
-      "address": {
-        "street_address": "510 SW 3rd Ave, Suite 420",
-        "address_locality": "Portland",
-        "address_region": "Oregon",
-        "postal_code": "97204",
-        "address_country": "USA"
-      },
-      "email": "info@cloudfour.com",
-      "telephone": "+1 (503) 290-1090",
-      "url": "https://cloudfour.com/",
-      "founding_date": "2007-12-13"
-    }
-  } only %}
-</div>
+    "email": "info@cloudfour.com",
+    "telephone": "+1 (503) 290-1090",
+    "url": "https://cloudfour.com/",
+    "founding_date": "2007-12-13"
+  }
+} only %}
diff --git a/src/prototypes/team/team.stories.js b/src/prototypes/team/team.stories.js
index 6bb989fd5..310d52aac 100644
--- a/src/prototypes/team/team.stories.js
+++ b/src/prototypes/team/team.stories.js
@@ -2,7 +2,6 @@ import teamListPrototype from './example/team-list.twig';
 import teamIndividualPrototype from './example/team-individual.twig';
 import teamArticlePage2 from './example/team-articles-page2.twig';
 import avatars from './data/avatars.json';
-import './example/team-list.scss';
 import './example/team-individual.scss';
 
 export default {