Page Header Feature - Longform

Design System Navigation

Page Header Feature - Longform Complete

  • 
    
      <header class="c-page-header c-page-header__feature">
        <div class="c-page-header__content">
                    <div class="c-media-block c-block c-block__inline c-media-block__inine l-grid--7-col l-grid-wrap u-theme--background-color--darker can-be--dark-dark u-padding--top u-padding--bottom">
            <div class="c-media-block__content c-block__content u-spacing u-shift--left--1-col--at-large l-grid-item l-grid-item--m--6-col l-grid-item--l--4-col l-grid-item--xl--3-col u-border--left u-theme--border-color--light--left u-theme--color--lighter">
          <div class="u-spacing c-block__group c-media-block__group ">
            <div class="u-width--100p u-spacing">
                          <h4 class="c-media-block__kicker c-block__kicker u-space--quarter--bottom ">This Sabbath</h4>
                                    <h3 class="c-media-block__title c-block__title u-color--white u-font--primary--l u-space--zero">
                                  <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">Church leaders pray for the two titles during Euro-Asia Division year-end meetings.</p>
                      </div>
            <div class="c-media-block__meta c-block__meta ">
                          <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 -->
              </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 %}