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 perferendis mollitia praesentium voluptas dolorum deserunt ut ipsum aliquid. Quia error ab qui et et. Cumque veniam necessitatibus. Sed velit neque sed quo cumque numquam perferendis perspiciatis provident. Sed cumque delectus alias. Repellat recusandae et adipisci assumenda culpa quia iusto.
        </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>