<section class="Page-header">
    <div class="constrain">
        <div class="Page-header__content grid grid--v-gap-l grid--10/2">
            <div class="flow--m">
                <header class="flow">
                    <h1 class="Page-header__header h h-1">
                        <span>Line one.</span>
                        <span>Line two.</span>
                        <span>Line three.</span>
                    </h1>

                </header>

            </div>

        </div>
    </div>
</section>
{% set hasTitleLines = title.lines is defined and (title.lines|length) %}
{% set hasTitleText = title.text is defined and title.text %}
{% set hasMoustache = title.moustache is defined and title.moustache %}
{% set hasTitleClass = title.class is defined and title.class %}
{% set hasTitle = hasTitleLines or hasTitleText or hasMoustache %}

{% set hasStandfirst = content.standfirst is defined and content.standfirst %}
{% set hasSubtitle = content.subtitle is defined and content.subtitle %}
{% set hasContent = hasStandfirst or hasSubtitle %}

{% set hasCta = cta is defined and cta.text and (cta.link or cta.teamContact) %}
{% set hasBorder = border is defined and border %}
{% set hasBrush = brush is defined and brush %}
{% set hasMenu = menu is defined and menu %}

<section class="Page-header{{ hasBorder ? ' Page-header--border-b' : '' }}{{ hasBrush ? ' Page-header--brush' }}">
  <div class="constrain">
    <div class="Page-header__content grid grid--v-gap-l grid--10/2">
      <div class="flow--m">
        {% if hasTitle %}
          <header class="flow">
            <h1 class="Page-header__header h {{ hasTitleClass ? title.class : 'h-1' }}">
              {% if hasTitleLines %}
                {% for line in title.lines %}
                  <span>{{ line }}</span>
                {% endfor %}
              {% elseif hasTitleText %}
                {{ title.text }}
              {% endif %}
            </h1>

            {% if hasMoustache %}
              {% if title.moustache is iterable %}
                <p class="eyebrow eyebrow--meta text-grey-step-1">
                  {% for item in title.moustache %}
                    {% if item != null %}
                      <span>{{ item|raw }}</span>
                    {% endif %}
                  {% endfor %}
                </p>
              {% else %}
                <p class="eyebrow text-grey-step-1">
                  {{ title.moustache|raw }}
                </p>
              {% endif %}
            {% endif %}
          </header>
        {% endif %}

        {% if hasContent %}
          <div class="flow--m">
            {% if hasSubtitle %}
              <h2 class="Page-header__subtitle h h-4">
                {{ content.subtitle }}
              </h2>
            {% endif %}

            {% if hasStandfirst %}
              <div class="body wysiwyg--with-lead flow {{ content.standfirst.colour|default( 'text-grey' ) }}">
                {{ content.standfirst.text|raw }}
              </div>
            {% endif %}
          </div>
        {% endif %}

        {% if hasCta %}
          {% if cta.teamContact is defined and cta.teamContact %}
            {% include '@team-contact' with cta.teamContact|merge({
              title: cta.text
            }) %}
          {% else %}
            {% if cta.style is defined and cta.style == 'combo-button' %}
              {% include '@combo-button' with {
                text: cta.text,
                link: cta.link,
                theme: cta.theme
              } %}
            {% else %}
              {% include '@twi' with {
                icon: 'arrow-right',
                text: cta.text,
                link: cta.link
              } %}
            {% endif %}
          {% endif %}
        {% endif %}
      </div>

      {% if hasMenu %}{{ menu|raw }}{% endif %}
    </div>
  </div>
</section>
{
  "title": {
    "text": "Page title",
    "lines": [
      "Line one.",
      "Line two.",
      "Line three."
    ]
  }
}
  • Content:
    .Page-header {
      &__header {
        display: flex;
        flex-direction: column;
      }
    
      &__subtitle {
        color: var(--grey);
      }
    
      &--border-b {
        padding-bottom: 0;
      }
    
      &--border-b &__content {
        padding-bottom: var(--space-m-l);
        border-bottom: 1px solid var(--light-grey-step--1);
      }
    
      &--brush {
        position: relative;
        margin-bottom: 68px;
      }
      &--brush::after {
        background: url( '../img/brush-end.svg' ),
                    linear-gradient( 180deg, var(--dark), var(--dark) 99%, var(--white) 99% );
        background-position: bottom left;
        background-repeat: no-repeat;
        background-size: cover;
        bottom: 0;
        content: '';
        height: 68px;
        pointer-events: none;
        position: absolute;
        top: 100%;
        width: 100%;
      }
    }
    
    @media screen and (min-width: 50rem) {
      .Page-header {
        &--brush {
          margin-bottom: 126px;
        }
        &--brush::after {
          background-position: bottom;
          height: 88px;
          top: calc( 100% + 38px );
        }
      }
    }
    
  • URL: /components/raw/page-header/page-header.css
  • Filesystem Path: src/templates/components/page-header/page-header.css
  • Size: 985 Bytes

No notes defined.