Skip to main content

Teaser Style Guide

The HTML structure for all teaser styles is identical. Use the teaser HTML and add a modifier class to article element to define the teaser layout style.

<article class="teaser MODIFIER_CLASSES">

Teaser HTML

<article class="teaser">

<!-- Teaser M=media -->
<div class="teaser__media">
<div class="image teaser__image">
<a href="/url">
<img src="teaser-image.jpg">

<!-- Teaser content -->
<div class="teaser__content">
<!-- Headline -->
<div class="channel teaser__channel">
<i data-background data-color="#CCC"></i>
<a href="/channel-url">Channel</a>
<h2 class="teaser__headline">
<a href="/url">Title</a>

<!-- Authored info -->
<footer class="teaser__authored">
<span class="date">Date</span>
<span class="author">by Author Name</span>

<!-- Teaser text -->
<div class="teaser__body">
Teaser text


Class Modifiers

teaser--cardDefines teaser card layout
teaser--small-cardDefines Small Teaser Card teaser style
teaser--medium-cardDefines Medium Card and Medium Card With Teaser Text style
teaser--medium-card-square-imageDefines Medium Card With Square Image teaser style
teaser--large-cardDefines Large Card teaser style
teaser--compactDefines compact teaser layout
teaser--small-compactDefines Small Compact teaser style
teaser--medium-compactDefines Medium Compact teaser style
teaser--large-compactDefines Large Compact teaser style
teaser--itemDefines teaser item layout
teaser--tiny-itemDefines Tiny Item teaser style
teaser--small-itemDefines Small Item teaser style
teaser--medium-itemDefines Medium Item teaser style

teaser--borderedAdds a border on teaser article element

Example usage

    <!-- Medium teaser card layout -->
<article class="teaser teaser--card teaser--medium-card">

<!-- Small compact teaser layout -->
<article class="teaser teaser--compact teaser--small-compact">

<!-- Medium item teaser layout -->
<article class="teaser teaser--item teaser--medium-item">

<!-- Bordered Medium teaser card -->
<article class="teaser teaser--card teaser--medium-card teaser--bordered">

TheMAG data-background attribute

You might find yourself in a situation where you need to use inline style to dynamically set background image or color to a particular element in the view row. Since views don't allow usage of style attribute for security reasons, you can use TheMAG "data-background" attribute in combination with few additional attributes for this purpose.

Available attributes which you can use in combination with data-background

data-srcPath to image
data-colorColor HEX or RBA/RGBA
data-widthElement width. Default is 100%.
data-heightElement height.

Example usage

    <div data-background="image" data-src="image.jpg">

<div data-background data-color="#CCC">

<div data-background="image" data-src="image.jpg" data-height="60vh">

Teaser Layouts