Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

For a software dev like me who has no idea how to create a cute hand-drawn dashed line, this course just 100% works.

— Ira Zayats, 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 →