diff --git a/lang/en/messages.php b/lang/en/messages.php
index 19d1cdad492..2388a3f3955 100644
--- a/lang/en/messages.php
+++ b/lang/en/messages.php
@@ -222,6 +222,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..4799624058f
--- /dev/null
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -0,0 +1,106 @@
+/* GROUP REPLICATOR CARD SETS
+=================================================== */
+.replicator-card-set-row-start {
+    --pull: 1.5rem;
+
+    &:not(.replicator-card-set-has-entry-connector) {
+        [data-ui-popover-trigger] {
+            position: absolute;
+            z-index: var(--z-index-above);
+            transform: translateY(calc(0% - var(--pull)));
+            width: 100%;
+        }
+    }
+
+    &.replicator-card-set-has-entry-connector {
+        [data-ui-popover-trigger] {
+            position: relative;
+            z-index: var(--z-index-above);
+            width: 100%;
+        }
+    }
+}
+
+@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 {
+        width: calc((100% - 0.75rem) / 2);
+        min-width: 0;
+    }
+
+    @container panel (width > 935px) {
+        .replicator-set-slot--card-cols-3 {
+            width: calc((100% - 1.5rem) / 3);
+            min-width: 0;
+        }
+    }
+
+    .replicator-set-slot--full,
+    .replicator-set-slot--card-cols-1,
+    .replicator-set-slot--card-cols-2,
+    .replicator-set-slot--card-cols-3 {
+        .publish-fields {
+            /* Prevent columns and gaps exceeding the container */
+            grid-column-gap: unset;
+
+            * {
+                --col-span: 12;
+            }
+        }
+    }
+
+    .replicator-card-set-inset-picker:not(.replicator-card-set-row-start) {
+        position: relative;
+        margin-block-start: 1.5rem;
+
+        [data-replicator-connector] {
+            display: none;
+        }
+
+        [data-ui-popover-trigger] {
+            position: absolute;
+            inset: 0;
+            left: -1.15rem;
+            writing-mode: vertical-lr;
+
+            [data-insert-handle] {
+                position: absolute;
+                top: 0;
+                left: calc(0.5rem + 2px);
+                height: 100%;
+                width: 0.325rem;
+                background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%, var(--color-gray-200) 100%);
+            }
+        }
+
+        /* Nudge to account for rounding error / subpixel positioning */
+        &:nth-child(3n + 1) [data-ui-popover-trigger] {
+            [data-insert-handle] {
+                left: calc(0.5rem + 1.5px);
+            }
+        }
+    }
+
+    .replicator-card-set-row-start.replicator-card-set-has-entry-connector {
+        &.replicator-set-slot--card-cols-2 [data-ui-popover-trigger] {
+            width: calc(200% + 0.75rem);
+        }
+
+        &.replicator-set-slot--card-cols-3 [data-ui-popover-trigger] {
+            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 dd8ab0f1172..97bab663169 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -35,6 +35,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 59f95fe09a4..21c152c41c9 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 7d58aa4f4d9..5d1416de055 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -75,6 +75,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"
@@ -154,6 +155,10 @@ export default {
         showSectionHandleField: {
             type: Boolean,
             default: false,
+        },
+        showSectionCardField: {
+            type: Boolean,
+            default: false,
         },
 	    showSectionCollapsibleField: {
 			type: Boolean,
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
index 4145a83a725..dc84eee2ded 100644
--- a/resources/js/components/fieldtypes/replicator/AddSetButton.vue
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -17,6 +17,7 @@
             >
                 <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-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850"
                     :class="{
                         'group-hover:opacity-0': enabled,
@@ -30,7 +31,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" />
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index d2843c3f0ba..b79b89f7241 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -21,51 +21,71 @@
                             :model-value="value"
                             :vertical="true"
                             :item-class="sortableItemClass"
-                            :handle-class="sortableHandleClass"
+                            :handle-class="sortableRowHandleClass"
                             append-to="body"
                             constrain-dimensions
-                            @update:model-value="sorted($event)"
+                            :animate="false"
+                            @update:model-value="sorted"
                             @dragstart="$emit('focus')"
                             @dragend="$emit('blur')"
                             v-slot="{}"
                         >
-                            <div class="relative">
-                                <ReplicatorSet
+                            <div ref="setList" class="replicator-set-list relative">
+                                <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"
-                                    :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)"
+                                    :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"
-                                            :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"
+                                        :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)"
+                                    >
+                                        <template v-slot:picker>
+                                            <add-set-button
+                                                variant="between"
+                                                :groups="groupConfigs"
+                                                :sets="setConfigs"
+                                                :index="index"
+                                                :enabled="canAddSet"
+                                                :is-first="index === 0"
+                                                :show-connector="showPickerConnector(index)"
+                                                :loading-set="loadingSet"
+                                                @added="addSet"
+                                            />
+                                        </template>
+                                    </ReplicatorSet>
+                                </div>
                             </div>
                         </sortable-list>
 
@@ -73,7 +93,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"
@@ -95,6 +115,13 @@ import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
 import { data_get } from "@/bootstrap/globals.js";
+import {
+    buildCardLayouts,
+    getCardGroupMemberIds,
+    shouldShowPickerConnector,
+} from './cardLayouts.js';
+
+const CARD_MULTI_COLUMN_MIN_WIDTH = 635;
 
 export default {
     mixins: [Fieldtype, ManagesSetMeta],
@@ -118,6 +145,8 @@ export default {
             errorsById: {},
             setsCache: {},
             loadingSet: null,
+            cardMultiColumnLayout: false,
+            cardLayoutObserver: null,
         };
     },
 
@@ -150,8 +179,16 @@ 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),
+            );
         },
 
         replicatorPreview() {
@@ -196,6 +233,59 @@ export default {
             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;
+            }
+
+            if (index === 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)]);
         },
