Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Taking your approach on designing things actually makes it fun, more natural, and overall easier.

— Dominik, Developer

classes Modifier

This conditionally compiles a CSS class string using Laravel's Arr::toCssClasses() method.

The modifier expects an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression.

is_active: false
has_error: true
<div class="text-sm {{ ['p-4' => true, 'font-bold' => is_active, 'bg-red' => has_error] | classes }}">
//
</div>
<?php
$classes = Statamic::modify([
'p-4' => true,
'font-bold' => $is_active,
'bg-red' => $has_error
])->classes();
?>
 
<div class="text-sm {{ $classes }}">
//
</div>

You can also use Blade's @class directive:

<div @class([
'text-sm',
'p-4',
'font-bold' => $is_active,
'bg-red' => $has_error
])
>
//
</div>
<div class="text-sm p-4 bg-red">
//
</div>
Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →