V6 Clearleft Patterns

Page Header: With Standfirst 

<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">
                        Page title
                    </h1>

                </header>

                <div class="flow--m">

                    <div class="body wysiwyg--with-lead flow text-grey">
                        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
                    </div>
                </div>

            </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"
  },
  "content": {
    "standfirst": {
      "text": "<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo.</p>"
    }
  }
}
  • 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.