    <!--div class="about-details">
        <div class="pentagon-text">
            <h1>{{articleitem.order}}</h1>
        </div>
        <h3>{{articleitem.title}}</h3>
        <h4>{{articleitem.subTitle}}</h4>
        <p>{{articleitem.teaser}}</p>
    </div-->

    <div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card">
        {% if articleitem.teaserImage %}
            <div class="mdl-card__media">
                <a href="{{item.itemCategory}}/{{articleitem.pk}}">
                    <img class="article-image" src="{{articleitem.teaserImage.url}}" border="0" alt="{{articleitem.title|safe}}" title="{{articleitem.title|safe}}">
                </a>
            </div>
        {% endif %}

        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">{{articleitem.title|safe|linebreaks}}</h2>
        </div>
        <div class="mdl-card__supporting-text">
            {% if articleitem.subTitle %}{{articleitem.subTitle|safe|linebreaks}}{% endif %}
        </div>
        <div class="mdl-card__supporting-text">
            {% if articleitem.teaser %}{{articleitem.teaser|safe|linebreaks}}{% endif %}
        </div>
        <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>
    </div>


                