@@ -207,7 +297,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);
+            }
         },
 
         addSet(handle, index) {
@@ -303,21 +422,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() {
@@ -356,6 +476,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,
+            });
+        },
+
+        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]')
+                ?? root?.closest('[class*="container/panel"]');
+
+            if (!panel) {
+                this.cardMultiColumnLayout = false;
+                return;
+            }
+
+            const update = () => {
+                this.cardMultiColumnLayout = panel.clientWidth > CARD_MULTI_COLUMN_MIN_WIDTH;
+            };
+
+            update();
+            this.cardLayoutObserver = new ResizeObserver(update);
+            this.cardLayoutObserver.observe(panel);
+        },
+    },
+
+    mounted() {
+        this.$nextTick(() => this.observeCardLayoutContainer());
+    },
+
+    beforeUnmount() {
+        this.cardLayoutObserver?.disconnect();
     },
 
     watch: {
@@ -371,6 +554,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 3b7ef4c3a72..250516485ed 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -132,7 +132,7 @@ reveal.use(rootEl, () => emit('expanded'));
             data-replicator-set
             class="relative w-full rounded-lg border border-gray-300 text-base dark:border-white/10 bg-white dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black shadow-ui-sm dark:[&_[data-ui-switch]]:border-gray-600 dark:[&_[data-ui-switch]]:border-1"
             :class="{
-                'border-red-500': hasError
+                'border-red-500': hasError,
             }"
             :data-collapsed="collapsed ?? undefined"
             :data-error="hasError ?? undefined"
@@ -173,12 +173,27 @@ reveal.use(rootEl, () => emit('expanded'));
                     />
                 </button>
                 <div class="flex items-center gap-2" v-if="!readOnly">
-                    <Switch size="xs" :model-value="enabled" @update:model-value="toggleEnabledState" v-tooltip="enabled ? __('Included in output') : __('Hidden from output')" />
+                    <Switch
+                        v-if="!config.card"
+                        size="xs"
+                        :model-value="enabled"
+                        @update:model-value="toggleEnabledState"
+                        v-tooltip="enabled ? __('Included in output') : __('Hidden from output')"
+                    />
                     <Dropdown>
                         <template #trigger>
                             <Button icon="dots" variant="ghost" size="xs" :aria-label="__('Open dropdown menu')" />
                         </template>
                         <DropdownMenu>
+                            <div
+                                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 dark:text-gray-300"
+                                @pointerdown.stop
+                            >
+                                <span>{{ __('Visible') }}</span>
+                                <Switch size="xs" :model-value="enabled" @update:model-value="toggleEnabledState" />
+                            </div>
+                            <DropdownSeparator v-if="config.card" />
                             <DropdownItem
                                 v-if="fieldActions.length"
                                 v-for="action in fieldActions"
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..e112abc7492
--- /dev/null
+++ b/resources/js/components/fieldtypes/replicator/cardLayouts.js
@@ -0,0 +1,84 @@
+export function cardGroupColumns(count) {
+    if (count <= 1) {
+        return 1;
+    }
+
+    if (count === 2) {
+        return 2;
+    }
+
+    return 3;
+}
+
+export function buildCardLayouts(value, isCardSet, isSameCardGroup) {
+    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);
+
+        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 }) {
+    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;
+
+    return value
+        .slice(groupStart, groupStart + layout.groupSize)
+        .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/tests/components/fieldtypes/replicator/cardLayouts.test.js b/resources/js/tests/components/fieldtypes/replicator/cardLayouts.test.js
new file mode 100644
index 00000000000..4d82c99e72d
--- /dev/null
+++ b/resources/js/tests/components/fieldtypes/replicator/cardLayouts.test.js
@@ -0,0 +1,98 @@
+import { expect, test } from 'vitest';
+import {
+    buildCardLayouts,
+    cardGroupColumns,
+    getCardGroupMemberIds,
+    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);
+});
+
+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 layouts = buildCardLayouts(value, isCardSet, isSameCardGroup);
+
+    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('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: 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 ab992143676..ead5ac616e5 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 e90c46b00fb..17db2413828 100644
--- a/tests/Fieldtypes/SetsTest.php
+++ b/tests/Fieldtypes/SetsTest.php
@@ -29,6 +29,7 @@ public function it_preprocesses_with_groups()
                         'instructions' => 'One instructions',
                         'icon' => 'one-icon',
                         'hide' => true,
+                        'card' => true,
                         'fields' => [
                             ['handle' => 'field_one', 'field' => ['type' => 'text']],
                         ],
@@ -63,6 +64,7 @@ public function it_preprocesses_with_groups()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => true,
+                        'card' => true,
                         'fields' => [
                             [
                                 '_id' => 'group-alfa-section-one-0',
@@ -95,6 +97,7 @@ public function it_preprocesses_with_groups()
                         'icon' => null,
                         'image' => null,
                         'hide' => null,
+                        'card' => false,
                         'fields' => [
                             [
                                 '_id' => 'group-bravo-section-two-0',
@@ -147,6 +150,7 @@ public function it_preprocesses_without_groups()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => null,
+                        'card' => false,
                         'fields' => [
                             [
                                 '_id' => 'group-main-section-one-0',
@@ -252,6 +256,7 @@ public function it_preprocesses_for_config_with_groups()
                         ],
                         'handle' => 'one',
                         'id' => 'one',
+                        'card' => false,
                         'image' => null,
                     ],
                 ],
@@ -292,6 +297,7 @@ public function it_preprocesses_for_config_with_groups()
                         ],
                         'handle' => 'two',
                         'id' => 'two',
+                        'card' => false,
                         'image' => null,
                     ],
                 ],
@@ -355,6 +361,7 @@ public function it_preprocesses_for_config_without_groups()
                         ],
                         'handle' => 'one',
                         'id' => 'one',
+                        'card' => false,
                         'image' => null,
                     ],
                 ],
@@ -418,6 +425,7 @@ public function it_processes()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => false,
+                        'card' => false,
                         'fields' => [
                             [
                                 'handle' => 'field_one',