<!-- Default -->
<div class="mediaBlock u-bg-theme">
    <a class="mediaBlock_figure" href="#">
        <div class="embed embed-4:3">
            <img class="embed_media-img" src="../../assets/bridge-4-3.jpg" alt="">
        </div>
    </a>

    <div class="mediaBlock_body">

        <h2 class="mediaBlock_title">
            <a href="#">
        Lorem ipsum
      </a>
        </h2>

        <div class="typography">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
        </div>

        <div class="mediaBlock_actions">
            <p class="mediaBlock_action">
                <a class="actionLink actionLink-alt" href="#">
  <span>Lorem ipsum</span>
</a>

            </p>
        </div>
    </div>
</div>

<!-- Links -->
<div class="mediaBlock u-bg-theme">
    <div class="mediaBlock_figure">
        <div class="embed embed-4:3">
            <img class="embed_media-img" src="../../assets/bridge-4-3.jpg" alt="">
        </div>
    </div>

    <div class="mediaBlock_body">
        <h2 class="mediaBlock_title">
            Lorem ipsum
        </h2>

        <div class="typography-inverse">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
        </div>

        <div class="mediaBlock_actions">
            <p class="mediaBlock_action">
                <a class="actionLink actionLink-alt" href="#">
  <span>Lorem ipsum</span>
</a>

            </p>
            <p class="mediaBlock_action">
                <a class="actionLink actionLink-alt" href="#">
  <span>Lorem ipsum</span>
</a>

            </p>
        </div>
    </div>
</div>

<!-- Video -->
<div class="mediaBlock u-bg-theme">
    <div class="mediaBlock_figure mediaBlock_figure-video">
        <div class="embed embed-4:3">
            <div class="embed embed-4:3">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/roS6oFjCDhc" frameborder="0" allowfullscreen></iframe>
            </div>

        </div>
    </div>

    <div class="mediaBlock_body">

        <h2 class="mediaBlock_title">
            <a href="#">
        Lorem ipsum
      </a>
        </h2>

        <div class="typography">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
        </div>

        <div class="mediaBlock_actions">

            <p class="mediaBlock_action">
                <a class="actionLink actionLink-alt" href="#">
  <span>Lorem ipsum</span>
</a>

            </p>
        </div>
    </div>
</div>

<!-- Default -->
<div class="mediaBlock u-bg-theme">
  <a class="mediaBlock_figure" href="{{url}}">
    <div class="embed embed-4:3">
      <img class="embed_media-img" src="{{ path img }}" alt="">
    </div>
  </a>

  <div class="mediaBlock_body">

    <h2 class="mediaBlock_title">
      <a href="{{url}}">
        {{label}}
      </a>
    </h2>

    <div class="typography">
      {{{htmlText}}}
    </div>

    <div class="mediaBlock_actions">
      <p class="mediaBlock_action">
        {{render '@action-link--alt' }}
      </p>
    </div>
  </div>
</div>

<!-- Links -->
<div class="mediaBlock u-bg-theme">
  <div class="mediaBlock_figure">
    <div class="embed embed-4:3">
      <img class="embed_media-img" src="{{ path img }}" alt="">
    </div>
  </div>

  <div class="mediaBlock_body">
    <h2 class="mediaBlock_title">
      {{ label }}
    </h2>

    <div class="typography-inverse">
      {{{ htmlText }}}
    </div>

    <div class="mediaBlock_actions">
      {{#each links}}
        <p class="mediaBlock_action">
          {{render '@action-link--alt' }}
        </p>
      {{/each}}
    </div>
  </div>
</div>

<!-- Video -->
<div class="mediaBlock u-bg-theme">
  <div class="mediaBlock_figure mediaBlock_figure-video">
    <div class="embed embed-4:3">
      {{render '@embed--4:3' }}
    </div>
  </div>

  <div class="mediaBlock_body">

    <h2 class="mediaBlock_title">
      <a href="{{url}}">
        {{label}}
      </a>
    </h2>

    <div class="typography">
      {{{htmlText}}}
    </div>

    <div class="mediaBlock_actions">

      <p class="mediaBlock_action">
        {{render '@action-link--alt' }}
      </p>
    </div>
  </div>
</div>
/* Default */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "id": "1",
  "img": "/assets/bridge-4-3.jpg",
  "links": [
    {
      "name": "first link"
    },
    {
      "name": "fourth link"
    }
  ]
}

/* Links */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "id": "1",
  "img": "/assets/bridge-4-3.jpg",
  "links": [
    {
      "name": "first link"
    },
    {
      "name": "fourth link"
    }
  ]
}

/* Video */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "id": "1",
  "img": "/assets/bridge-4-3.jpg",
  "links": [
    {
      "name": "first link"
    },
    {
      "name": "fourth link"
    }
  ]
}

There are no notes for this item.