City of Ghent Style Guide

Heading

When to use this component

Headings create structure. They provide a quick way to scan the main sections of a website.

How it works

  • Use only one heading 1 (h1) per page.
  • Don’t skip headings: e.g. do not jump from H1 to H3.
  • Headings of the same weight should never directly follow one another.
  • At least one paragraph of content should follow each heading.
  • Use sentence case for headings.
  • Headings have no closing punctuation, with the exception of question marks for questions.
  • Don’t use links in page headings.

Variants

There a few style variants for headings:

  • Overview title: Style variant that is used above an overview as the page title. This variant is always styled as a heading 1 (h1). Examples of its usage can be found in the overview layout and the filter layout.
  • Collection title: Style variant that can be used above a collection of teasers. This variant is always styled as a heading 2 (h2).

Simply add the title class on any heading element (according SEO guidelines) to apply this style. It isn’t required to use these classes on the default heading element provided.

Web accessibility

  • Headings should be visually and syntactically connected to their content.

Heading: Overview Title 

{% if type == "overview-title" %}
  <{{ heading|default('h1') }} class="overview-title"><span class="overview-title-colon">{{ heading_text }}<span class="colon" aria-hidden="true"></span></span></{{ heading|default('h1') }}>
{% elseif type == "collection-title" %}
  <{{ heading|default('h2') }} class="collection-title"><span>{{ heading_text }}</span></{{ heading|default('h2') }}>
{% else %}
  <{{ type }}>{{ heading_text }}</{{ type }}>
{% endif %}
 
<h1 class="overview-title"><span class="overview-title-colon">Overview title lorem ipsum dolor set lorem ipsum dolor set<span class="colon" aria-hidden="true"></span></span></h1>
 
{
  "heading": "h1",
  "heading_text": "Overview title lorem ipsum dolor set lorem ipsum dolor set",
  "type": "overview-title"
}
  • Content: 
    h1,
.h1,
%h1,
h2,
.h2,
%h2,
h3,
.h3,
%h3,
h4,
.h4,
%h4,
h5,
.h5,
%h5 {
  @include bold-text;

  margin: 0 0 .8rem;
  font-style: normal;
  line-height: 1.5;

  button {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    cursor: pointer;

    i {
      font-size: inherit;
    }
  }
}
  • URL: /components/raw/heading/_heading.scss
  • Filesystem Path: components/21-atoms/heading/_heading.scss
  • Size: 410 Bytes