<div class="mdl-cell mdl-cell--12-col mdl-card__supporting-text no-padding ">
    <p>
        <h4>
          <strong>{{articleitem.title|safe|linebreaks}} </strong>
        </h4>    
            
        {% if articleitem.subTitle %} <h5>{{articleitem.subTitle|safe|linebreaks}} </h5> {% endif %}
            {% if articleitem.teaser %}<p>{{articleitem.teaser|safe|linebreaks}} </p> {% endif %}
            {% if articleitem.teaserImage %}
                <span>
                    <img src="{{articleitem.teaserImage.url}}" /> 
                </span>
            {% endif %}
            {% if articleitem.body1 %}<p>{{articleitem.body1|safe|linebreaks}}</p>{% endif %}

            {% if articleitem.body2 %}
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href="{{item.itemCategory}}/{{articleitem.pk}}">{{item.itemReadMore}}</a>
                </div>
            {% endif %}
            <hr />
    </p>
</div>