Teaser Box

For the teaser box, select the element type Teaser box. You can adjust the width of the boxes by assigning CSS classes. If you add an image, select the image size Teaser-Box (450x270).

Teaser box with text/image side by side

Enter headline and text

Image settings

If you add an image, the image alignment (left or right) controls whether the image is displayed to the left or right of the text.

Further settings

Under Teaser box settings you can select a page to link to and enter the link text.

The field Card CSS class changes the background and text color. You can use the classes of the Materialize color palette. To change the background, add e.g. the following classes: red, red lighten-5. To change the text color, use e.g. the classes white-text and black-text.

Select the template

Under Template settings, select the template ce_mate_teaserbox_card.

Example

This is what it could look like. You find more examples in our theme demo.

Possible error: images no longer displayed after an update

This error can occur if you customized the template ce_mate_teaserbox.html5.

Replace the following line …

{{picture::<?= $this->picture ?>?size=10&alt=<?= $this->metaImg[$GLOBALS['TL_LANGUAGE']]['alt'] ?>}}

… with the following line:

<?php $this->insert('image', $this->arrData); ?>

You can then select the image size in the content element.