New component html suggestions

gistfile1.html

<!-- EO-THUMBNAIL -->
<eo-thumbnail eo-background="background-image: url('//cdn2.hubspot.net/hubfs/378889/Blog_photos/shutterstock_307289936.jpg?t=1442836074839');"
        eo-href="http://blog.eyeopen.nl/huis-kopen/voorlopig-koopcontract-3-dingen-om-op-te-letten">
  
  <small class="hidden-sm text-muted">Voorlopig koopcontract</small>
          
  <small class="text-muted hidden-sm pull-right"><i class="icon icon-clock-o icon-fw"></i>Sep 18, 2015</small>

  <h4><a href="{{eoHref}}">Voorlopig koopcontract: 3 dingen om op te letten</a></h4>

  <p eo-truncate="" style="max-height: 70px;">Yes! Na een lange huizenjacht heb je eindelijk je droomwoning gevonden. Nu wil je natuurlijk dat de woning zo snel mogelijk ...</p>

  <a href="{{eoHref}}" class="btn btn-primary pull-right">Lees meer <i class="icon icon-fw icon-chevron-right"></i></a>
</eo-thumbnail>

<!-- Results in: -->

<section class="eo-thumbnail">
    <div class="eo-thumbnail-background" style="background-image: url('//cdn2.hubspot.net/hubfs/378889/Blog_photos/shutterstock_307289936.jpg?t=1442836074839');"></div>
    <div class="eo-thumbnail-caption">
        <div class="row">
            <div class="col-xs-12">
                <small class="hidden-sm text-muted">Voorlopig koopcontract</small>
                        
                <small class="text-muted hidden-sm pull-right"><i class="icon icon-clock-o icon-fw"></i>Sep 18, 2015</small>

                <h4><a href="http://blog.eyeopen.nl/huis-kopen/voorlopig-koopcontract-3-dingen-om-op-te-letten">Voorlopig koopcontract: 3 dingen om op te letten</a></h4>
                <p eo-truncate="" style="max-height: 70px;">Yes! Na een lange huizenjacht heb je eindelijk je droomwoning gevonden. Nu wil je natuurlijk dat de woning zo snel mogelijk ...</p>

                <a href="http://blog.eyeopen.nl/huis-kopen/voorlopig-koopcontract-3-dingen-om-op-te-letten" class="btn btn-primary pull-right">Lees meer <i class="icon icon-fw icon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</section>

<!-- EO-CARD (LG) -->
<eo-card eo-card-title="OUR TITLE" size="lg" eo-href="http://blog.eyeopen.nl/huis-kopen/bieden-op-een-huis-hoe-breng-je-het-openingsbod-uit" eo-background="//cdn2.hubspot.net/hubfs/378889/Blog_photos/biedenopeenhuis.jpg?t=1442836074839">
    <p>Ben jij na het bezichtigen verliefd geworden op een huis? Wat fijn! Het is hartstikke leuk om een huis te vinden dat helemaal voldoet aan jouw wensen en eisen. Stap één is gezet. Maar hoe maak je er vervolgens ook echt jouw huis van? Dat hangt allemaal af van de fase waarin jij gaat bieden op een huis. Het openingsbod speelt hierin een hele ...</p>
</eo-card>

<!-- results in: -->

<div class="col-md-6 col-sm-12">
    <eo-card size="lg" style="background: url('//cdn2.hubspot.net/hubfs/378889/Blog_photos/biedenopeenhuis.jpg?t=1442836074839') no-repeat;background-size: cover;">  
        <div class="caption">
            <h4 class="caption-title"><a href="http://blog.eyeopen.nl/huis-kopen/bieden-op-een-huis-hoe-breng-je-het-openingsbod-uit">OUR TITLE</a></h4>
             <p eo-truncate="" style="max-height: 110px;">Ben jij na het bezichtigen verliefd geworden op een huis? Wat fijn! Het is hartstikke leuk om een huis te vinden dat helemaal voldoet aan jouw wensen en eisen. Stap één is gezet. Maar hoe maak je er vervolgens ook echt jouw huis van? Dat hangt allemaal af van de fase waarin jij gaat bieden op een huis. Het openingsbod speelt hierin een hele ...</p>
        </div>
    </eo-card>
</div>

<!-- EO-CARD small (default): -->
<eo-card eo-href="http://blog.eyeopen.nl/huis-kopen/bieden-op-een-huis-hoe-breng-je-het-openingsbod-uit" eo-title="OUR TITLE" eo-background:"//cdn2.hubspot.net/hubfs/378889/biedenopeenhuis10gebodenvanhetonderhandelen.jpg?t=1442836074839">
</eo-card>

<!-- results in: -->
<div class="col-xs-6">                            
    <eo-card style="background: url('//cdn2.hubspot.net/hubfs/378889/biedenopeenhuis10gebodenvanhetonderhandelen.jpg?t=1442836074839') no-repeat;background-size: cover;">
              
        <div class="caption">   
            <h5 class="caption-title" eo-truncate="" style="max-height: 60px;"><a href="http://blog.eyeopen.nl/huis-kopen/bieden-op-een-huis-10-geboden-van-het-onderhandelen">OUR TITLE</a></h5>
        </div>
    </eo-card>
</div>

<!-- EO-SUMMARY: -->
<eo-summary eo-background="background-image: url('//cdn2.hubspot.net/hubfs/378889/Blog_photos/Eigenwoningforfait.jpg?t=1442836074839');">
    <h3>Eigenwoningforfait: wat is het en hoe bereken je het?</h3>

    <aside>
        <a class="text-muted small" href="http://blog.eyeopen.nl/topic/belastingaangifte"><i class="icon icon-tags icon-fw"></i>Belastingaangifte</a>
    </aside>
</eo-summary>

<!-- results in: -->
<div class="eo-summary">
    <div class="eo-summary-content">
        <h5 class="eo-summary-title"><a href="http://blog.eyeopen.nl/belasting-en-juridisch/eigenwoningforfait-wat-is-het-en-hoe-bereken-je-het">Eigenwoningforfait: wat is het en hoe bereken je het?</a></h5>

        <aside> 
            <a class="text-muted small" href="/topic/belastingaangifte"><i class="icon icon-tags icon-fw"></i>Belastingaangifte</a>
        </aside>
    </div>

    <div class="eo-summary-image" style="background-image: url('//cdn2.hubspot.net/hubfs/378889/Blog_photos/Eigenwoningforfait.jpg?t=1442836074839');"></div>  
</div>