University of Leeds Design System v1.0.15

Page Heading: With Category

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 heading with categories and dates</span>

    </h1>

    <dl class="page-heading__meta">

        <div class="page-heading__meta__group">
            <dt class="page-heading__meta__term">Category</dt>

            <dd class="page-heading__meta__data">

                <a class="page-heading__meta__data__link" href="/category/environment">

                    Environment

                </a>

            </dd>

            <dd class="page-heading__meta__data">

                <a class="page-heading__meta__data__link" href="/category/local-community">

                    Local community

                </a>

            </dd>

        </div>

    </dl>

</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 heading with categories and dates",
    "meta": [
      {
        "name": "Category",
        "values": [
          {
            "label": "Environment",
            "url": "/category/environment"
          },
          {
            "label": "Local community",
            "url": "/category/local-community"
          }
        ]
      }
    ]
  }
}