.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.


Teaser Container
================

.. only:: html

.. image:: ../../../Images/ContentElements/TeaserContainer/fe_example.png
	:alt: Frontend Example

The teaser container element provides the possibility to set multiple teasers in a row.
In big viewports (desktop) there are 4 columns of teasers, the columns stack as the viewport gets smaller (mobile).


How to create the element?
--------------------------

You can add the teaser container by selecting the content element in the content element wizard.

.. image:: ../../../Images/ContentElements/TeaserContainer/newContent_wizard.png

After that you can create multiple teasers by pressing the "+ New teaser element" button.

.. image:: ../../../Images/ContentElements/TeaserContainer/new_teaser.png

Each teaser has a required **Image**, **Header** and **Link** field.

.. tip::

	Consider using the "Image manipulation" tool to set the same "Aspect ratio" for all images within a teaser container.

.. image:: ../../../Images/ContentElements/TeaserContainer/image_editor.png