Page Header Feature - 3 Columns

Design System Navigation

Page Header Feature - 3 Columns Complete

  • 
    
      <header class="c-page-header c-page-header__feature c-page-header__3-col">
        <div class="c-page-header__content">
                              <div class="c-media-block c-block c-block__column c-media-block__column">
              <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/400/1100/?random" media="(min-width: 1100px)">
                                <source srcset="//picsum.photos/200/800/?random" media="(min-width: 700px)">
                  <!--[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 u-color--white">
          <div class="u-spacing c-block__group c-media-block__group u-flex--justify-center u-overlay--dark">
            <div class="u-width--100p u-spacing">
                                    <h3 class="c-media-block__title c-block__title u-font--primary--xl u-flex--justify-center ">
                                  <em class='u-theme--color--lighter'>Sermon</em> Seeking Another Way
                                </h3>
                                </div>
            <div class="c-media-block__meta c-block__meta hide">
                                </div>
                  </div>
        </div>
        <!-- c-media-block__content -->
      </div>
      <!-- c-media-block -->
                        <div class="c-media-block c-block c-block__column c-media-block__column">
              <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/400/1100/?gravity" media="(min-width: 1100px)">
                                <source srcset="//picsum.photos/200/800/?gravity" media="(min-width: 700px)">
                  <!--[if IE 9]></video><![endif]-->
                  <img itemprop="image" srcset="//picsum.photos/500/375/?gravity" alt="Alt Text">
                </picture>
                      </div>
          </div>
          <!-- c-media-block__image -->
            <div class="c-media-block__content c-block__content u-spacing u-color--white">
          <div class="u-spacing c-block__group c-media-block__group u-flex--justify-center u-overlay--dark">
            <div class="u-width--100p u-spacing">
                                    <h3 class="c-media-block__title c-block__title u-font--primary--xl u-flex--justify-center ">
                                  <em class='u-theme--color--lighter'>Blog</em> Son Rise Over the Land of the Rising Sun: My Eyewitness Account
                                </h3>
                                </div>
            <div class="c-media-block__meta c-block__meta hide">
                                </div>
                  </div>
        </div>
        <!-- c-media-block__content -->
      </div>
      <!-- c-media-block -->
                        <div class="c-media-block c-block c-block__column c-media-block__column">
              <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/400/1100/?nature" media="(min-width: 1100px)">
                                <source srcset="//picsum.photos/200/800/?nature" media="(min-width: 700px)">
                  <!--[if IE 9]></video><![endif]-->
                  <img itemprop="image" srcset="//picsum.photos/500/375/?nature" alt="Alt Text">
                </picture>
                      </div>
          </div>
          <!-- c-media-block__image -->
            <div class="c-media-block__content c-block__content u-spacing u-color--white">
          <div class="u-spacing c-block__group c-media-block__group u-flex--justify-center u-overlay--dark">
            <div class="u-width--100p u-spacing">
                                    <h3 class="c-media-block__title c-block__title u-font--primary--xl u-flex--justify-center ">
                                  <em class='u-theme--color--lighter'>Event</em> Religious Liberty – The Freedom to Beleive
                                </h3>
                                </div>
            <div class="c-media-block__meta c-block__meta hide">
                                </div>
                  </div>
        </div>
        <!-- c-media-block__content -->
      </div>
      <!-- c-media-block -->
                      </div>
          </header>
      <!-- /.c-page-header -->
    
    
    {% if page_header %}
      <header class="c-page-header c-page-header__feature{% if page_header_blocks %}{{ ' c-page-header__3-col' }}{% endif %}{% if page_header.scroll %}{{ ' has-scroll' }}{% endif %}">
        <div class="c-page-header__content">
          {% if page_header_blocks %}
            {% for block in page_header_blocks %}
              {% include '@molecules/blocks/media-block.twig' with block %}
            {% endfor %}
          {% else %}
            {% include '@molecules/blocks/media-block.twig' %}
          {% endif %}
        </div>
        {% if page_header.scroll %}
          <a href="#top" class="c-page-header__scroll"></a>
        {% endif %}
      </header>
      <!-- /.c-page-header -->
    {% endif %}