Components
Triggers Blocks Layouts Fields Menu Items
Cards
Table Masonry Grid Horizontal

ImageRow / Grid

This is a quick example of a Catalog with Cards composed of an image, title and text description.

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 text description can span over three lines by default (it will get truncated by ellipsis after that). You can set the number of lines in the `textLines` prop.

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 = 'Grid';

public function card($item)
{
   return ImageRow::form([
      'image' => asset($item->image),
      'title' => $item->title,
      'text' => $item->description,
      'url' => route('some-route', ['id' => $item->id]),
      'col' => 'col-4',
      'class' => 'border border-gray-300 shadow mb-6',
      'buttons' => FlexEnd::form(
          Link::form('Comment')->icon('far fa-comment')->class('mr-3'),
          Link::form('Share')->icon('fas fa-retweet')
            ->post('share-link-route', ['id' => $item->id])
      )->class('mt-3')
   ]);
}

Preview with layouts: