Page Heading

Options (WIP)

Name Type Description
page_heading.title string Required The page title. Rendered as H1
page_heading.title string Required The page title. Rendered as H1
page_heading.meta array Array of meta items. Can be used for categories, dates or any other relevant page data
page_heading.meta.name string Required Used as a definition term for the meta item(s). Normally visually hidden but available to screen readers.
page_heading.meta.values array Required Array of objects for each meta value.
page_heading.meta.values.label string Required Normally used as the text output unless the meta value is of type date-time or has a url value.
<header class="page-heading">

  <h1 class="page-heading__title">
    <span class="page-heading__title__main">{{ page_heading.title }}</span>
    
    {% if page_heading.position %}
      <span class="page-heading__title--position">{{ page_heading.position }}</span>
    {% endif %}
  
    {% if page_heading.sub_heading.title %}
      <span class="page-heading__title page-heading__title--subtitle">{{ page_heading.sub_heading.title }}</span>
    {% endif %}
    
  </h1>
  

  {% render '@uol-in-page-nav', { items: page_heading.in_page_nav } %}

  {% if page_heading.meta.length %}
    <dl class="page-heading__meta">
      {% for meta in page_heading.meta %}
        <div class="page-heading__meta__group">
          <dt class="page-heading__meta__term">{{ meta.name }}</dt>
          {% for value in meta.values %}
            <dd class="page-heading__meta__data">
              {% if value.url %}
                <a class="page-heading__meta__data__link" href="{{ value.url}}">
                {% endif %}

                {% if value.type == 'date-time' %}
                  <time datetime="{{ value.datetime }}">
                  {{ value.datetime | date('D MMMM YYYY') }}
                  </time>
                {% else %}
                    {{ value.label }}
                {% endif %}

                {% if value.url %}
                </a>
              {% endif %}
            </dd>
          {% endfor %}
        </div>
      {% endfor %}
    </dl>
  {% endif %}
</header>
<header class="page-heading">

    <h1 class="page-heading__title">
        <span class="page-heading__title__main">Page title</span>

    </h1>

</header>
  • Content:
    .page-heading {
      margin-bottom: $spacing-6;
    
      @include media(">=uol-media-m") {
        margin-bottom: $spacing-7;
      }
    
      .uol-article--profile & {
        margin-bottom: 0;
      }
    }
    
    .page-heading__title__main {
      @extend .uol-typography-heading-1;
    
      position: relative;
      margin: 24px 0 0;
    
      @include media(">=uol-media-m") {
        margin: 40px 0 0;
      }
    
      @include media(">=uol-media-l") {
        margin: 48px 0 0;
      }
    
      @include media(">=uol-media-xl") {
        margin: 48px 0 0;
      }
    }
    
      .page-heading__title {
        @extend .uol-typography-heading-1;
    
        position: relative;
        margin: 24px 0 0;
    
        @include media(">=uol-media-m") {
          margin: 40px 0 0;
        }
    
        @include media(">=uol-media-l") {
          margin: 48px 0 0;
        }
    
        @include media(">=uol-media-xl") {
          margin: 48px 0 0;
        }
    
        &::before {
          content: "";
          position: absolute;
          display: inline-block;
          top: -16px;
          left: 0;
          width: $spacing-5;
          height: $spacing-2;
          background-color: $color-brand;
    
          @include media(">=uol-media-m") {
            top: -24px;
            width: $spacing-6;
          }
    
          @include media(">=uol-media-l") {
            top: -24px;
            width: $spacing-6;
          }
    
          @include media(">=uol-media-xl") {
            top: -24px;
          }
        }
    
        &.page-heading__title--subtitle {
          @extend %text-size-heading-2;
          @extend %uol-font-serif;
    
          display: block;
          padding-top: $spacing-2;
          font-weight: $font-weight-bold--serif;
    
          &::before {
            content: none;
          }
        }
    
        
      }
    
      .page-heading__title--position {
        @extend %text-size-heading-4;
        @extend %uol-font-serif;
    
        margin-top: $spacing-2;
        display: block;
        font-weight: $font-weight-bold--serif;
        color: $color-brand;
      }
    
      .page-heading__meta {
        @extend .uol-typography-paragraph-small;
    
        margin-top: $spacing-2;
        margin-bottom: 0;
    
        @include media(">=uol-media-m") {
          margin-top: $spacing-4;
        }
        
      }
    
        .page-heading__meta__group {
          margin-bottom: $spacing-1;
        }
    
        .page-heading__meta__term {
          @extend .hide-accessible;
        }
    
        .page-heading__meta__data {
          display: inline-block;
          margin: 0;
          color: $color-font--x-light;
          font-variant-numeric: lining-nums;
    
          .uol-article--profile &,
          .uol-article--person-insight &,
          .uol-article--blog & {
            @extend %text-size-heading-4;
            @extend %uol-font-serif;
    
            font-weight: $font-weight-bold--serif;
            color: $color-brand;
          }
        }
    
          .page-heading__meta__data__link {
            color: $color-brand;
    
            &::after {
              content: ",";
              position: relative;
              left: -0.3em;
            }
    
            .page-heading__meta__data:last-of-type & {
              &::after {
                content: none;
              }
            }
          }
    
  • URL: /components/raw/uol-page-heading/_page-heading.scss
  • Filesystem Path: src/library/02-components/page-heading/_page-heading.scss
  • Size: 2.8 KB
{
  "page_heading": {
    "title": "Page title"
  }
}