twigfiddle.com - Fiddle cmnmyv v1 - Created on October 19, 2017 16:56

File

<html>
    <head>
        <style type="text/css">
         #wrapper {
             width: 300px;
             height: 250px;
             background-color: #efefef;
             overflow: hidden;
         }
         #image {
          background-image: url({{ i }});
          background-size: contain;
          background-repeat: no-repeat;
          background-position: top left;
          width: 300px;
          height: 157px;
         }
         {% verbatim %}
         #text {
          display: block;
          font: Open-sans, sans-serif;
            font-size: 12px;
          padding: 5px;
         }
         #title {
          display: block;
          font-size: 15px;
          line-height: 18px;
          max-height: 36px;
          overflow: hidden;
         }
         #description {
          display: block;
          margin-top: 4px;
          line-height: 14px;
          overflow: hidden;
         }
         #sponsored {
          position: absolute;
          bottom: 4px;
          left: 4px;
            color: blue;
            text-decoration: underline;
         }
         #cta {
          display: none;
          color: red;
         }
    {% endverbatim %}
        </style>
    </head>
    {% import _self as self %}
    {% set titleLength = t|length %}
    {% set descriptionLength = d|length %}

	{% macro ellipsis(str, maxLength) %}
		{% if str|length >= maxLength %}
			{% set cutOffStr = str|slice(0, maxLength) %}
	    	{% set words = cutOffStr|split(" ") %}
			{{ words|slice(0, words|length -1 )|join(" ")}}...
		{% else %}
		   {{ str }}
		{% endif %}
	{% endmacro %}
    
    <body style="margin:0; padding:0">
      <div id="wrapper">
        <div id="image"></div>
          <div id="text">
            <div id="title">{{ t }} - {{ titleLength }}</div>
            <div id="description" style="max-height: {% if (titleLength < 32) %}42px;{% else %}28px;{% endif %}">
            	 {{ self.ellipsis(d, 30 ) }}
            </div>
            <div id="sponsored">{{ s }}</div>
            <div id="cta">{{ cta }}</div>
          </div>
      </div>
    </body>
</html>

Format

{
    "i": "https://twigfiddle.com/bundles/fuzapp/img/logo_twig-fiddle.png",
    "d":"some lenghty description",
    "t": "title",
    "s": null,
    "cta" : null
}