City of Ghent Style Guide

Content header

The content header displays the page title in a specific way for different content types.

When to use this component

Use the content header when the following conditions apply:

  • The web page is
    • a generic info page
    • a news/event page
    • a form page
    • a theme page
    • a topic overview page

When these conditions apply, the content header can be used.

If used, the content header should always be placed just below the general header.

When not to use this component

Do not use the content header when the above conditions don’t apply.

Do not use the content header on other places then the page title.

Components

The content header is a combination of one or more of the following 4 components:

  1. Readspeaker (optional)
  2. Page title
  3. Page summary text (optional)
  4. Image (optional)

Technical usage

  • This organism must be used as the first item within the content container.
  • Some succeeding elements are influenced by the content header and may partly overlap with the content header. E.g. the event summary box.
  • To influence the display behaviour of the header, the following header classes can be used:
    • primary: Set the primary theme color as background.
    • dark-background: Makes content light colored for dark backgrounds (use in combination with primary).
    • secondary: Set the secondary theme color as background.
    • accolade-title: Use the accolade layout.
    • breakout: When the accolade title has to break out of the box (use in combination with accolade-title without any other header elements).
    • overlap: Adjust the bottom padding to create space for overlapping elements.
{% if image %}
{% set modifier = modifier ~ ' image' %}
{% endif %}

