<!-- Default -->
<div class="mediaItem">
    <div class="mediaItem_img" aria-hidden="true" style="background-image: url('../../assets/bridge-676-504.jpg');"></div>

    <div class="mediaItem_content">
        <p class="u-c-theme u-fw-bold u-push-btm-4 u-tt-caps u-fs-sm u-ls-1">
            04.01.1984
        </p>

        <h3 class="mediaItem_title">
            <a href="#">
        Lorem ipsum
      </a>
        </h3>

        <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>
</div>

<!-- Inverted Elements -->
<div class="mediaItem mediaItem-alternating">
    <div class="mediaItem_img" aria-hidden="true" style="background-image: url('../../assets/bridge-676-504.jpg');"></div>

    <div class="mediaItem_content">
        <p class="u-c-theme u-fw-bold u-push-btm-4 u-tt-caps u-fs-sm u-ls-1">
            04.01.1984
        </p>

        <h3 class="mediaItem_title">
            <a href="#">
        Lorem ipsum
      </a>
        </h3>

        <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>
</div>

<!-- Only Text -->
<div class="mediaItem">

    <div class="mediaItem_content mediaItem_content-full">
        <p class="u-c-theme u-fw-bold u-push-btm-4 u-tt-caps u-fs-sm u-ls-1">
            04.01.1984
        </p>

        <h3 class="mediaItem_title">
            <a href="#">
        Lorem ipsum
      </a>
        </h3>

        <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>
</div>

<div class="mediaItem{{#if position }} mediaItem-{{ position }}{{/if}}">
  {{#if img }}
    <div class="mediaItem_img" aria-hidden="true" style="background-image: url('{{ path img }}');"></div>
  {{/if}}

  <div class="mediaItem_content{{#unless img}} mediaItem_content-full{{/unless}}">
    <p class="u-c-theme u-fw-bold u-push-btm-4 u-tt-caps u-fs-sm u-ls-1">
      {{ date }}
    </p>

    <h3 class="mediaItem_title">
      <a href="{{ url }}">
        {{label}}
      </a>
    </h3>

    <div class="typography">
      {{{ htmlText }}}
    </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",
  "img": "/assets/bridge-676-504.jpg",
  "date": "04.01.1984"
}

/* Inverted Elements */
{
  "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",
  "img": "/assets/bridge-676-504.jpg",
  "date": "04.01.1984",
  "position": "alternating"
}

/* Only Text */
{
  "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",
  "img": null,
  "date": "04.01.1984"
}

There are no notes for this item.