Skip to main content
← Back to Table of Contents

​
Summary

Modern list row or standalone card for settings screens, navigation menus, and mixed action layouts. Renders a horizontal row with optional leading visuals (icon or image), title, description, and a trailing schema slot for switches, selects, or buttons.
ClassBjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCard
StateNone — display/action component (nested fields use parent form state)
Contextsstandalone (card) · group (flat row)
ExtendsFilament\Schemas\Components\Component

​
Basic usage

​
Standard navigation row

use Bjanczak\FilamentFlexFields\Filament\Schemas\Components\ItemCard;
use Filament\Support\Icons\Heroicon;

ItemCard::make('Language')
    ->description('Choose your preferred language')
    ->icon(Heroicon::GlobeAlt)
    ->chevron()
    ->pressable();

​
Settings row with switch

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\SwitchField;

ItemCard::make('Dark mode')
    ->description('Use dark theme across the app')
    ->icon(Heroicon::Moon)
    ->schema([
        SwitchField::make('dark_mode')->inline()->size('sm'),
    ]);

​
Context: standalone vs group

Rendering mode is controlled by context. This changes surface styling (border, shadow, padding, chevron shape).
ContextWhenVisual behavior
auto (default)Parent is ItemCardGroup → group; otherwise → standaloneDetected automatically
groupRow inside a shared group surfaceFlat row; no per-row border/shadow
standaloneOutside ItemCardGroup (or forced)Self-contained card: border, radius, shadow
ItemCard::make('Profile')->standalone(); // force standalone surface
ItemCard::make('Profile')->inGroup();    // force flat group row

​
Configuration API

All methods accept Closure unless noted.
MethodTypeDefaultDescription
variant(string|Closure $variant)Setup'default'default, secondary, tertiary, outline, transparent.
icon(mixed $icon)SetupnullLeading icon (Heroicon, Gravity, etc.).
image(string|Closure $url)SetupnullLeading media image (overrides icon).
imageShape(string|Closure $shape)Setup'rounded'Crop shape: circle or rounded.
imageAlt(string|Closure $alt)SetupheadingAlternative text for the leading image.
chevron(bool|Closure $on)SetupfalseShow a trailing chevron indicator.
pressable(bool|Closure $on)SetupautoEnable hover/ripple effects (auto-enabled if chevron/url set).
pressableAction(Action|Closure $action)SetupnullAction to trigger when the entire row is clicked.
url(string|Closure $url)SetupnullURL to navigate to on row click.
schema(array|Closure $components)Setup[]Trailing slot components (fields, actions).

​
Public helper methods

MethodReturnsDescription
getVariant()stringResolved surface variant.
getContext()stringgroup or standalone.
isPressable()boolWhether the row is interactive.
hasInteractiveAction()booltrue if schema() contains components.

​
Real-world examples

​
Profile card with avatar

ItemCard::make('Alex Rivera')
    ->description('Product Designer')
    ->image('https://i.pravatar.cc/128?img=12')
    ->imageShape('circle')
    ->chevron()
    ->url(route('profile.edit'));

​
Destructive action row

ItemCard::make('Delete account')
    ->description('Permanently remove your account and all data')
    ->schema([
        Action::make('delete')
            ->label('Delete')
            ->color('danger')
            ->itemCard()
            ->requiresConfirmation(),
    ]);

​
CSS classes (reference)

ClassRole
item-cardBase row wrapper
item-card--{variant}Surface variant modifier
item-card--context-{standalone|group}Layout context modifier
item-card--pressableInteractive state modifier
item-card--form-panelVertical form layout modifier
item-card-iconLeading visual container
item-card-contentTitle and description container
item-card-actionTrailing schema container
item-card-chevronChevron indicator wrapper
ComponentWhen to use instead
ItemCardGroupTo group multiple ItemCard rows in a shared container.
ChoiceCardsFor selectable cards that store a form state.
CoverCardFor media-heavy hero banners or product tiles.

​
Playground

Grouped layouts and hold-confirm actions: /admin/flex-fields-playground/item-card-group.