5 #card Card

Example
Citizen's Dialogue in Bled with commissioners Violeta Bulc and Phil hogan

A dummy text probably going to be too long and therefore going to be trimmed with ellipsis at the end. A dummy text probably going to be too long and therefore going to be trimmed with ellipsis at the end
<div class="card">
  <a href="#" class="wrapping-link" title="Energy Union tour">
    <span class="sr-only">Citizen's Dialogue in Bled</span>
  </a>
  <div class="card__header">
    <div class="card__image">
      <img src="https://picsum.photos/700/520"/>
      <div class="card__icon">
        <span class="icon icon--camera"></span>
      </div>
    </div>
    <div class="card__info">
      <div class="icon icon--before icon--calendar">Friday 13 April</div>
      <div class="icon icon--before icon--location">Athens, Greece</div>
    </div>
  </div>
  <div class="card__content">
    <h3 class="card__content__title">
      <a href="#" title="Citizen's Dialogue in Bled">
        Citizen's Dialogue in Bled with commissioners Violeta Bulc and Phil hogan
      </a>
    </h3>
    <!-- This has to be an inline element in order for superclamp to work properly. -->
    <span class="card__content__description">
      A dummy text probably going to be too long and therefore going to be trimmed with ellipsis at the end.
      A dummy text probably going to be too long and therefore going to be trimmed with ellipsis at the end
    </span>
  </div>
  <!-- Optional / card footer is only present when live streaming is available -->
  <div class="card__footer">
    <span class="icon icon--livestreaming icon--before">live streaming available</span>
  </div>
  <!-- This is actually provided by webtools, here only for demo purposes. We only need the wrapper element. -->
  <div class="card__share">
    <div class="wtShareList wtWidgets wtEnd">
      <ul class="wtShareNetworks">
        <li>
          <a class="icon-social icon-social--twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;text=UEC%20-%20WIZARD" tabindex="0" title="Twitter" style="cursor: pointer;">Twitter</a>
        </li>
        <li>
          <a class="icon-social icon-social--facebook" href="http://www.facebook.com/share.php?u=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;t=UEC%20-%20WIZARD" tabindex="0" title="Facebook" style="cursor: pointer;">Facebook</a>
        </li>
        <li>
          <a class="icon-social icon-social--generic" href="https://mail.google.com/mail/?view=cm&amp;fs=1&amp;tf=1&amp;to=&amp;su=UEC%20-%20WIZARD&amp;body=http%3A%2F%2Feuropa.eu%2Fwebtools%2Fmgmt%2Fwizard%2Fui.php%3Fuec%3Dsbkm%23&amp;zx=RANDOMCRAP&amp;shva=1&amp;disablechatbrowsercheck=1&amp;ui=1" tabindex="0" title="Gmail" style="cursor: pointer;">Gmail
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<!-- Webtools styles -->
<style type="text/css">
  .wtShareNetworks {
    margin: 0 !important;
    overflow: hidden;
    padding: 0 !important;
  }
  .wtShareNetworks li, .wtShareNetworks {
    list-style-type: none;
    text-indent: 0;
    background-image: none;
    list-style-image: none !important;
  }
  .wtShareNetworks li {
    display: inline-block;
    height: 40px;
    width: 40px;
  }
  .wtShareNetworks a {
    font-size: 0pt;
    text-indent: -9999px;
  }
</style>

<!-- Example script. -->
<script type="application/json">
{
  "service": "share",
  "popup": false,
  "icon": true,
  "to": [
    "more",
    "twitter",
    "facebook"
  ],
  "selection": false
}
</script>

<!-- Script for the text ellipsis -->
<script>
  jQuery('.card__content').clamp();
  jQuery(window).on('resize', Superclamp.reclampAll);
</script>