A teaser is a element which always contains a teaser_head area to display various media elements as well as a teaser_body area for the text content. The text content can be composed of various text elements which serve the purpose. The example code renders the teaser aligned on the x-axis. If you need a teaser which is aligned along the y-axis, remove the col--XXX-X modifiers.

This is a teaser enhancement, which allows to render a category or flag into the head part of a teaser which layers above the contents. You may also use it to create caption text elements inside the teaser, just add the caption class to it. To make the insert span the whole width, add a col--12 class (or whichever fits your needs)