Clever Component Library

Teaser List 

<ul class="teaser-list">
    <li class="teaser-list-item">
        <article class="teaser">
            <header class="teaser-header">
                <div class="teaser-meta">
                    <small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
                </div>
                <h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
            </header>

            <div class="image">
                <div class="image-inner">
                    <span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
                    <noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
                </div>
            </div>

            <div class="teaser-cta">
                <span class="text">Read more</span>
            </div>
        </article>
    </li>
    <li class="teaser-list-item">
        <article class="teaser">
            <header class="teaser-header">
                <div class="teaser-meta">
                    <small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
                </div>
                <h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
            </header>

            <div class="image">
                <div class="image-inner">
                    <span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
                    <noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
                </div>
            </div>

            <div class="teaser-cta">
                <span class="text">Read more</span>
            </div>
        </article>
    </li>
    <li class="teaser-list-item">
        <article class="teaser">
            <header class="teaser-header">
                <div class="teaser-meta">
                    <small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
                </div>
                <h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
            </header>

            <div class="image">
                <div class="image-inner">
                    <span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
                    <noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
                </div>
            </div>

            <div class="teaser-cta">
                <span class="text">Read more</span>
            </div>
        </article>
    </li>
    <li class="teaser-list-item">
        <article class="teaser">
            <header class="teaser-header">
                <div class="teaser-meta">
                    <small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
                </div>
                <h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
            </header>

            <div class="image">
                <div class="image-inner">
                    <span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
                    <noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
                </div>
            </div>

            <div class="teaser-cta">
                <span class="text">Read more</span>
            </div>
        </article>
    </li>
    <li class="teaser-list-item">
        <article class="teaser">
            <header class="teaser-header">
                <div class="teaser-meta">
                    <small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
                </div>
                <h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
            </header>

            <div class="image">
                <div class="image-inner">
                    <span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
                    <noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
                </div>
            </div>

            <div class="teaser-cta">
                <span class="text">Read more</span>
            </div>
        </article>
    </li>
    <li class="teaser-list-item">
        <article class="teaser">
            <header class="teaser-header">
                <div class="teaser-meta">
                    <small class="teaser-context">Infrastruktur</small> <small class="teaser-date">04/14/2017</small>
                </div>
                <h3 class="heading heading--small teaser-heading"><a href="#">See the entire Clever charging network</a></h3>
            </header>

            <div class="image">
                <div class="image-inner">
                    <span style="padding-bottom: 100%;" class="image-placeholder" data-img-attr='{"src":"/temp/teaser-1.jpg","alt":"","srcset":"/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
                    <noscript><img src="/temp/teaser-1.jpg" alt="" srcset="/temp/teaser-1.jpg 1x,/temp/teaser-1@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
                </div>
            </div>

            <div class="teaser-cta">
                <span class="text">Read more</span>
            </div>
        </article>
    </li>
</ul>
 
<ul class="teaser-list">
	{% for teaser in teasers %}
		<li class="teaser-list-item">{% include '@teaser' with teaser only %}</li>
	{% endfor %}
</ul>
 
{
  "teasers": [
    {
      "teaserModifiers": [],
      "teaserImage": {
        "url": "/temp/teaser-1.jpg",
        "width": 318,
        "height": 318,
        "retina": true,
        "lazyload": true,
        "sizes": [
          {
            "url": "/temp/teaser-1.jpg"
          },
          {
            "url": "/temp/teaser-1@2x.jpg"
          }
        ],
        "attributes": {
          "data-object-fit": "cover",
          "data-object-position": "center center"
        }
      },
      "teaserContext": "Infrastruktur",
      "teaserDate": "04/14/2017",
      "teaserHeading": "See the entire Clever charging network",
      "teaserUrl": "#"
    },
    {
      "teaserModifiers": [],
      "teaserImage": {
        "url": "/temp/teaser-1.jpg",
        "width": 318,
        "height": 318,
        "retina": true,
        "lazyload": true,
        "sizes": [
          {
            "url": "/temp/teaser-1.jpg"
          },
          {
            "url": "/temp/teaser-1@2x.jpg"
          }
        ],
        "attributes": {
          "data-object-fit": "cover",
          "data-object-position": "center center"
        }
      },
      "teaserContext": "Infrastruktur",
      "teaserDate": "04/14/2017",
      "teaserHeading": "See the entire Clever charging network",
      "teaserUrl": "#"
    },
    {
      "teaserModifiers": [],
      "teaserImage": {
        "url": "/temp/teaser-1.jpg",
        "width": 318,
        "height": 318,
        "retina": true,
        "lazyload": true,
        "sizes": [
          {
            "url": "/temp/teaser-1.jpg"
          },
          {
            "url": "/temp/teaser-1@2x.jpg"
          }
        ],
        "attributes": {
          "data-object-fit": "cover",
          "data-object-position": "center center"
        }
      },
      "teaserContext": "Infrastruktur",
      "teaserDate": "04/14/2017",
      "teaserHeading": "See the entire Clever charging network",
      "teaserUrl": "#"
    },
    {
      "teaserModifiers": [],
      "teaserImage": {
        "url": "/temp/teaser-1.jpg",
        "width": 318,
        "height": 318,
        "retina": true,
        "lazyload": true,
        "sizes": [
          {
            "url": "/temp/teaser-1.jpg"
          },
          {
            "url": "/temp/teaser-1@2x.jpg"
          }
        ],
        "attributes": {
          "data-object-fit": "cover",
          "data-object-position": "center center"
        }
      },
      "teaserContext": "Infrastruktur",
      "teaserDate": "04/14/2017",
      "teaserHeading": "See the entire Clever charging network",
      "teaserUrl": "#"
    },
    {
      "teaserModifiers": [],
      "teaserImage": {
        "url": "/temp/teaser-1.jpg",
        "width": 318,
        "height": 318,
        "retina": true,
        "lazyload": true,
        "sizes": [
          {
            "url": "/temp/teaser-1.jpg"
          },
          {
            "url": "/temp/teaser-1@2x.jpg"
          }
        ],
        "attributes": {
          "data-object-fit": "cover",
          "data-object-position": "center center"
        }
      },
      "teaserContext": "Infrastruktur",
      "teaserDate": "04/14/2017",
      "teaserHeading": "See the entire Clever charging network",
      "teaserUrl": "#"
    },
    {
      "teaserModifiers": [],
      "teaserImage": {
        "url": "/temp/teaser-1.jpg",
        "width": 318,
        "height": 318,
        "retina": true,
        "lazyload": true,
        "sizes": [
          {
            "url": "/temp/teaser-1.jpg"
          },
          {
            "url": "/temp/teaser-1@2x.jpg"
          }
        ],
        "attributes": {
          "data-object-fit": "cover",
          "data-object-position": "center center"
        }
      },
      "teaserContext": "Infrastruktur",
      "teaserDate": "04/14/2017",
      "teaserHeading": "See the entire Clever charging network",
      "teaserUrl": "#"
    }
  ]
}

No notes defined.