<div class="content-header-container {{ modifier }}">
  <div class="left">
    {% if speech_button %}
      {% include '@text-to-speech-button' %}
    {% endif %}

    {% include '@heading' with {
      'heading': 'h1',
      'heading_text': heading_text
    } %}

    {% if date %}
      {% include '@pubdate' %}
    {% endif %}

    {% if summary %}
      <div class="summary-text">
        {% include '@paragraph' with {
          'text': summary_text
        } %}
      </div>
    {% endif %}

    {% if popular_topics %}
      {% include '@heading' with {
        'heading': 'h4',
        'heading_text': 'Most searched topics'
      } %}
      {% include '@tag-list' with {
        tags: [
          {text: 'It is', type: 'tag'},
          {text: 'summer outside', type: 'tag'},
          {text: 'and we all', type: 'tag'},
          {text: 'enjoy', type: 'tag'},
          {text: 'the sun', type: 'tag'}
        ]
      } %}
    {% endif %}
  </div>

  {% if image %}
    <div class="right">
      {# Image generated with https://placeholderimage.dev #}
      {% include '@image' with {
        'modifier': '',
        'src': 'data:image/png;base64,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IkCAAAECgtUcIECAAAECiQKCNRFTUwQIECBAQLCaAwQIECBAIFFAsCZiaooAAQIECAhWc4AAAQIECCQKCNZETE0RIECAAAHBag4QIECAAIFEAcGaiKkpAgQIECAgWM0BAgQIECCQKCBYEzE1RYAAAQIEBKs5QIAAAQIEEgUEayKmpggQIECAgGA1BwgQIECAQKKAYE3E1BQBAgQIEBCs5gABAgQIEEgUEKyJmJoiQIAAAQKC1RwgQIAAAQKJAoI1EVNTBAgQIEBAsJoDBAgQIEAgUUCwJmJqigABAgQICFZzgAABAgQIJAoI1kRMTREgQIAAAcFqDhAgQIAAgUQBwZqIqSkCBAgQICBYzQECBAgQIJAoIFgTMTVFgAABAgQEqzlAgAABAgQSBQRrIqamCBAgQICAYDUHCBAgQIBAooBgTcTUFAECBAgQEKzmAAECBAgQSBQQrImYmiJAgAABAoLVHCBAgAABAokCgjURU1MECBAgQECwmgMECBAgQCBRQLAmYmqKAAECBAgIVnOAAAECBAgkCgjWRExNESBAgAABwWoOECBAgACBRAHBmoipKQIECBAgIFjNAQIECBAgkCggWBMxNUWAAAECBASrOUCAAAECBBIFBGsipqYIECBAgIBgNQcIECBAgECigGBNxNQUAQIECBAQrOYAAQIECBBIFBCsiZiaIkCAAAECgtUcIECAAAECiQKCNRFTUwQIECBAQLCaAwQIECBAIFFAsCZiaooAAQIECAhWc4AAAQIECCQKCNZETE0RIECAAAHBag4QIECAAIFEAcGaiKkpAgQIECAgWM0BAgQIECCQKCBYEzE1RYAAAQIEBKs5QIAAAQIEEgUEayKmpggQIECAgGA1BwgQIECAQKKAYE3E1BQBAgQIEBCs5sBjL/CWt7zl9OpXv/rG4de//vXpF7/4xWNvAuA6Ak8++eTpVa961c3Ofvazn51++9vfXmfH9nKnAoL1Tnmv3/hLXvKS0ytf+cqbHf/rX/+6CYprb8973vNOr3/96292+8wzz5x++ctfnv773/9euxuH9vfCF77w9NGPfvTBa3/wgx/c2uyd73zn6fnPf/5NW3//+99PP/rRjw714RovetGLXnR66Utfenrxi198es5znnP6xz/+cdPHP/7xjzc1qrzFfHrXu971oIu/+93vbl2j7HE+8cQTp/ibC9uY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',
        'alt_text': 'Header image',
        'caption': 'This is the image caption.',
        'ratio': null
      } %}
    </div>
  {% endif %}
</div>
<div class="content-header-container secondary image">
    <div class="left">
        <button class="readspeaker-button">
            <i class="icon-readspeaker" aria-hidden="true"></i><span>Listen</span>
        </button>

        <h1>This is the title of the page</h1>

        <div class="summary-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit ipsum sed gravida posuere. Maecenas sit amet sapien aliquam, semper elit in, sodales massa.</p>
        </div>

    </div>

    <div class="right">

        <figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdYAAAHWCAYAAADKGqhaAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3QWT5EiSBtCcZWaeZWb8//9gaZZhlpmZYc68btWmjhZlpVeW+/ST2dndTWeGIp5H5ZeSQsonPvvZzz5zshEgQIAAAQIpAk8I1hRHjRAgQIAAgRsBwWoiECBAgACBRAHBmoipKQIECBAgIFjNAQIECBAgkCggWBMxNUWAAAECBASrOUCAAAECBBIFBGsipqYIECBAgIBgNQcIECBAgECigGBNxNQUAQIECBAQrOYAAQIECBBIFBCsiZiaIkCAAAECgtUcIECAAAECiQKCNRFTUwQIECBAQLCaAwQIECBAIFFAsCZiaooAAQIECAhWc4AAAQIECCQKCNZETE0RIECAAAHBag4QIECAAIFEAcGaiKkpAgQIECAgWM0BAgQIECCQKCBYEzE1RYAAAQIEBKs5QIAAAQIEEgUEayKmpggQIECAgGA1BwgQIECAQKKAYE3E1BQBAgQIEBCs5gABAgQIEEgUEKyJmJoiQIAAAQKC1RwgQIAAAQKJAoI1EVNTBAgQIEBAsJoDBAgQIEAgUUCwJmJqigABAgQICFZzgAABAgQIJAoI1kRMTREgQIAAAcFqDhAgQIAAgUQBwZqIqSkCBAgQICBYzQECBAgQIJAoIFgTMTVFgAABAgQEqzlAgAABAgQSBQRrIqamCBAgQICAYDUHCBAgQIBAooBgTcTUFAECBAgQEKzmAAECBAgQSBQQrImYmiJAgAABAoLVHCBAgAABAokCgjURU1MECBAgQECwmgMECBAgQCBRQLAmYmqKAAECBAgIVnOAAAECBAgkCgjWRExNESBAgAABwWoOECBAgACBRAHBmoipKQIECBAgIFjNAQIECBAgkCggWBMxNUWAAAECBASrOUCAAAECBBIFBGsipqYIECBAgIBgNQcIECBAgECigGBNxNQUAQIECBAQrOYAAQIECBBIFBCsiZiaIkCAAAECgtUcIECAAAECiQKCNRFTUwQIECBAQLCaAwQIECBAIFFAsCZiaooAAQIECAhWc4AAAQIECCQKCNZETE0RIECAAAHBag4QIECAAIFEAcGaiKkpAgQIECAgWM0BAgQIECCQKCBYEzE1RYAAAQIEBKs5QIAAAQIEEgUEayKmpggQIECAgGA1BwgQIECAQKKAYE3E1BQBAgQIEBCs5gABAgQIEEgUEKyJmJoiQIAAAQKC1RwgQIAAAQKJAoI1EVNTBAgQIEBAsJoDBAgQIEAgUUCwJmJqigABAgQICFZzgAABAgQIJAoI1kRMTREgQIAAAcFqDhAgQIAAgUQBwZqIqSkCBAgQICBYzQECBAgQIJAoIFgTMTVFgAABAgQEqzlAgAABAgQSBQRrIqamCBAgQICAYDUHCBAgQIBAooBgTcTUFAECBAgQEKzmAAECBAgQSBQQrImYmiJAgAABAoLVHCBAgAABAokCgjURU1MECBAgQECwmgMECBAgQCBRQLAmYmqKAAECBAgIVnOAAAECBAgkCgjWRExNESBAgAABwWoOECBAgACBRAHBmoipKQIECBAgIFjNAQIECBAgkCggWBMxNUWAAAECBASrOUCAAAECBBIFBGsipqYIECBAgIBgNQcIECBAgECigGBNxNQUAQIECBAQrOYAAQIECBBIFBCsiZiaIkCAAAECgtUcIECAAAECiQKCNRFTUwQIECBAQLCaAwQIECBAIFFAsCZiaooAAQIECAhWc4AAAQIECCQKCNZETE0RIECAAAHBag4QIECAAIFEAcGaiKkpAgQIECAgWM0BAgQIECCQKCBYEzE1RYAAAQIEBKs5QIAAAQIEEgUEayKmpggQIECAgGA1BwgQIECAQKKAYE3E1BQBAgQIEBCs5gABAgQIEEgUEKyJmJoiQIAAAQKC1RwgQIAAAQKJAoI1EVNTBAgQIEBAsJoDBAgQIEAgUUCwJmJqigABAgQICFZzgAABAgQIJAoI1kRMTREgQIAAAcFqDhAgQIAAgUQBwZqIqSkCBAgQICBYzQECBAgQIJAoIFgTMTVFgAABAgQEqzlAgAABAgQSBQRrIqamCBAgQICAYDUHCBAgQIBAooBgTcTUFAECBAgQEKzmAAECBAgQSBQQrImYmiJAgAABAoLVHCBAgAABAokCgjURU1MECBAgQECwmgMECBAgQCBRQLAmYmqKAAECBAgIVnOAAAECBAgkCgjWRExNESBAgAABwWoOECBAgACBRAHBmoipKQIECBAgIFjNAQIECBAgkCggWBMxNUWAAAECBASrOUCAAAECBBIFBGsipqYIECBAgIBgNQcIECBAgECigGBNxNQUAQIECBAQrOYAAQIECBBIFBCsiZiaIkCAAAECgtUcIECAAAECiQKCNRFTUwQIECBAQLCaAwQIECBAIFFAsCZiaooAAQIECAhWc4AAAQIECCQKCNZETE0RIECAAAHBag4QIECAAIFEAcGaiKkpAgQIECAgWM0BAgQIECCQKCBYEzE1RYAAAQIEBKs5QIAAAQIEEgUEayKmpggQIECAgGA1BwgQIECAQKKAYE3E1BQBAgQIEBCs5gABAgQIEEgUEKyJmJoiQIAAAQKC1RwgQIAAAQKJAoI1EVNTBAgQIEBAsJoDBAgQIEAgUUCwJmJqigABAgQICFZzgAABAgQIJAoI1kRMTREgQIAAAcFqDhAgQIAAgUQBwZqIqSkCBAgQICBYzQECBAgQIJAoIFgTMTVFgAABAgQEqzlAgAABAgQSBQRrIqamCBAgQICAYDUHCBAgQIBAooBgTcTUFAECBAgQEKzmAAECBAgQSBQQrImYmiJAgAABAoLVHCBAgAABAokCgjURU1MECBAgQECwmgMECBAgQCBRQLAmYmqKAAECBAgIVnOAAAECBAgkCgjWRExNESBAgAABwWoOECBAgACBRAHBmoipKQIECBAgIFjNAQIECBAgkCggWBMxNUWAAAECBASrOUCAAAECBBIFBGsipqYIECBAgIBgNQcIECBAgECigGBNxNQUAQIECBAQrOYAAQIECBBIFBCsiZiaIkCAAAECgtUcIECAAAECiQKCNRFTUwQIECBAQLCaAwQIECBAIFFAsCZiaooAAQIECAhWc4AAAQIECCQKCNZETE0RIECAAAHBag4QIECAAIFEAcGaiKkpAgQIECAgWM0BAgQIECCQKCBYEzE1RYAAAQIEBKs5QIAAAQIEEgUEayKmpggQIECAgGA1BwgQIECAQKKAYE3E1BQBAgQIEBCs5sBjL/CWt7zl9OpXv/rG4de//vXpF7/4xWNvAuA6Ak8++eTpVa961c3Ofvazn51++9vfXmfH9nKnAoL1Tnmv3/hLXvKS0ytf+cqbHf/rX/+6CYprb8973vNOr3/96292+8wzz5x++ctfnv773/9euxuH9vfCF77w9NGPfvTBa3/wgx/c2uyd73zn6fnPf/5NW3//+99PP/rRjw714RovetGLXnR66Utfenrxi198es5znnP6xz/+cdPHP/7xjzc1qrzFfHrXu971oIu/+93vbl2j7HE+8cQTp/ibC9uY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" alt="Header image" />
            <figcaption>This is the image caption.</figcaption>
        </figure>
    </div>
</div>
{
  "modifier": "secondary",
  "heading_text": "This is the title of the page",
  "speech_button": true,
  "summary": true,
  "summary_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit ipsum sed gravida posuere. Maecenas sit amet sapien aliquam, semper elit in, sodales massa.",
  "popular_topics": false,
  "image": true,
  "date": false,
  "event_summary": true
}
  • Content:
    .content-header-container {
      @include theme('background-color', 'color-primary', 'content-header-container-background-primary');
    
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 60px;
      padding: 60px 20px;
    
      @include tablet {
        margin-bottom: 45px;
        padding: 90px 20px;
      }
    
      h1 {
        max-width: none;
      }
    
      &.image {
        margin-bottom: calc(100vw - 85px);
        padding-bottom: 120px;
    
        @include tablet {
          flex-direction: row;
          margin-bottom: 80px;
          padding-top: 80px;
          padding-bottom: 80px;
        }
    
        @include desktop {
          margin-bottom: 145px;
        }
    
        &:not(.overlap) {
          margin-bottom: calc(100vw - 85px);
    
          @include tablet {
            margin-bottom: 190px;
          }
        }
      }
    
      &.overlap {
        padding-top: 60px;
        padding-bottom: 120px;
    
        @include tablet {
          flex-direction: row;
          padding-top: 80px;
          padding-bottom: 105px;
        }
    
        &.image {
          @include tablet {
            margin-bottom: 165px;
            padding-bottom: 90px;
          }
        }
      }
    
      &.secondary {
        @include theme('background-color', 'color-secondary', 'content-header-container-background-secondary');
      }
    
      &.accolade-title {
        @include theme('background-color', 'color-tertiary-light', 'content-header-accolade-container-background');
    
        h1 {
          @include accolade('bottom', 'left', 100px, 36px, 'color-none', 'color-primary');
          @include theme('background-color', 'color-primary', 'content-header-accolade-text-background');
    
          display: inline;
          padding: 5px 15px;
          color: color('white');
          line-height: 130%;
          box-decoration-break: clone;
        }
    
        &.breakout {
          padding-bottom: 45px;
    
          @include tablet {
            padding-bottom: 55px;
          }
    
          .left {
            position: absolute;
            bottom: 3px;
          }
    
          h1 {
            bottom: 0;
          }
        }
      }
    
      &:not(.image) {
        .left {
          padding-right: 0;
        }
      }
    
      .left {
        flex-basis: auto;
        max-width: $bp-max-content;
    
        @include tablet {
          padding-right: 60px;
        }
    
        h1 {
          margin: 0;
        }
    
        h4 {
          margin: 60px 0 20px;
        }
    
        .summary-text {
          margin: 30px 0 0;
    
          p {
            @include large-text();
            line-height: 177.778%;
          }
    
          p:last-of-type {
            margin-bottom: 0;
          }
        }
    
        time + .summary-text {
          margin: 10px 0 0;
        }
    
        .tag-list-wrapper {
          margin: 20px 0 0;
    
          li,
          a {
            width: 100%;
    
            @include phablet {
              width: auto;
            }
          }
        }
      }
    
      .right {
        flex: auto;
        align-self: flex-end;
        width: 100%;
        height: auto;
    
        @include tablet {
          flex: 0 0 calc(47vw - 180px);
          width: auto;
          height: calc(47vw - 80px - 290px);
          text-align: right;
        }
    
        @media only screen and (min-width: 1400px) {
          flex: 0 0 470px;
          height: calc(470px - 190px);
        }
    
        figure {
          display: block;
          position: absolute;
          bottom: 0;
          width: 100%;
          padding-right: 40px;
          transform: translate(0, calc(100% - 90px));
    
          @include tablet {
            position: static;
            max-width: 31.5rem;
            padding: 0;
            transform: none;
          }
    
          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
    
  • URL: /components/raw/content-header/_content-header.scss
  • Filesystem Path: components/41-organisms/content-header/_content-header.scss
  • Size: 3.4 KB