5.11 Small teaser View in a new window
Example
Markup
{% set data = data|default({
"theme": "",
"heading": "For councils",
"copy": "Here you will find specific information including forms, procedures and asbestos campaign materials",
"date": {
"machine":"2019-03-30",
"human":" 3 March 2020"
},
"modifier_class":"col-12 col-md-6 px-0",
"img": {
"left":"./images/hompage-50-2.png"
},
"linkUrl":"",
"rowModifierClass":"",
"svgUrl":"."
})
%}
<div class="small-teaser {{data.modifier_class}}">
<div class="row m-0 h-100 {{data.rowModifierClass}}">
{% if data.img.left %}
<div class="small-teaser__image-area col-12 col-md-6 px-0">
<img src="{{data.img.left}}" alt="{{data.imgAlt}}" class="small-teaser__image">
</div>
{% endif %}
<div class="small-teaser__content col-md-6 col-12">
<h2 class="small-teaser__title">
<a href="{{data.linkUrl}}" class="small-teaser__link">{{data.heading}}</a>
</h2>
{% if data.tag %}
<p class="small-teaser__tag">{{data.tag}}</p>
{% endif %}
{% if data.date %}
<p class="small-teaser__date">
<time datetime="{{data.date.machine}}">{{data.date.human}}</time>
</p>
{% endif %}
{% if data.copy %}<div class="small-teaser__copy">{{data.copy}}</div>{% endif %}
<img src="{{data.svgUrl}}/images/arrow-blue.svg" class="nsw-card__copy nsw-icon nsw-card__icon">
</div>
</div>
</div>