<section class="Training-header">
    <div class="constrain">
        <div class="Training-header__content grid grid--v-gap-l grid--8/4">
            <div class="flow--m">
                <header class="flow">
                    <h1 class="Training-header__header h h-1">
                        Page title
                    </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 hasMetadata = content.metadata is defined and content.metadata %}

{% set hasPricing = pricing is defined %}

<section class="Training-header">
  <div class="constrain">
    <div class="Training-header__content grid grid--v-gap-l grid--8/4">
      <div class="flow--m">
        {% if hasTitle %}
          <header class="flow">
            <h1 class="Training-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 hasStandfirst %}
          <div class="body wysiwyg--with-lead flow {{ content.standfirst.colour|default( 'text-grey' ) }}">
            {{ content.standfirst.text|raw }}
          </div>
        {% endif %}

        {# Meta goes here #}
        {% if hasMetadata %}
          <dl class="Training-header__metadata dl">
            {% for item in content.metadata %}
              <div>
                <dt class="dt">{{ item.label }}</dt>
                <dd class="dd">{{ item.value }}</dd>
              </div>
            {% endfor %}
          </dl>
        {% endif %}
      </div>

      {# Card goes here #}
      {% if hasPricing %}
        {{ include(
          '@training-pricing-card',
          {
            eyebrow: pricing.eyebrow is defined and pricing.eyebrow != null ? pricing.eyebrow,
            price: pricing.price is defined and pricing.price != null ? pricing.price,
            moustache: pricing.moustache is defined and pricing.moustache != null ? pricing.moustache,
            text: pricing.text is defined and pricing.text != null ? pricing.text,
            cta_text: pricing.cta_text is defined and pricing.cta_text != null ? pricing.cta_text,
          }
        ) }}
      {% endif %}
    </div>
  </div>
</section>
{
  "title": {
    "text": "Page title"
  }
}
  • Content:
    .Training-header {
      &__header {
        display: flex;
        flex-direction: column;
      }
    
      &__subtitle {
        color: var(--grey);
      }
    
      &__metadata {
        border-block: 1px solid var(--light-grey);
        column-gap: var(--space-l);
        display: flex;
        flex-wrap: wrap;
        padding-block: var(--space-s);
        row-gap: var(--space-s);
      }
    }
    
  • URL: /components/raw/training-header/training-header.css
  • Filesystem Path: src/templates/components/training-header/training-header.css
  • Size: 335 Bytes

No notes defined.