Woodlands.co.uk Component Library

Cards: With Video

Cards

Various cards styles. Cards include a title and media object. Optionally, include a “banner”.

The “Woodland” card includes location information.

<div class="card ">
    <div class="media">
        <div class="media__content">
            <iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5&#x3D;1"></iframe>
        </div>
    </div>

    <div class="card__body">
        <h3 class="card__title">Card With Video</h3>
        <div class="card__content">
            Qui culpa provident aut non aliquid explicabo ex asperiores omnis. Quod ipsum quo modi deserunt ipsam velit magni laudantium. Quos aut laborum temporibus eveniet sint eaque eum. Aliquam laborum vel qui ut tempore eveniet quis neque. Excepturi porro a quo nulla magni aut.
        </div>
    </div>
</div>
 
<div class="{{modifier 'card' card.modifiers}} {{ card.classes }}">
  {{ render '@media--video' card merge=true}}
  <div class="card__body">
    <h3 class="card__title">{{ titlecase card.title }}</h3>
    {{#if card.meta}}
    <p class="card__meta">{{ card.meta }}</p>
    {{/if}}
    <div class="card__content">
      {{ card.text }}
    </div>
  </div>
  {{#if card.banner}}
  <div class="card__banner">
    {{ card.banner }}
  </div>
  {{/if}}
  {{#if card.sold}}
  <div class="card__banner card__banner--sold">
    Sold
  </div>
  {{/if}}
</div>