diff --git a/lang/en/messages.php b/lang/en/messages.php
index e09eedad4e5..dc39978a4de 100644
--- a/lang/en/messages.php
+++ b/lang/en/messages.php
@@ -226,6 +226,7 @@
     'publish_actions_publish' => 'Changes to the working copy will be applied to the entry and it will be published immediately.',
     'publish_actions_schedule' => 'Changes to the working copy will be applied to the entry and it will appear published on the selected date.',
     'publish_actions_unpublish' => 'The current revision will be unpublished.',
+    'replicator_set_card_layout_instructions' => 'In a Replicator field, stacked instances of this set are displayed side by side as cards when there’s enough space.',
     'relationship_item_unavailable' => 'This item is unavailable. It may have been deleted, or you may not have permission to view it.',
     'reset_password_notification_body' => 'You are receiving this email because we received a password reset request for your account.',
     'reset_password_notification_no_action' => 'If you did not request a password reset, no further action is required.',
diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
new file mode 100644
index 00000000000..dd140d80ab5
--- /dev/null
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -0,0 +1,116 @@
+/* GROUP REPLICATOR CARD SETS
+=================================================== */
+[data-replicator-dragging] [data-replicator-connector],
+[data-replicator-dragging] [data-replicator-set-picker],
+.draggable-mirror [data-replicator-connector],
+.draggable-mirror [data-replicator-set-picker] {
+    visibility: hidden;
+}
+
+@container panel (width > 635px) {
+    .replicator-set-list {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 0.75rem;
+        align-items: start;
+    }
+
+    .replicator-set-slot--full,
+    .replicator-set-slot--card-cols-1 {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .replicator-set-slot--card-cols-2,
+    .replicator-set-slot--card-cols-3 {
+        position: relative;
+        width: calc((100% - 0.75rem) / 2);
+        min-width: 0;
+        padding-block-start: 1.5rem;
+
+        /* Too narrow for the collapsed preview, it only shows as clipped text */
+        [data-replicator-set-preview] {
+            display: none;
+        }
+
+        > div > [data-replicator-set-picker] {
+            position: absolute;
+            z-index: var(--z-index-above);
+            margin-block-start: 0;
+        }
+    }
+
+    @container panel (width > 935px) {
+        .replicator-set-slot--card-cols-3 {
+            width: calc((100% - 1.5rem) / 3);
+            min-width: 0;
+        }
+    }
+
+    .replicator-set-slot--card-cols-2,
+    .replicator-set-slot--card-cols-3 {
+        > div > [data-replicator-set] > [data-replicator-set-fields] > div > .publish-fields {
+            /* Prevent columns and gaps exceeding the container */
+            grid-column-gap: unset;
+
+            > .form-group {
+                --col-span: var(--grid-columns);
+            }
+        }
+    }
+
+    .replicator-card-set-row-start {
+        > div > [data-replicator-set-picker]:not([data-replicator-set-picker-end]) {
+            top: 0;
+            width: 100%;
+            height: 1.5rem;
+            align-items: center;
+            padding: 0;
+        }
+    }
+
+    .replicator-card-set-inset-picker {
+        &:not(.replicator-card-set-row-start) > div > [data-replicator-set-picker] [data-replicator-connector] {
+            display: none;
+        }
+
+        &:not(.replicator-card-set-row-start) > div > [data-replicator-set-picker]:not([data-replicator-set-picker-end]),
+        > div > [data-replicator-set-picker-end] {
+            display: flex;
+            position: absolute;
+            inset: 1.5rem auto 0 -0.75rem;
+            width: 0.75rem;
+            align-items: center;
+            padding: 0;
+            writing-mode: vertical-lr;
+
+            [data-insert-handle] {
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                height: 100%;
+                width: 0.325rem;
+                background: linear-gradient(to bottom, var(--color-gray-100) 0%, var(--color-gray-200) 50%, var(--color-gray-100) 100%);
+            }
+        }
+
+        > div > [data-replicator-set-picker][data-replicator-set-picker-end] {
+            right: -0.75rem;
+            left: auto;
+        }
+    }
+
+    .replicator-card-set-row-start.replicator-card-set-has-entry-connector {
+        &.replicator-set-slot--card-cols-2 > div > [data-replicator-set-picker]:not([data-replicator-set-picker-end]),
+        &.replicator-set-slot--card-cols-3 > div > [data-replicator-set-picker]:not([data-replicator-set-picker-end]) {
+            width: calc(200% + 0.75rem);
+        }
+
+        @container panel (width > 935px) {
+            &.replicator-set-slot--card-cols-3 > div > [data-replicator-set-picker]:not([data-replicator-set-picker-end]) {
+                width: calc(300% + 1.5rem);
+            }
+        }
+    }
+}
diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
deleted file mode 100644
index cbf0f8dc3bf..00000000000
--- a/resources/css/components/fieldtypes/replicator.css
+++ /dev/null
@@ -1,3 +0,0 @@
-/* ==========================================================================
-   REPLICATOR FIELDTYPE
-   ========================================================================== */
diff --git a/resources/css/cp.css b/resources/css/cp.css
index 481323b3b6f..05f145e24d0 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -36,6 +36,7 @@
 @import './components/fieldtypes/markdown.css';
 @import './components/fieldtypes/partial.css';
 @import './components/fieldtypes/relationship.css';
+@import './components/fieldtypes/replicator-card-sets.css';
 @import './components/fieldtypes/section.css';
 @import './components/fieldtypes/table.css';
 @import './components/fieldtypes/width.css';
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 90ccc4a84e8..337ab5a1a0c 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -1,11 +1,21 @@
 <template>
-    <div class="blueprint-section min-h-40 w-full outline-hidden @container" tabindex="-1">
+    <div
+        class="blueprint-section min-h-40 outline-hidden @container w-full"
+        tabindex="-1"
+    >
         <ui-panel>
             <ui-panel-header class="flex items-center justify-between pl-2.75! pr-3.25!">
-                <div class="flex items-center gap-2 flex-1">
+                <div class="flex items-center gap-2 flex-1 min-w-0">
                     <ui-icon name="handles-sm" class="blueprint-section-drag-handle size-3! cursor-grab text-gray-400" />
                     <ui-icon :name="section.icon" :set="iconSet" v-if="section.icon" />
                     <ui-heading v-text="__(section.display ?? 'Section')" />
+                    <ui-badge
+                        v-if="showCardField && card"
+                        pill
+                        icon="cards"
+                        :text="__('Card')"
+                        color="white"
+                    />
                 </div>
                 <ui-button icon="pencil-line" size="sm" variant="ghost" @click="edit" />
                 <ui-button icon="trash" size="sm" variant="ghost" @click.prevent="$emit('deleted')" />
@@ -70,6 +80,13 @@
                     <ui-field :label="__('Instructions')">
                         <ui-input type="text" v-model="editingSection.instructions" />
                     </ui-field>
+                    <ui-field
+                        :label="__('Card layout')"
+                        :instructions="__('messages.replicator_set_card_layout_instructions')"
+                        v-if="showCardField"
+                    >
+                        <ui-switch v-model="editingSection.card" />
+                    </ui-field>
                     <ui-field :label="__('Collapsible')" v-if="showCollapsibleField">
                         <ui-switch v-model="editingSection.collapsible" />
                     </ui-field>
@@ -156,6 +173,7 @@ export default {
         tabId: { type: String },
         section: { type: Object, required: true },
         showHandleField: { type: Boolean, default: false },
+        showCardField: { type: Boolean, default: false },
 	    showCollapsibleField: { type: Boolean, default: false },
         showHideField: { type: Boolean, default: false },
         editText: { type: String },
@@ -193,6 +211,10 @@ export default {
             const stacks = this.$stacks.stacks();
             return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
+
+        card() {
+            return this.section.card ?? false;
+        },
     },
 
     watch: {
@@ -269,6 +291,7 @@ export default {
                 icon: this.section.icon,
                 image: this.section.image,
                 hide: this.section.hide,
+                card: this.section.card ?? false,
                 collapsible: this.section.collapsible,
                 collapsed: this.section.collapsed,
             };
diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index c139c803233..9c15449cce8 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -1,6 +1,12 @@
 <template>
     <div>
-        <div ref="sections" class="blueprint-sections flex flex-wrap outline-hidden" :data-tab="tabId" tabindex="-1">
+        <div
+            ref="sections"
+            class="blueprint-sections outline-hidden"
+            :class="showSectionHandleField ? 'field-grid' : 'flex flex-wrap'"
+            :data-tab="tabId"
+            tabindex="-1"
+        >
             <BlueprintSection
                 ref="section"
                 v-for="(section, i) in sections"
@@ -9,6 +15,7 @@
                 :can-define-localizable="canDefineLocalizable"
                 :tab-id="tabId"
                 :show-handle-field="showSectionHandleField"
+                :show-card-field="showSectionCardField"
                 :show-collapsible-field="showSectionCollapsibleField"
                 :show-hide-field="showSectionHideField"
                 :exclude-fieldset="excludeFieldset"
@@ -18,7 +25,7 @@
                 @deleted="deleteSection(i)"
             />
 
-            <div class="blueprint-add-section-container w-full">
+            <div class="blueprint-add-section-container" :class="showSectionHandleField ? 'field-w-100' : 'w-full'">
                 <button class="blueprint-add-section-button" @click="addAndEditSection">
                     <div class="flex items-center gap-2">
                         <ui-icon name="plus" class="size-4" />
@@ -73,6 +80,10 @@ export default {
         showSectionHandleField: {
             type: Boolean,
             default: false,
+        },
+        showSectionCardField: {
+            type: Boolean,
+            default: false,
         },
 	    showSectionCollapsibleField: {
 			type: Boolean,
@@ -114,6 +125,7 @@ export default {
                 collapsed: false,
                 icon: null,
                 hide: null,
+                card: false,
                 handle: snake_case(this.newSectionText),
                 fields: [],
             };
diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
index 0b9b1287048..6a776a69f9e 100644
--- a/resources/js/components/blueprints/TabContent.vue
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -8,6 +8,7 @@
             :add-section-text="addSectionText"
             :edit-section-text="editSectionText"
             :show-section-handle-field="showSectionHandleField"
+            :show-section-card-field="showSectionCardField"
             :show-section-collapsible-field="showSectionCollapsibleField"
             :show-section-hide-field="showSectionHideField"
             :can-define-localizable="canDefineLocalizable"
@@ -36,6 +37,10 @@ export default {
         showSectionHandleField: {
             type: Boolean,
             default: false,
+        },
+        showSectionCardField: {
+            type: Boolean,
+            default: false,
         },
 	    showSectionCollapsibleField: {
 			type: Boolean,
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index ebcb2ea031d..64f373d0f37 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -91,6 +91,7 @@
                     :tab="tab"
                     v-show="currentTab === tab._id"
                     :show-section-handle-field="showSectionHandleField"
+                    :show-section-card-field="showSectionCardField"
                     :show-section-collapsible-field="showSectionCollapsibleField"
                     :show-section-hide-field="showSectionHideField"
                     :new-section-text="newSectionText"
@@ -170,6 +171,10 @@ export default {
         showSectionHandleField: {
             type: Boolean,
             default: false,
+        },
+        showSectionCardField: {
+            type: Boolean,
+            default: false,
         },
 	    showSectionCollapsibleField: {
 			type: Boolean,
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index d3cd9a300e5..96ef8bbde9c 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -127,7 +127,7 @@
                         @dragstart="$emit('focus')"
                     >
                         <div
-                            class="bg-white relative grid @min-[300px]:grid-cols-[repeat(auto-fill,minmax(110px,1fr))] gap-4 2xl:gap-10 p-3 relative rounded-xl border border-gray-300 dark:bg-gray-850 dark:border-gray-700"
+                            class="bg-white relative grid @min-[300px]:grid-cols-[repeat(auto-fill,minmax(110px,1fr))] gap-4 2xl:gap-10 p-2.5 @min-[300px]:p-3 relative rounded-xl border border-gray-300 dark:bg-gray-850 dark:border-gray-700"
                             :class="{ 'border-t-0 rounded-t-none': !isReadOnly && (showPicker || uploads.length), 'border-dashed': isReadOnly }"
                             ref="assets"
                         >
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
index 24ecbf1fc07..b89e65a9dac 100644
--- a/resources/js/components/fieldtypes/replicator/AddSetButton.vue
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -5,6 +5,7 @@
                 <div class="inline-flex relative pt-2" :class="{ 'pt-6': showConnector }">
                     <div
                         v-if="showConnector"
+                        data-replicator-connector
                         class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-dashed z-0 dark:bg-gray-850"
                         :class="readOnly ? 'border-gray-300 dark:border-gray-700/35' : 'border-gray-400 dark:border-gray-600'"
                     />
@@ -16,11 +17,14 @@
     <set-picker v-else :enabled="enabled" :sets="groups" align="center" :loading-set="loadingSet" @added="addSet">
         <template #trigger>
             <div
+                data-replicator-set-picker
+                :data-replicator-set-picker-end="after || undefined"
                 class="flex justify-center relative group py-3"
-                :class="{ 'py-3.5 -mt-2 top-0.5': isFirst }"
+                :class="{ 'py-3.5 -mt-2 top-0.5': isFirst, hidden: after }"
             >
                 <div
                     v-if="showConnector"
+                    data-replicator-connector
                     class="absolute group-focus-within:opacity-0 transition-opacity group-focus-within:transition-none delay-10 duration-250 inset-y-0 left-3.5 border-l-1 border-dashed z-0 dark:bg-gray-850"
                     :class="[
                         readOnly ? 'border-gray-300 dark:border-gray-700/35' : 'border-gray-400 dark:border-gray-600',
@@ -37,7 +41,7 @@
                     tabindex="-1"
                 >
                     <div class="h-full flex flex-col justify-center">
-                        <div class="rounded-full bg-[linear-gradient(90deg,theme(colors.gray.100)_0%,theme(colors.gray.200)_50%,theme(colors.gray.100)_100%)] dark:bg-[linear-gradient(90deg,theme(colors.gray.800)_0%,theme(colors.gray.700)_50%,theme(colors.gray.800)_100%)] h-2" />
+                        <div data-insert-handle class="rounded-full bg-[linear-gradient(90deg,theme(colors.gray.100)_0%,theme(colors.gray.200)_50%,theme(colors.gray.100)_100%)] dark:bg-[linear-gradient(90deg,theme(colors.gray.800)_0%,theme(colors.gray.700)_50%,theme(colors.gray.800)_100%)] h-2" />
                     </div>
                 </button>
                 <Button v-if="enabled" round icon="plus" size="sm" class="-my-4 z-3 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity delay-10 duration-250" />
@@ -62,6 +66,7 @@ const props = defineProps({
     showConnector: { type: Boolean, default: true },
     variant: { type: String, default: 'button' },
     isFirst: { type: Boolean, default: false },
+    after: { type: Boolean, default: false },
     loadingSet: { type: String, default: null },
     readOnly: { type: Boolean, default: false },
 });
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 949da0f4ae0..bc46ff33c4d 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -19,58 +19,95 @@
                     <section :class="{ 'mt-12 p-4': fullScreenMode }">
                         <sortable-list
                             :model-value="value"
-                            :vertical="true"
+                            :vertical="!hasMultiColumnCards"
                             :item-class="sortableItemClass"
-                            :handle-class="sortableHandleClass"
+                            :handle-class="sortableRowHandleClass"
                             :distance="pointerDragThreshold"
                             append-to="body"
                             constrain-dimensions
-                            @update:model-value="sorted($event)"
-                            @dragstart="$emit('focus')"
-                            @dragend="$emit('blur')"
+                            :animate="false"
+                            @update:model-value="sorted"
+                            @dragstart="startDragging"
+                            @dragend="stopDragging"
                             v-slot="{}"
                         >
-                            <div class="relative">
-                                <ReplicatorSet
+                            <div
+                                ref="setList"
+                                class="replicator-set-list relative"
+                                :data-replicator-dragging="dragging || undefined"
+                            >
+                                <div
                                     v-for="(set, index) in value"
                                     :key="set._id"
-                                    :id="set._id"
-                                    :index
-                                    :field-path="setFieldPathPrefix"
-                                    :meta-path="setMetaPathPrefix"
-                                    :values="set"
-                                    :config="setConfig(set.type)"
-                                    :sortable-item-class="sortableItemClass"
-                                    :sortable-handle-class="sortableHandleClass"
-                                    :collapsed="collapsed.includes(set._id)"
-                                    :enabled="set.enabled"
-                                    :read-only="isReadOnly"
-                                    :can-add-set="canAddSet"
-                                    :can-reorder="!isReadOnly && value.length > 1"
-                                    :total-sets="value.length"
-                                    :has-error="setHasError(set._id)"
-                                    :show-field-previews="config.previews"
-                                    @collapsed="collapseSet(set._id)"
-                                    @expanded="expandSet(set._id)"
-                                    @duplicated="duplicateSet(set._id)"
-                                    @removed="removed(set, index)"
-                                    @moved="moved"
+                                    :data-set-id="set._id"
+                                    :class="[
+                                        sortableItemClass,
+                                        cardLayouts[index].className,
+                                        {
+                                            'replicator-card-set-inset-picker': showCardInsetPicker(
+                                                cardLayouts[index].groupSize,
+                                            ),
+                                            'replicator-card-set-row-start': cardLayouts[index].isCard
+                                                && cardLayouts[index].positionInGroup === 0
+                                                && cardLayouts[index].groupSize > 1,
+                                            'replicator-card-set-has-entry-connector': showCardEntryConnector(index),
+                                            'replicator-card-set-third-column': cardLayouts[index].columns === 3
+                                                && cardLayouts[index].positionInGroup === 2,
+                                        },
+                                    ]"
                                 >
-                                    <template v-slot:picker>
-                                        <add-set-button
-                                            variant="between"
-                                            :groups="groupConfigs"
-                                            :sets="setConfigs"
-                                            :index="index"
-                                            :enabled="canAddSet"
-                                            :read-only="isReadOnly"
-                                            :is-first="index === 0"
-                                            :show-connector="!(index === 0 && config.hide_display)"
-                                            :loading-set="loadingSet"
-                                            @added="addSet"
-                                        />
-                                    </template>
-                                </ReplicatorSet>
+                                    <ReplicatorSet
+                                        :id="set._id"
+                                        :index="index"
+                                        :field-path="setFieldPathPrefix"
+                                        :meta-path="setMetaPathPrefix"
+                                        :values="set"
+                                        :config="setConfig(set.type)"
+                                        :sortable-item-class="''"
+                                        :sortable-handle-class="sortableRowHandleClass"
+                                        :collapsed="collapsed.includes(set._id)"
+                                        :enabled="set.enabled"
+                                        :read-only="isReadOnly"
+                                        :can-add-set="canAddSet"
+                                        :can-reorder="!isReadOnly && value.length > 1"
+                                        :total-sets="value.length"
+                                        :has-error="setHasError(set._id)"
+                                        :show-field-previews="config.previews"
+                                        @collapsed="collapseSet(set._id)"
+                                        @expanded="expandSet(set._id)"
+                                        @duplicated="duplicateSet(set._id)"
+                                        @removed="removed(set, index)"
+                                        @moved="moved"
+                                    >
+                                        <template v-slot:picker>
+                                            <add-set-button
+                                                variant="between"
+                                                :groups="groupConfigs"
+                                                :sets="setConfigs"
+                                                :index="index"
+                                                :enabled="canAddSet"
+                                                :read-only="isReadOnly"
+                                                :is-first="index === 0"
+                                                :show-connector="showPickerConnector(index)"
+                                                :loading-set="loadingSet"
+                                                @added="addSet"
+                                            />
+                                            <add-set-button
+                                                v-if="canAddSet && cardLayouts[index].isCard
+                                                    && cardLayouts[index].groupSize > 1
+                                                    && cardLayouts[index].positionInGroup === cardLayouts[index].groupSize - 1"
+                                                variant="between"
+                                                after
+                                                :groups="groupConfigs"
+                                                :sets="setConfigs"
+                                                :index="index + 1"
+                                                :show-connector="false"
+                                                :loading-set="loadingSet"
+                                                @added="addSet"
+                                            />
+                                        </template>
+                                    </ReplicatorSet>
+                                </div>
                             </div>
                         </sortable-list>
 
@@ -78,7 +115,7 @@
                             v-if="canAddSet"
                             :groups="groupConfigs"
                             :sets="setConfigs"
-                            :show-connector="value.length > 0"
+                            :show-connector="value.length > 0 && !setConfig(value[value.length - 1].type).card"
                             :index="value.length"
                             :label="config.button_label"
                             :is-first="value.length === 0"
@@ -101,6 +138,14 @@ import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList, arrayMove, POINTER_DRAG_THRESHOLD } from '../../sortable/Sortable';
 import { data_get } from "@/bootstrap/globals.js";
+import {
+    buildCardLayouts,
+    getCardGroupMemberIds,
+    shouldShowPickerConnector,
+} from './cardLayouts.js';
+
+const CARD_MULTI_COLUMN_MIN_WIDTH = 635;
+const CARD_THREE_COLUMN_MIN_WIDTH = 935;
 
 export default {
     mixins: [Fieldtype, ManagesSetMeta],
@@ -118,6 +163,7 @@ export default {
     data() {
         return {
             focused: false,
+            dragging: false,
             collapsed: clone(this.meta.collapsed),
             fullScreenMode: false,
             escBinding: null,
@@ -128,6 +174,9 @@ export default {
             errorsById: {},
             setsCache: {},
             loadingSet: null,
+            cardMultiColumnLayout: false,
+            cardMaxColumns: 2,
+            cardLayoutObserver: null,
         };
     },
 
@@ -160,8 +209,21 @@ export default {
             return `${this.fieldId}-sortable-item`;
         },
 
-        sortableHandleClass() {
-            return `${this.fieldId}-sortable-handle`;
+        sortableRowHandleClass() {
+            return `${this.fieldId}-sortable-row-handle`;
+        },
+
+        cardLayouts() {
+            return buildCardLayouts(
+                this.value,
+                (type) => this.setConfig(type).card,
+                (a, b) => this.isSameCardGroup(a, b),
+                (type) => this.setConfig(type).fields,
+            );
+        },
+
+        hasMultiColumnCards() {
+            return this.cardMultiColumnLayout && this.cardLayouts.some((layout) => layout.isCard && layout.columns > 1);
         },
 
         replicatorPreview() {
@@ -202,10 +264,69 @@ export default {
     },
 
     methods: {
+        startDragging() {
+            this.dragging = true;
+            this.$emit('focus');
+        },
+
+        stopDragging() {
+            this.dragging = false;
+            this.$emit('blur');
+        },
+
         setConfig(handle) {
             return this.setConfigs.find((c) => c.handle === handle) || {};
         },
 
+        isSameCardGroup(a, b) {
+            return (
+                this.setConfig(a.type).card
+                && this.setConfig(b.type).card
+                && a.type === b.type
+            );
+        },
+
+        showSetConnector(index) {
+            if (index === 0) {
+                return !this.config.hide_display;
+            }
+
+            const set = this.value[index];
+            const previous = this.value[index - 1];
+
+            if (
+                this.setConfig(set.type).card
+                && this.setConfig(previous.type).card
+                && previous.type === set.type
+            ) {
+                return false;
+            }
+
+            return true;
+        },
+
+        showCardEntryConnector(index) {
+            const layout = this.cardLayouts[index];
+
+            if (layout.isCard && layout.positionInGroup !== 0) {
+                return false;
+            }
+
+            return this.showSetConnector(index);
+        },
+
+        showPickerConnector(index) {
+            return shouldShowPickerConnector({
+                index,
+                layouts: this.cardLayouts,
+                showCardEntryConnector: (i) => this.showCardEntryConnector(i),
+            });
+        },
+
+        showCardInsetPicker(cardCount) {
+            return cardCount > 1;
+        },
+
         updated(index, set) {
             this.update([...this.value.slice(0, index), set, ...this.value.slice(index + 1)]);
         },
@@ -217,7 +338,36 @@ export default {
         },
 
         sorted(value) {
-            this.update(value);
+            const byId = new Map(this.value.map((set) => [set._id, set]));
+            const seen = new Set();
+            const unique = [];
+
+            for (const set of value) {
+                if (seen.has(set._id)) {
+                    continue;
+                }
+
+                seen.add(set._id);
+
+                const existing = byId.get(set._id);
+
+                if (!existing) {
+                    return;
+                }
+
+                unique.push(existing);
+            }
+
+            if (unique.length === this.value.length) {
+                this.update(unique);
+                return;
+            }
+
+            const fromDom = this.sortedValueFromDom(byId);
+
+            if (fromDom) {
+                this.update(fromDom);
+            }
         },
 
         moved(from, to) {
@@ -319,21 +469,22 @@ export default {
         },
 
         collapseSet(id) {
-            if (!this.collapsed.includes(id)) {
-                this.collapsed.push(id);
-            }
+            const collapsed = new Set(this.collapsed);
+
+            this.cardGroupMemberIds(id).forEach((setId) => collapsed.add(setId));
+
+            this.collapsed = [...collapsed];
         },
 
         expandSet(id) {
+            const ids = this.cardGroupMemberIds(id);
+
             if (this.config.collapse === 'accordion') {
-                this.collapsed = this.value.map((v) => v._id).filter((v) => v !== id);
+                this.collapsed = this.value.map((v) => v._id).filter((v) => !ids.includes(v));
                 return;
             }
 
-            if (this.collapsed.includes(id)) {
-                var index = this.collapsed.indexOf(id);
-                this.collapsed.splice(index, 1);
-            }
+            this.collapsed = this.collapsed.filter((setId) => !ids.includes(setId));
         },
 
         collapseAll() {
@@ -372,6 +523,69 @@ export default {
 
             return this.errorsById.hasOwnProperty(id) && this.errorsById[id].length > 0;
         },
+
+        cardGroupMemberIds(id) {
+            const index = this.value.findIndex((set) => set._id === id);
+
+            if (index === -1) {
+                return [id];
+            }
+
+            return getCardGroupMemberIds({
+                index,
+                value: this.value,
+                layouts: this.cardLayouts,
+                multiColumn: this.cardMultiColumnLayout,
+                maxColumns: this.cardMaxColumns,
+            });
+        },
+
+        sortedValueFromDom(byId) {
+            const list = this.$refs.setList;
+
+            if (!list) {
+                return null;
+            }
+
+            const ordered = [...list.children]
+                .map((element) => byId.get(element.dataset.setId))
+                .filter(Boolean);
+
+            if (ordered.length !== this.value.length) {
+                return null;
+            }
+
+            return ordered;
+        },
+
+        observeCardLayoutContainer() {
+            this.cardLayoutObserver?.disconnect();
+            this.cardLayoutObserver = null;
+
+            const root = this.$refs.setList;
+            const panel = root?.closest('[data-ui-panel], [class*="container/panel"]');
+
+            if (!panel) {
+                this.cardMultiColumnLayout = false;
+                return;
+            }
+
+            this.cardLayoutObserver = new ResizeObserver(([entry]) => {
+                const width = entry.contentRect.width;
+
+                this.cardMultiColumnLayout = width > CARD_MULTI_COLUMN_MIN_WIDTH;
+                this.cardMaxColumns = width > CARD_THREE_COLUMN_MIN_WIDTH ? 3 : 2;
+            });
+            this.cardLayoutObserver.observe(panel);
+        },
+    },
+
+    mounted() {
+        this.$nextTick(() => this.observeCardLayoutContainer());
+    },
+
+    beforeUnmount() {
+        this.cardLayoutObserver?.disconnect();
     },
 
     watch: {
@@ -387,6 +601,10 @@ export default {
             }, 1);
         },
 
+        fullScreenMode() {
+            this.$nextTick(() => this.observeCardLayoutContainer());
+        },
+
         collapsed(collapsed) {
             this.updateMeta({ ...this.meta, collapsed: clone(collapsed) });
         },
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index a98849d8b1b..c83867b75d6 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, inject, ref } from 'vue';
+import { DropdownMenuCheckboxItem } from 'reka-ui';
 import {
     Icon,
     Switch,
@@ -87,7 +88,7 @@ const fieldActions = computed(() => {
     return toFieldActions('replicator-fieldtype-set', fieldActionPayload.value);
 });
 
-const previewText = computed(() => {
+const previewItems = computed(() => {
     return Object.entries(data_get(previews.value, fieldPathPrefix.value) || {})
         .filter(([handle, value]) => {
             if (!handle.endsWith('_')) return false;
@@ -109,8 +110,18 @@ const previewText = computed(() => {
 
             return escapeHtml(JSON.stringify(value));
         })
-        .filter((html) => html && html.trim() !== '')
-        .join(' <span class="text-gray-400 dark:text-gray-600">/</span> ');
+        .filter((html) => html && html.trim() !== '');
+});
+
+const previewText = computed(() => previewItems.value.join(' <span class="text-gray-400 dark:text-gray-600">/</span> '));
+
+const firstPreviewText = computed(() => {
+    if (!previewItems.value.length) return null;
+
+    const el = document.createElement('div');
+    el.innerHTML = previewItems.value[0];
+
+    return el.textContent.trim() || null;
 });
 
 function toggleEnabledState() {
@@ -213,6 +224,7 @@ function onSetDropdownClosed() {
                         </span>
                         {{ __(config.display) || config.handle }}
                     </Badge>
+                    <span v-if="firstPreviewText" class="sr-only">{{ firstPreviewText }}</span>
                     <Icon
                         v-if="config.instructions && !collapsed"
                         name="info-square"
@@ -221,6 +233,8 @@ function onSetDropdownClosed() {
                     />
                     <Subheading
                         v-show="collapsed"
+                        data-replicator-set-preview
+                        aria-hidden="true"
                         v-html="previewText"
                         class="overflow-hidden text-ellipsis whitespace-nowrap"
                     />
@@ -234,6 +248,7 @@ function onSetDropdownClosed() {
                         :aria-label="__('messages.keyboard_item_reorder_instructions')"
                     />
                     <Switch
+                        v-if="!config.card"
                         size="xs"
                         :model-value="enabled"
                         :label="__('Included in output')"
@@ -245,6 +260,16 @@ function onSetDropdownClosed() {
                             <Button icon="dots" variant="ghost" size="xs" :aria-label="__('Open dropdown menu')" />
                         </template>
                         <DropdownMenu>
+                            <DropdownMenuCheckboxItem
+                                v-if="config.card"
+                                class="col-span-2 flex items-center justify-between gap-4 rounded-lg px-3 py-1.5 text-sm text-gray-700 outline-hidden cursor-pointer data-highlighted:bg-gray-100 dark:text-gray-300 dark:data-highlighted:bg-gray-800"
+                                :model-value="enabled"
+                                @update:model-value="toggleEnabledState"
+                            >
+                                <span>{{ __('Visible') }}</span>
+                                <Icon v-if="enabled" name="checkmark" class="size-3.5" aria-hidden="true" />
+                            </DropdownMenuCheckboxItem>
+                            <DropdownSeparator v-if="config.card" />
                             <DropdownItem
                                 v-if="fieldActions.length"
                                 v-for="action in fieldActions"
@@ -285,6 +310,7 @@ function onSetDropdownClosed() {
 
             <div
                 v-show="!collapsed && hasFields"
+                data-replicator-set-fields
                 :class="{ 'contain-paint': collapsed, 'isolate': !collapsed }"
                 class="border-t border-t-gray-300! dark:border-t-white/10!"
             >
diff --git a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
index 05e20973a46..1ea006df521 100644
--- a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
@@ -12,6 +12,7 @@
             :new-section-text="__('New Set')"
             show-tab-instructions-field
             show-section-handle-field
+            :show-section-card-field="showCardLayoutField"
             show-section-hide-field
             @updated="tabsUpdated"
         />
@@ -23,6 +24,17 @@ import Fieldtype from '../Fieldtype.vue';
 import SuggestsConditionalFields from '../../blueprints/SuggestsConditionalFields';
 import Tabs from '../../blueprints/Tabs.vue';
 
+function stripCardLayout(tabs) {
+    return tabs.map((tab) => ({
+        ...tab,
+        sections: tab.sections.map((section) => {
+            const { card, ...rest } = section;
+
+            return rest;
+        }),
+    }));
+}
+
 export default {
     mixins: [Fieldtype, SuggestsConditionalFields],
 
@@ -30,9 +42,15 @@ export default {
         Tabs,
     },
 
+    computed: {
+        showCardLayoutField() {
+            return this.config.show_card_layout_field === true;
+        },
+    },
+
     data() {
         return {
-            tabs: this.value,
+            tabs: this.config.show_card_layout_field === true ? this.value : stripCardLayout(this.value),
         };
     },
 
@@ -42,7 +60,7 @@ export default {
 
     methods: {
         tabsUpdated(tabs) {
-            this.update(tabs);
+            this.update(this.showCardLayoutField ? tabs : stripCardLayout(tabs));
         },
 
         getSectionFieldsForConditionSuggestions(vm = null) {
diff --git a/resources/js/components/fieldtypes/replicator/cardLayouts.js b/resources/js/components/fieldtypes/replicator/cardLayouts.js
new file mode 100644
index 00000000000..0d76e039669
--- /dev/null
+++ b/resources/js/components/fieldtypes/replicator/cardLayouts.js
@@ -0,0 +1,98 @@
+export function fieldCount(fields) {
+    if (Array.isArray(fields)) {
+        return fields.length;
+    }
+
+    return Object.keys(fields || {}).length;
+}
+
+/** Sets with more fields than this stay at most two columns so cards don't get too cramped. */
+export const MAX_FIELDS_FOR_THREE_COLUMNS = 5;
+
+export function cardGroupColumns(count, fields = 0) {
+    if (count <= 1) {
+        return 1;
+    }
+
+    if (count === 2 || fieldCount(fields) > MAX_FIELDS_FOR_THREE_COLUMNS) {
+        return 2;
+    }
+
+    return 3;
+}
+
+export function buildCardLayouts(value, isCardSet, isSameCardGroup, fieldsForSet = () => 0) {
+    return value.map((set, index) => {
+        if (!isCardSet(set.type)) {
+            return {
+                isCard: false,
+                groupSize: 1,
+                positionInGroup: 0,
+                columns: 1,
+                className: 'replicator-set-slot--full',
+            };
+        }
+
+        let groupStart = index;
+
+        while (groupStart > 0 && isSameCardGroup(value[groupStart - 1], set)) {
+            groupStart--;
+        }
+
+        let groupEnd = index;
+
+        while (groupEnd < value.length - 1 && isSameCardGroup(value[groupEnd + 1], set)) {
+            groupEnd++;
+        }
+
+        const groupSize = groupEnd - groupStart + 1;
+        const columns = cardGroupColumns(groupSize, fieldsForSet(set.type));
+
+        return {
+            isCard: true,
+            groupSize,
+            positionInGroup: index - groupStart,
+            columns,
+            className: `replicator-set-slot--card-cols-${columns}`,
+        };
+    });
+}
+
+function setId(set) {
+    return set._id ?? set.id;
+}
+
+export function getCardGroupMemberIds({ index, value, layouts, multiColumn, maxColumns = 3 }) {
+    const set = value[index];
+
+    if (!set) {
+        return [];
+    }
+
+    const layout = layouts[index];
+
+    if (!multiColumn || !layout.isCard || layout.groupSize <= 1) {
+        return [setId(set)];
+    }
+
+    const groupStart = index - layout.positionInGroup;
+    const columns = Math.min(layout.columns, maxColumns);
+    const rowStart = groupStart + Math.floor(layout.positionInGroup / columns) * columns;
+    const rowEnd = Math.min(rowStart + columns, groupStart + layout.groupSize);
+
+    return value
+        .slice(rowStart, rowEnd)
+        .map((item) => setId(item));
+}
+
+export function shouldShowPickerConnector({ index, layouts, showCardEntryConnector }) {
+    if (showCardEntryConnector(index)) {
+        return true;
+    }
+
+    const layout = layouts[index];
+
+    return layout.isCard
+        && layout.groupSize > 1
+        && layout.positionInGroup !== 0;
+}
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index fcf4aed2dc8..c772c832803 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -148,6 +148,12 @@ export default {
     },
 
     watch: {
+        vertical() {
+            if (this.disabled) return;
+
+            this.destroySortableList();
+            this.setupSortableList();
+        },
         disabled(disabled) {
             disabled ? this.destroySortableList() : this.setupSortableList();
         },
diff --git a/resources/js/tests/components/fieldtypes/replicator/cardLayouts.test.js b/resources/js/tests/components/fieldtypes/replicator/cardLayouts.test.js
new file mode 100644
index 00000000000..d2379736f5d
--- /dev/null
+++ b/resources/js/tests/components/fieldtypes/replicator/cardLayouts.test.js
@@ -0,0 +1,128 @@
+import { expect, test } from 'vitest';
+import {
+    buildCardLayouts,
+    cardGroupColumns,
+    getCardGroupMemberIds,
+    MAX_FIELDS_FOR_THREE_COLUMNS,
+    shouldShowPickerConnector,
+} from '@/components/fieldtypes/replicator/cardLayouts.js';
+
+test('cardGroupColumns returns expected column counts', () => {
+    expect(cardGroupColumns(1)).toBe(1);
+    expect(cardGroupColumns(2)).toBe(2);
+    expect(cardGroupColumns(3)).toBe(3);
+    expect(cardGroupColumns(5)).toBe(3);
+    expect(cardGroupColumns(3, Array.from({ length: MAX_FIELDS_FOR_THREE_COLUMNS + 1 }, () => ({})))).toBe(2);
+    expect(cardGroupColumns(5, Array.from({ length: MAX_FIELDS_FOR_THREE_COLUMNS }, () => ({})))).toBe(3);
+});
+
+test('buildCardLayouts groups consecutive card sets', () => {
+    const value = [
+        { _id: '1', type: 'marketing' },
+        { _id: '2', type: 'team' },
+        { _id: '3', type: 'team' },
+        { _id: '4', type: 'team' },
+    ];
+    const isCardSet = (type) => type === 'team';
+    const isSameCardGroup = (a, b) => isCardSet(a.type) && isCardSet(b.type) && a.type === b.type;
+    const fieldsForSet = () => [{}, {}];
+
+    const layouts = buildCardLayouts(value, isCardSet, isSameCardGroup, fieldsForSet);
+
+    expect(layouts[0].className).toBe('replicator-set-slot--full');
+    expect(layouts[1].groupSize).toBe(3);
+    expect(layouts[1].positionInGroup).toBe(0);
+    expect(layouts[2].positionInGroup).toBe(1);
+    expect(layouts[3].positionInGroup).toBe(2);
+    expect(layouts[3].columns).toBe(3);
+    expect(layouts[3].className).toBe('replicator-set-slot--card-cols-3');
+});
+
+test('buildCardLayouts caps at two columns when a set has too many fields', () => {
+    const value = [
+        { _id: '1', type: 'team' },
+        { _id: '2', type: 'team' },
+        { _id: '3', type: 'team' },
+    ];
+    const fieldsForSet = () => Array.from({ length: MAX_FIELDS_FOR_THREE_COLUMNS + 1 }, () => ({}));
+
+    const layouts = buildCardLayouts(
+        value,
+        () => true,
+        (a, b) => a.type === b.type,
+        fieldsForSet,
+    );
+
+    expect(layouts[0].columns).toBe(2);
+    expect(layouts[0].className).toBe('replicator-set-slot--card-cols-2');
+    expect(layouts[2].columns).toBe(2);
+});
+
+test('getCardGroupMemberIds returns the whole row in multi-column layout', () => {
+    const value = [
+        { _id: '1', type: 'team' },
+        { _id: '2', type: 'team' },
+        { _id: '3', type: 'team' },
+    ];
+    const layouts = buildCardLayouts(
+        value,
+        () => true,
+        (a, b) => a.type === b.type,
+    );
+
+    expect(getCardGroupMemberIds({
+        index: 1,
+        value,
+        layouts,
+        multiColumn: true,
+    })).toEqual(['1', '2', '3']);
+});
+
+test('getCardGroupMemberIds only returns the clicked set when stacked', () => {
+    const value = [
+        { _id: '1', type: 'team' },
+        { _id: '2', type: 'team' },
+    ];
+    const layouts = buildCardLayouts(
+        value,
+        () => true,
+        (a, b) => a.type === b.type,
+    );
+
+    expect(getCardGroupMemberIds({
+        index: 1,
+        value,
+        layouts,
+        multiColumn: false,
+    })).toEqual(['2']);
+});
+
+test('shouldShowPickerConnector shows inset connectors for non-row-start cards', () => {
+    const value = [
+        { _id: '1', type: 'team' },
+        { _id: '2', type: 'team' },
+    ];
+    const layouts = buildCardLayouts(
+        value,
+        () => true,
+        (a, b) => a.type === b.type,
+    );
+
+    expect(shouldShowPickerConnector({
+        index: 0,
+        layouts,
+        showCardEntryConnector: () => false,
+    })).toBe(false);
+
+    expect(shouldShowPickerConnector({
+        index: 0,
+        layouts,
+        showCardEntryConnector: () => true,
+    })).toBe(true);
+
+    expect(shouldShowPickerConnector({
+        index: 1,
+        layouts,
+        showCardEntryConnector: () => false,
+    })).toBe(true);
+});
diff --git a/resources/svg/icons/cards.svg b/resources/svg/icons/cards.svg
new file mode 100644
index 00000000000..18b258d0dac
--- /dev/null
+++ b/resources/svg/icons/cards.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" id="Cards--Streamline-Flex"><g id="cards"><path id="Rectangle 325" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.15058 1.5023c-0.09762 -0.4386 -0.47533 -0.76026 -0.92445 -0.782856 -2.23941 -0.112671 -3.74453 0.03427 -5.92631 0.525676 -0.447772 0.10086 -0.768809 0.49415 -0.781265 0.95261 -0.079813 2.93766 0.088917 4.84324 0.680725 7.68875 0.09223 0.44352 0.47006 0.77202 0.92269 0.79742 2.24522 0.1259 3.75375 -0.0092 5.94454 -0.5273 0.43538 -0.103 0.74834 -0.48406 0.76777 -0.93068 0.1276 -2.93419 -0.04553 -4.85626 -0.6837 -7.72362Z" stroke-width="1"/><path id="Rectangle 326" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.99581 3.07593c0.95769 0.33106 1.86509 0.73804 2.93149 1.30439 0.4318 0.22934 0.6538 0.72079 0.5457 1.19734 -0.6361 2.80708 -1.2944 4.60584 -2.6304 7.15534 -0.2256 0.4307 -0.7102 0.661 -1.1861 0.5598 -1.55918 -0.3316 -2.72851 -0.694 -3.99146 -1.2661" stroke-width="1"/></g></svg>
diff --git a/src/Fields/FieldTransformer.php b/src/Fields/FieldTransformer.php
index 36d04352102..530742f7147 100644
--- a/src/Fields/FieldTransformer.php
+++ b/src/Fields/FieldTransformer.php
@@ -89,6 +89,10 @@ private static function inlineTabField(array $submitted)
                                             unset($set['hide']);
                                         }
 
+                                        if (! Arr::get($set, 'card')) {
+                                            unset($set['card']);
+                                        }
+
                                         return $set;
                                     })
                                     ->filter()
diff --git a/src/Fieldtypes/Bard.php b/src/Fieldtypes/Bard.php
index d4f89574529..1b09501e422 100644
--- a/src/Fieldtypes/Bard.php
+++ b/src/Fieldtypes/Bard.php
@@ -547,6 +547,15 @@ public function extraValidationAttributes(): array
         return $this->runHooks('extra-validation-attributes', $attributes);
     }
 
+    public function flattenedSetsConfig()
+    {
+        return parent::flattenedSetsConfig()->map(function ($set) {
+            unset($set['card']);
+
+            return $set;
+        });
+    }
+
     public function isLegacyData($value)
     {
         if (is_string($value)) {
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 73e0bc0f48b..0223daa7fce 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -47,6 +47,7 @@ protected function configFieldItems(): array
                         'type' => 'sets',
                         'hide_display' => true,
                         'full_width_setting' => true,
+                        'show_card_layout_field' => true,
                     ],
                 ],
             ],
diff --git a/src/Fieldtypes/Sets.php b/src/Fieldtypes/Sets.php
index 4448d8ebebe..ebd5f83a690 100644
--- a/src/Fieldtypes/Sets.php
+++ b/src/Fieldtypes/Sets.php
@@ -58,6 +58,7 @@ public function preProcess($sets)
                         'icon' => $set['icon'] ?? null,
                         'image' => $this->preProcessPreviewImage($set['image'] ?? null),
                         'hide' => $set['hide'] ?? null,
+                        'card' => $set['card'] ?? false,
                         'fields' => collect($set['fields'] ?? [])->map(function ($field, $i) use ($setId) {
                             return array_merge(FieldTransformer::toVue($field), ['_id' => $setId.'-'.$i]);
                         })->all(),
@@ -97,6 +98,7 @@ public function preProcessConfig($sets)
                         return array_merge($config, [
                             'handle' => $name,
                             'id' => $name,
+                            'card' => $config['card'] ?? false,
                             'image' => $this->previewImageUrl($config['image'] ?? null),
                             'fields' => (new NestedFields)->preProcessConfig(Arr::get($config, 'fields', [])),
                         ]);
@@ -128,6 +130,7 @@ public function process($tabs)
                                 'icon' => $section['icon'] ?? null,
                                 'image' => $this->processPreviewImage($section['image'] ?? null),
                                 'hide' => $section['hide'] ?? null,
+                                'card' => $section['card'] ?? false,
                                 'fields' => collect($section['fields'])->map(function ($field) {
                                     return FieldTransformer::fromVue($field);
                                 })->all(),
diff --git a/tests/Fieldtypes/SetsTest.php b/tests/Fieldtypes/SetsTest.php
index 6dc56d194b1..511a78dfe1c 100644
--- a/tests/Fieldtypes/SetsTest.php
+++ b/tests/Fieldtypes/SetsTest.php
@@ -31,6 +31,7 @@ public function it_preprocesses_with_groups()
                         'instructions' => 'One instructions',
                         'icon' => 'one-icon',
                         'hide' => true,
+                        'card' => true,
                         'fields' => [
                             ['handle' => 'field_one', 'field' => ['type' => 'text']],
                         ],
@@ -65,6 +66,7 @@ public function it_preprocesses_with_groups()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => true,
+                        'card' => true,
                         'fields' => [
                             [
                                 '_id' => 'group-alfa-section-one-0',
@@ -97,6 +99,7 @@ public function it_preprocesses_with_groups()
                         'icon' => null,
                         'image' => null,
                         'hide' => null,
+                        'card' => false,
                         'fields' => [
                             [
                                 '_id' => 'group-bravo-section-two-0',
@@ -149,6 +152,7 @@ public function it_preprocesses_without_groups()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => null,
+                        'card' => false,
                         'fields' => [
                             [
                                 '_id' => 'group-main-section-one-0',
@@ -254,6 +258,7 @@ public function it_preprocesses_for_config_with_groups()
                         ],
                         'handle' => 'one',
                         'id' => 'one',
+                        'card' => false,
                         'image' => null,
                     ],
                 ],
@@ -294,6 +299,7 @@ public function it_preprocesses_for_config_with_groups()
                         ],
                         'handle' => 'two',
                         'id' => 'two',
+                        'card' => false,
                         'image' => null,
                     ],
                 ],
@@ -357,6 +363,7 @@ public function it_preprocesses_for_config_without_groups()
                         ],
                         'handle' => 'one',
                         'id' => 'one',
+                        'card' => false,
                         'image' => null,
                     ],
                 ],
@@ -457,6 +464,7 @@ public function it_processes()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => false,
+                        'card' => false,
                         'fields' => [
                             [
                                 'handle' => 'field_one',