Triggers Blocks Layouts Fields Menu Items
Table Masonry Grid Horizontal

ImageOverlay / Masonry

This is a quick example of a Catalog with Cards composed of an image with an overlay that can contain a title and some buttons.

The image is set to cover the background and you can set it's desired height using the `imageHeight` prop, otherwise it defaults to 10rem.

The title can span over two lines by default (it will get truncated by ellipsis after that). You can set the number of lines in the `titleLines` prop.

The overlay can be a strong overlay when text is present. However, when title is not present, the overlay is softened to better see the orginal image's colors. It can also be completely disabled by setting the `noOverlay` prop to true.

What's really cool is that you can also insert a toolbar of buttons at the end of the card. Feel free to style it and add the desired classes to it as shown in the example.

public $layout = 'Masonry';

public function card($item)
   return ImageOverlay::form([
      'image' => asset($item->image),
      'buttons' => FlexEnd::form(
         Link::icon('far fa-heart')
            ->post('like-post', ['id' => $item->id])

Preview with layouts: