Media Block

Design System Navigation

Media Block Complete

A block to display an image or video alongside text.

Default
Inline
Inset
Reversed
Stacked 
  • 

      <div class="c-media-block c-block c-media-block__row c-block__row">
          <div
        class="c-media-block__image c-block__image ">
        <div class="c-block__image-wrap ">
                      <img src="//picsum.photos/600/375/?random" itemprop="image" alt="Media Block Image Alt"/>
                  </div>
      </div>
      <!-- c-media-block__image -->
        <div class="c-media-block__content c-block__content u-spacing u-color--gray">
      <div class="u-spacing c-block__group c-media-block__group ">
        <div class="u-width--100p u-spacing">
                                <h3 class="c-media-block__title c-block__title u-theme--color--darker ">
                              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
                                Adventist leaders call for international cooperation to end abuse of refugees in Libya
                                </a>
                          </h3>
                                <p class="c-media-block__description c-block__description">Mauris sit amet augue gravida, dignissim sem maximus, aliquam metus. Maecenas eu consectetur orci, id auctor dui.</p>
                  </div>
        <div class="c-media-block__meta c-block__meta u-theme--color--dark">
                      <span class="c-block__category u-text-transform--upper">Culture</span>
                                <time class="c-block__date u-text-transform--upper" datetime="2018-12-28">December 28, 2018</time>
                  </div>
              </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
    

    

    {% if media_block_default %}
  <div class="c-media-block c-block {{ media_block_default.block_class }}">
    {% if media_block_default.img or media_block_default.picture %}
      <div
        class="c-media-block__image c-block__image {{ media_block_default.block_img_class }}{% if media_block_default.block_type %} c-block__icon c-block__icon--{{ media_block_default.block_type }}{% endif %}{% if media_block_default.background_image %} o-background-image u-background--cover{% endif %}">
        <div class="c-block__image-wrap {{ media_block_default.block_img_wrap_class }}">
          {% if media_block_default.background_image %}
            <style type="text/css">
              .o-background-image {
                background-image: url({{ media_block_default.picture.img.src_s | raw }});
              }
              @media(min-width: {{ media_block_default.picture.img_break_m }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.img.src_m | raw }});
                }
              }
              @media(min-width: {{ media_block_default.picture.has_break_l.img_break_l }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.has_break_l.img.src_l | raw }});
                }
              }
              @media(min-width: {{ media_block_default.picture.has_break_xl.img_break_xl }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.has_break_xl.img.src_xl | raw }});
                }
              }
            </style>
          {% elseif media_block_default.picture %}
            <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
              {% if media_block_default.picture.has_break_xl %}
                <source srcset="{{ media_block_default.picture.has_break_xl.img.src_xl }}" media="(min-width: {{ media_block_default.picture.has_break_xl.img_break_xl }}px)">
              {% endif %}
              {% if media_block_default.picture.has_break_l %}
                <source srcset="{{ media_block_default.picture.has_break_l.img.src_l }}" media="(min-width: {{ media_block_default.picture.has_break_l.img_break_l }}px)">
              {% endif %}
              <source srcset="{{ media_block_default.picture.img.src_m }}" media="(min-width: {{ media_block_default.picture.img_break_m }}px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="{{ media_block_default.picture.img.src_s }}" alt="{{ media_block_default.picture.img.alt }}">
            </picture>
          {% elseif media_block_default.img %}
            <img src="{{ media_block_default.img.src }}" itemprop="image" alt="{{ media_block_default.img.alt }}"/>
          {% endif %}
        </div>
      </div>
      <!-- c-media-block__image -->
    {% endif %}
    <div class="c-media-block__content c-block__content u-spacing {{ media_block_default.block_content_class }}">
      <div class="u-spacing c-block__group c-media-block__group {{ media_block_default.block_group_class }}">
        <div class="u-width--100p u-spacing">
          {% if media_block_default.kicker %}
            <h4 class="c-media-block__kicker c-block__kicker u-space--quarter--bottom {{ media_block_default.block_kicker_class }}">{{ media_block_default.kicker }}</h4>
          {% endif %}
          {% if media_block_default.title %}
            <h3 class="c-media-block__title c-block__title {{ media_block_default.block_title_class }} {% if media_block_default.kicker %}{{ 'u-space--zero'}}{% endif %}">
              {% if media_block_default.url %}
                <a href="{{ media_block_default.url }}" class="c-block__title-link u-theme--link-hover--dark">
                {% endif %}
                {{ media_block_default.title | raw }}
                {% if media_block_default.url %}
                </a>
              {% endif %}
            </h3>
          {% endif %}
          {% if media_block_default.description %}
            <p class="c-media-block__description c-block__description">{{ media_block_default.description }}</p>
          {% endif %}
        </div>
        <div class="c-media-block__meta c-block__meta {{ media_block_default.block_meta_class }}">
          {% if media_block_default.category %}
            <span class="c-block__category u-text-transform--upper">{{ media_block_default.category }}</span>
          {% endif %}
          {% if media_block_default.date %}
            <time class="c-block__date u-text-transform--upper" datetime="{{ media_block_default.datetime }}">{{ media_block_default.date }}</time>
          {% endif %}
        </div>
        {% if media_block_default.cta %}
          <a href="" class="c-block__button o-button o-button--outline">{{ media_block_default.cta }}
            <span class="u-icon u-icon--m u-path-fill--base u-space--half--left">{% include '@atoms/icons/icon-arrow-long-right.twig' %}</span></a>
        {% endif %}
      </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
{% endif %}
    

  • 

      <div class="c-media-block c-block c-block__inline c-media-block__inine c-block--reversed c-media-block--reversed l-grid--7-col">
          <div
        class="c-media-block__image c-block__image l-grid-item u-padding--zero--sides">
        <div class="c-block__image-wrap ">
                      <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
                                            <source srcset="//picsum.photos/900/700/?random" media="(min-width: 900px)">
                            <source srcset="//picsum.photos/700/600/?random" media="(min-width: 500px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="//picsum.photos/500/375/?random" alt="Alt Text">
            </picture>
                  </div>
      </div>
      <!-- c-media-block__image -->
        <div class="c-media-block__content c-block__content u-spacing l-grid-item u-border-left--black--at-large u-theme--border-color--darker--left u-color--gray u-background-color--gray--light u-padding--top u-padding--bottom">
      <div class="u-spacing c-block__group c-media-block__group ">
        <div class="u-width--100p u-spacing">
                                <h3 class="c-media-block__title c-block__title u-theme--color--darker ">
                              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
                                Nulla finibus ligula ut nisl facilisis
                                </a>
                          </h3>
                                <p class="c-media-block__description c-block__description">Curabitur non est vulputate, euismod nibh non, sollicitudin nisi. Morbi ullamcorper purus et massa mattis fermentum. Aenean pretium augue sit amet nunc consequat vulputate.</p>
                  </div>
        <div class="c-media-block__meta c-block__meta u-theme--color--dark">
                      <span class="c-block__category u-text-transform--upper">Culture</span>
                                <time class="c-block__date u-text-transform--upper" datetime="2017-12-28">December 28, 2017</time>
                  </div>
              </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
    

    

    {% if media_block_default %}
  <div class="c-media-block c-block {{ media_block_default.block_class }}">
    {% if media_block_default.img or media_block_default.picture %}
      <div
        class="c-media-block__image c-block__image {{ media_block_default.block_img_class }}{% if media_block_default.block_type %} c-block__icon c-block__icon--{{ media_block_default.block_type }}{% endif %}{% if media_block_default.background_image %} o-background-image u-background--cover{% endif %}">
        <div class="c-block__image-wrap {{ media_block_default.block_img_wrap_class }}">
          {% if media_block_default.background_image %}
            <style type="text/css">
              .o-background-image {
                background-image: url({{ media_block_default.picture.img.src_s | raw }});
              }
              @media(min-width: {{ media_block_default.picture.img_break_m }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.img.src_m | raw }});
                }
              }
              @media(min-width: {{ media_block_default.picture.has_break_l.img_break_l }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.has_break_l.img.src_l | raw }});
                }
              }
              @media(min-width: {{ media_block_default.picture.has_break_xl.img_break_xl }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.has_break_xl.img.src_xl | raw }});
                }
              }
            </style>
          {% elseif media_block_default.picture %}
            <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
              {% if media_block_default.picture.has_break_xl %}
                <source srcset="{{ media_block_default.picture.has_break_xl.img.src_xl }}" media="(min-width: {{ media_block_default.picture.has_break_xl.img_break_xl }}px)">
              {% endif %}
              {% if media_block_default.picture.has_break_l %}
                <source srcset="{{ media_block_default.picture.has_break_l.img.src_l }}" media="(min-width: {{ media_block_default.picture.has_break_l.img_break_l }}px)">
              {% endif %}
              <source srcset="{{ media_block_default.picture.img.src_m }}" media="(min-width: {{ media_block_default.picture.img_break_m }}px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="{{ media_block_default.picture.img.src_s }}" alt="{{ media_block_default.picture.img.alt }}">
            </picture>
          {% elseif media_block_default.img %}
            <img src="{{ media_block_default.img.src }}" itemprop="image" alt="{{ media_block_default.img.alt }}"/>
          {% endif %}
        </div>
      </div>
      <!-- c-media-block__image -->
    {% endif %}
    <div class="c-media-block__content c-block__content u-spacing {{ media_block_default.block_content_class }}">
      <div class="u-spacing c-block__group c-media-block__group {{ media_block_default.block_group_class }}">
        <div class="u-width--100p u-spacing">
          {% if media_block_default.kicker %}
            <h4 class="c-media-block__kicker c-block__kicker u-space--quarter--bottom {{ media_block_default.block_kicker_class }}">{{ media_block_default.kicker }}</h4>
          {% endif %}
          {% if media_block_default.title %}
            <h3 class="c-media-block__title c-block__title {{ media_block_default.block_title_class }} {% if media_block_default.kicker %}{{ 'u-space--zero'}}{% endif %}">
              {% if media_block_default.url %}
                <a href="{{ media_block_default.url }}" class="c-block__title-link u-theme--link-hover--dark">
                {% endif %}
                {{ media_block_default.title | raw }}
                {% if media_block_default.url %}
                </a>
              {% endif %}
            </h3>
          {% endif %}
          {% if media_block_default.description %}
            <p class="c-media-block__description c-block__description">{{ media_block_default.description }}</p>
          {% endif %}
        </div>
        <div class="c-media-block__meta c-block__meta {{ media_block_default.block_meta_class }}">
          {% if media_block_default.category %}
            <span class="c-block__category u-text-transform--upper">{{ media_block_default.category }}</span>
          {% endif %}
          {% if media_block_default.date %}
            <time class="c-block__date u-text-transform--upper" datetime="{{ media_block_default.datetime }}">{{ media_block_default.date }}</time>
          {% endif %}
        </div>
        {% if media_block_default.cta %}
          <a href="" class="c-block__button o-button o-button--outline">{{ media_block_default.cta }}
            <span class="u-icon u-icon--m u-path-fill--base u-space--half--left">{% include '@atoms/icons/icon-arrow-long-right.twig' %}</span></a>
        {% endif %}
      </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
{% endif %}
    

  • 

      <div class="c-media-block c-block c-block__inset c-media-block__inset">
          <div
        class="c-media-block__image c-block__image ">
        <div class="c-block__image-wrap ">
                      <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
                              <source srcset="//picsum.photos/1440/550" media="(min-width: 1000px)">
                                            <source srcset="//picsum.photos/1000/550" media="(min-width: 800px)">
                            <source srcset="//picsum.photos/800/450" media="(min-width: 500px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="//picsum.photos/500/375" alt="Alt Text">
            </picture>
                  </div>
      </div>
      <!-- c-media-block__image -->
        <div class="c-media-block__content c-block__content u-spacing l-grid--7-col u-theme--background-color--darker">
      <div class="u-spacing c-block__group c-media-block__group ">
        <div class="u-width--100p u-spacing">
                                <h3 class="c-media-block__title c-block__title l-grid-item l-grid-item--m--4-col u-link-hover--white ">
                              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
                                Adventist leaders call for international cooperation to end abuse of refugees in Libya
                                </a>
                          </h3>
                            </div>
        <div class="c-media-block__meta c-block__meta l-grid-item l-grid-item--m--2-col">
                                <time class="c-block__date u-text-transform--upper" datetime="2018-12-28">December 28, 2018</time>
                  </div>
              </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
    

    

    {% if media_block_default %}
  <div class="c-media-block c-block {{ media_block_default.block_class }}">
    {% if media_block_default.img or media_block_default.picture %}
      <div
        class="c-media-block__image c-block__image {{ media_block_default.block_img_class }}{% if media_block_default.block_type %} c-block__icon c-block__icon--{{ media_block_default.block_type }}{% endif %}{% if media_block_default.background_image %} o-background-image u-background--cover{% endif %}">
        <div class="c-block__image-wrap {{ media_block_default.block_img_wrap_class }}">
          {% if media_block_default.background_image %}
            <style type="text/css">
              .o-background-image {
                background-image: url({{ media_block_default.picture.img.src_s | raw }});
              }
              @media(min-width: {{ media_block_default.picture.img_break_m }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.img.src_m | raw }});
                }
              }
              @media(min-width: {{ media_block_default.picture.has_break_l.img_break_l }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.has_break_l.img.src_l | raw }});
                }
              }
              @media(min-width: {{ media_block_default.picture.has_break_xl.img_break_xl }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.has_break_xl.img.src_xl | raw }});
                }
              }
            </style>
          {% elseif media_block_default.picture %}
            <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
              {% if media_block_default.picture.has_break_xl %}
                <source srcset="{{ media_block_default.picture.has_break_xl.img.src_xl }}" media="(min-width: {{ media_block_default.picture.has_break_xl.img_break_xl }}px)">
              {% endif %}
              {% if media_block_default.picture.has_break_l %}
                <source srcset="{{ media_block_default.picture.has_break_l.img.src_l }}" media="(min-width: {{ media_block_default.picture.has_break_l.img_break_l }}px)">
              {% endif %}
              <source srcset="{{ media_block_default.picture.img.src_m }}" media="(min-width: {{ media_block_default.picture.img_break_m }}px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="{{ media_block_default.picture.img.src_s }}" alt="{{ media_block_default.picture.img.alt }}">
            </picture>
          {% elseif media_block_default.img %}
            <img src="{{ media_block_default.img.src }}" itemprop="image" alt="{{ media_block_default.img.alt }}"/>
          {% endif %}
        </div>
      </div>
      <!-- c-media-block__image -->
    {% endif %}
    <div class="c-media-block__content c-block__content u-spacing {{ media_block_default.block_content_class }}">
      <div class="u-spacing c-block__group c-media-block__group {{ media_block_default.block_group_class }}">
        <div class="u-width--100p u-spacing">
          {% if media_block_default.kicker %}
            <h4 class="c-media-block__kicker c-block__kicker u-space--quarter--bottom {{ media_block_default.block_kicker_class }}">{{ media_block_default.kicker }}</h4>
          {% endif %}
          {% if media_block_default.title %}
            <h3 class="c-media-block__title c-block__title {{ media_block_default.block_title_class }} {% if media_block_default.kicker %}{{ 'u-space--zero'}}{% endif %}">
              {% if media_block_default.url %}
                <a href="{{ media_block_default.url }}" class="c-block__title-link u-theme--link-hover--dark">
                {% endif %}
                {{ media_block_default.title | raw }}
                {% if media_block_default.url %}
                </a>
              {% endif %}
            </h3>
          {% endif %}
          {% if media_block_default.description %}
            <p class="c-media-block__description c-block__description">{{ media_block_default.description }}</p>
          {% endif %}
        </div>
        <div class="c-media-block__meta c-block__meta {{ media_block_default.block_meta_class }}">
          {% if media_block_default.category %}
            <span class="c-block__category u-text-transform--upper">{{ media_block_default.category }}</span>
          {% endif %}
          {% if media_block_default.date %}
            <time class="c-block__date u-text-transform--upper" datetime="{{ media_block_default.datetime }}">{{ media_block_default.date }}</time>
          {% endif %}
        </div>
        {% if media_block_default.cta %}
          <a href="" class="c-block__button o-button o-button--outline">{{ media_block_default.cta }}
            <span class="u-icon u-icon--m u-path-fill--base u-space--half--left">{% include '@atoms/icons/icon-arrow-long-right.twig' %}</span></a>
        {% endif %}
      </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
{% endif %}
    

  • 

      <div class="c-media-block c-block c-block--reversed c-media-block--reversed l-grid--7-col">
          <div
        class="c-media-block__image c-block__image l-grid-item l-grid-item--m--3-col">
        <div class="c-block__image-wrap ">
                      <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
                                          <source srcset="//picsum.photos/800/450" media="(min-width: 500px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="//picsum.photos/600/330" alt="Alt Text">
            </picture>
                  </div>
      </div>
      <!-- c-media-block__image -->
        <div class="c-media-block__content c-block__content u-spacing l-grid-item l-grid-item--m--4-col u-border-left--black--at-large">
      <div class="u-spacing c-block__group c-media-block__group ">
        <div class="u-width--100p u-spacing">
                                <h3 class="c-media-block__title c-block__title u-theme--color--darker ">
                              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
                                Adventist leaders call for international cooperation to end abuse of refugees in Libya
                                </a>
                          </h3>
                                <p class="c-media-block__description c-block__description">Mauris sit amet augue gravida, dignissim sem maximus, aliquam metus. Maecenas eu consectetur orci, id auctor dui.</p>
                  </div>
        <div class="c-media-block__meta c-block__meta u-theme--color--dark">
                      <span class="c-block__category u-text-transform--upper">Culture</span>
                                <time class="c-block__date u-text-transform--upper" datetime="2018-12-28">December 28, 2018</time>
                  </div>
              </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
    

    

    {% if media_block_default %}
  <div class="c-media-block c-block {{ media_block_default.block_class }}">
    {% if media_block_default.img or media_block_default.picture %}
      <div
        class="c-media-block__image c-block__image {{ media_block_default.block_img_class }}{% if media_block_default.block_type %} c-block__icon c-block__icon--{{ media_block_default.block_type }}{% endif %}{% if media_block_default.background_image %} o-background-image u-background--cover{% endif %}">
        <div class="c-block__image-wrap {{ media_block_default.block_img_wrap_class }}">
          {% if media_block_default.background_image %}
            <style type="text/css">
              .o-background-image {
                background-image: url({{ media_block_default.picture.img.src_s | raw }});
              }
              @media(min-width: {{ media_block_default.picture.img_break_m }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.img.src_m | raw }});
                }
              }
              @media(min-width: {{ media_block_default.picture.has_break_l.img_break_l }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.has_break_l.img.src_l | raw }});
                }
              }
              @media(min-width: {{ media_block_default.picture.has_break_xl.img_break_xl }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.has_break_xl.img.src_xl | raw }});
                }
              }
            </style>
          {% elseif media_block_default.picture %}
            <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
              {% if media_block_default.picture.has_break_xl %}
                <source srcset="{{ media_block_default.picture.has_break_xl.img.src_xl }}" media="(min-width: {{ media_block_default.picture.has_break_xl.img_break_xl }}px)">
              {% endif %}
              {% if media_block_default.picture.has_break_l %}
                <source srcset="{{ media_block_default.picture.has_break_l.img.src_l }}" media="(min-width: {{ media_block_default.picture.has_break_l.img_break_l }}px)">
              {% endif %}
              <source srcset="{{ media_block_default.picture.img.src_m }}" media="(min-width: {{ media_block_default.picture.img_break_m }}px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="{{ media_block_default.picture.img.src_s }}" alt="{{ media_block_default.picture.img.alt }}">
            </picture>
          {% elseif media_block_default.img %}
            <img src="{{ media_block_default.img.src }}" itemprop="image" alt="{{ media_block_default.img.alt }}"/>
          {% endif %}
        </div>
      </div>
      <!-- c-media-block__image -->
    {% endif %}
    <div class="c-media-block__content c-block__content u-spacing {{ media_block_default.block_content_class }}">
      <div class="u-spacing c-block__group c-media-block__group {{ media_block_default.block_group_class }}">
        <div class="u-width--100p u-spacing">
          {% if media_block_default.kicker %}
            <h4 class="c-media-block__kicker c-block__kicker u-space--quarter--bottom {{ media_block_default.block_kicker_class }}">{{ media_block_default.kicker }}</h4>
          {% endif %}
          {% if media_block_default.title %}
            <h3 class="c-media-block__title c-block__title {{ media_block_default.block_title_class }} {% if media_block_default.kicker %}{{ 'u-space--zero'}}{% endif %}">
              {% if media_block_default.url %}
                <a href="{{ media_block_default.url }}" class="c-block__title-link u-theme--link-hover--dark">
                {% endif %}
                {{ media_block_default.title | raw }}
                {% if media_block_default.url %}
                </a>
              {% endif %}
            </h3>
          {% endif %}
          {% if media_block_default.description %}
            <p class="c-media-block__description c-block__description">{{ media_block_default.description }}</p>
          {% endif %}
        </div>
        <div class="c-media-block__meta c-block__meta {{ media_block_default.block_meta_class }}">
          {% if media_block_default.category %}
            <span class="c-block__category u-text-transform--upper">{{ media_block_default.category }}</span>
          {% endif %}
          {% if media_block_default.date %}
            <time class="c-block__date u-text-transform--upper" datetime="{{ media_block_default.datetime }}">{{ media_block_default.date }}</time>
          {% endif %}
        </div>
        {% if media_block_default.cta %}
          <a href="" class="c-block__button o-button o-button--outline">{{ media_block_default.cta }}
            <span class="u-icon u-icon--m u-path-fill--base u-space--half--left">{% include '@atoms/icons/icon-arrow-long-right.twig' %}</span></a>
        {% endif %}
      </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
{% endif %}
    

  • 

      <div class="c-media-block c-block c-block__stacked c-media-block__stacked">
          <div
        class="c-media-block__image c-block__image ">
        <div class="c-block__image-wrap ">
                      <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
                              <source srcset="//picsum.photos/1440/500" media="(min-width: 1000px)">
                                            <source srcset="//picsum.photos/1000/550" media="(min-width: 800px)">
                            <source srcset="//picsum.photos/800/450" media="(min-width: 500px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="//picsum.photos/600/330" alt="Alt Text">
            </picture>
                  </div>
      </div>
      <!-- c-media-block__image -->
        <div class="c-media-block__content c-block__content u-spacing u-color--gray">
      <div class="u-spacing c-block__group c-media-block__group ">
        <div class="u-width--100p u-spacing">
                                <h3 class="c-media-block__title c-block__title u-theme--color--darker ">
                              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
                                Adventist leaders call for international cooperation to end abuse of refugees in Libya
                                </a>
                          </h3>
                                <p class="c-media-block__description c-block__description">Mauris sit amet augue gravida, dignissim sem maximus, aliquam metus. Maecenas eu consectetur orci, id auctor dui.</p>
                  </div>
        <div class="c-media-block__meta c-block__meta u-theme--color--dark">
                      <span class="c-block__category u-text-transform--upper">Culture</span>
                                <time class="c-block__date u-text-transform--upper" datetime="2018-12-28">December 28, 2018</time>
                  </div>
              </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
    

    

    {% if media_block_default %}
  <div class="c-media-block c-block {{ media_block_default.block_class }}">
    {% if media_block_default.img or media_block_default.picture %}
      <div
        class="c-media-block__image c-block__image {{ media_block_default.block_img_class }}{% if media_block_default.block_type %} c-block__icon c-block__icon--{{ media_block_default.block_type }}{% endif %}{% if media_block_default.background_image %} o-background-image u-background--cover{% endif %}">
        <div class="c-block__image-wrap {{ media_block_default.block_img_wrap_class }}">
          {% if media_block_default.background_image %}
            <style type="text/css">
              .o-background-image {
                background-image: url({{ media_block_default.picture.img.src_s | raw }});
              }
              @media(min-width: {{ media_block_default.picture.img_break_m }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.img.src_m | raw }});
                }
              }
              @media(min-width: {{ media_block_default.picture.has_break_l.img_break_l }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.has_break_l.img.src_l | raw }});
                }
              }
              @media(min-width: {{ media_block_default.picture.has_break_xl.img_break_xl }}) {
                .o-background-image {
                  background-image: url({{ media_block_default.picture.has_break_xl.img.src_xl | raw }});
                }
              }
            </style>
          {% elseif media_block_default.picture %}
            <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
              {% if media_block_default.picture.has_break_xl %}
                <source srcset="{{ media_block_default.picture.has_break_xl.img.src_xl }}" media="(min-width: {{ media_block_default.picture.has_break_xl.img_break_xl }}px)">
              {% endif %}
              {% if media_block_default.picture.has_break_l %}
                <source srcset="{{ media_block_default.picture.has_break_l.img.src_l }}" media="(min-width: {{ media_block_default.picture.has_break_l.img_break_l }}px)">
              {% endif %}
              <source srcset="{{ media_block_default.picture.img.src_m }}" media="(min-width: {{ media_block_default.picture.img_break_m }}px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="{{ media_block_default.picture.img.src_s }}" alt="{{ media_block_default.picture.img.alt }}">
            </picture>
          {% elseif media_block_default.img %}
            <img src="{{ media_block_default.img.src }}" itemprop="image" alt="{{ media_block_default.img.alt }}"/>
          {% endif %}
        </div>
      </div>
      <!-- c-media-block__image -->
    {% endif %}
    <div class="c-media-block__content c-block__content u-spacing {{ media_block_default.block_content_class }}">
      <div class="u-spacing c-block__group c-media-block__group {{ media_block_default.block_group_class }}">
        <div class="u-width--100p u-spacing">
          {% if media_block_default.kicker %}
            <h4 class="c-media-block__kicker c-block__kicker u-space--quarter--bottom {{ media_block_default.block_kicker_class }}">{{ media_block_default.kicker }}</h4>
          {% endif %}
          {% if media_block_default.title %}
            <h3 class="c-media-block__title c-block__title {{ media_block_default.block_title_class }} {% if media_block_default.kicker %}{{ 'u-space--zero'}}{% endif %}">
              {% if media_block_default.url %}
                <a href="{{ media_block_default.url }}" class="c-block__title-link u-theme--link-hover--dark">
                {% endif %}
                {{ media_block_default.title | raw }}
                {% if media_block_default.url %}
                </a>
              {% endif %}
            </h3>
          {% endif %}
          {% if media_block_default.description %}
            <p class="c-media-block__description c-block__description">{{ media_block_default.description }}</p>
          {% endif %}
        </div>
        <div class="c-media-block__meta c-block__meta {{ media_block_default.block_meta_class }}">
          {% if media_block_default.category %}
            <span class="c-block__category u-text-transform--upper">{{ media_block_default.category }}</span>
          {% endif %}
          {% if media_block_default.date %}
            <time class="c-block__date u-text-transform--upper" datetime="{{ media_block_default.datetime }}">{{ media_block_default.date }}</time>
          {% endif %}
        </div>
        {% if media_block_default.cta %}
          <a href="" class="c-block__button o-button o-button--outline">{{ media_block_default.cta }}
            <span class="u-icon u-icon--m u-path-fill--base u-space--half--left">{% include '@atoms/icons/icon-arrow-long-right.twig' %}</span></a>
        {% endif %}
      </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
{% endif %}

Fine print

  • Last updated: