Extended Grid
Use the following code snippet in order to create more advanced Grid based layouts. This could be a block with image, title and description.
public function tab1() { $this->layout = new stdClass(); $this->layout->scroll[] = $this->getComponentText('Extended grid', [], [ 'padding' => '10 15 10 15', 'font-size' => '19', ]); $this->getExtendedGrid(); $this->layout->overlay[] = $this->components->uiKitFloatingButtons([ [ 'icon' => 'layouts-exit-icon.png', 'onclick' => $this->getOnclickRoute('Controller/Default', false) ], ], true); return $this->layout; } public function getExtendedGrid() { $elements_per_row = 2; $chunks = array_chunk($this->getElements(4), $elements_per_row); foreach ($chunks as $index => $row_items) { $items = []; foreach ($row_items as $i => $row_item) { $items[] = $this->getComponentColumn([ $this->getComponentImage($row_item['image'], [], [ 'margin' => '2 2 0 2', ]), $this->getComponentText($row_item['title'], [], [ 'font-size' => '17', 'padding' => '7 0 7 0', ]), $this->getComponentText($row_item['description'], [], [ 'font-size' => '13', 'color' => '#8b8e89', 'padding' => '0 0 7 0', 'text-align' => 'center', ]), ], [], [ 'width' => 100 / $elements_per_row . '%', 'padding' => '3 5 3 5', 'text-align' => 'center', ]); } $this->layout->scroll[] = $this->getComponentRow($items, [], [ 'width' => 'auto', 'vertical-align' => 'middle', 'margin' => '0 15 0 15', ]); if ( ($index+1) < count($chunks) ) { $this->layout->scroll[] = $this->getComponentSpacer(1, [], [ 'background-color' => '#eeeeee', 'margin' => '4 0 4 0', ]); } } }