Skip to main content
← Back to Table of Contents

​
Summary

A layout component designed specifically for stacking ItemCard or ItemCardGroup components vertically. It provides consistent spacing and alignment, ensuring a clean “stack” appearance for complex list items.
ClassBjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCardStack
State type(Layout component — no state)
FieldTypeitem-card-stack
Playground(No dedicated playground — see ItemCardGroup)
ExtendsFilament\Schemas\Components\Component

​
Basic usage

​
Simple vertical stack

use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCardStack;
use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCard;

ItemCardStack::make()
    ->schema([
        ItemCard::make()->title('First Item'),
        ItemCard::make()->title('Second Item'),
        ItemCard::make()->title('Third Item'),
    ]);

​
Custom spacing

ItemCardStack::make()
    ->stackGap('lg')
    ->schema([
        // ... cards ...
    ]);

​
Configuration API

All methods accept Closure unless noted.
MethodTypeDefaultDescription
stackGap(string|Closure $gap)Setup'md'Spacing between items: sm, md, lg
schema(array|Closure $schema)Setup—Components to stack

​
Real-world examples

​
Dashboard Activity Feed

ItemCardStack::make()
    ->stackGap('sm')
    ->schema([
        ItemCard::make()
            ->title('New Order #1234')
            ->description('Received 2 minutes ago')
            ->icon('heroicon-o-shopping-bag'),
        ItemCard::make()
            ->title('User Registered')
            ->description('John Doe joined the platform')
            ->icon('heroicon-o-user-plus'),
    ]);
ComponentWhen to use instead
ItemCardGroupGrid-based layout for cards
SectionWhen a title and collapsible behavior is needed
GridFor multi-column layouts

​
Playground

Stacked layouts: /admin/flex-fields-playground/item-card-group.

​
CSS classes (reference)

ClassRole
fff-item-card-stackRoot wrapper
fff-item-card-stack--gap-{sm|md|lg}Spacing variant