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).
  • Background Primary / None: Style variant with background in primary color or none (white).

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 

{% if type == "overview-title" %}
  <{{ heading|default('h1') }} class="overview-title{% if heading_class %} {{ heading_class }}{% endif %}">{{ heading_text }}</{{ heading|default('h1') }}>
{% elseif type == "bg-primary" %}
  <{{ heading|default('h1') }} class="bg-primary{% if heading_class %} {{ heading_class }}{% endif %}"><span>{{ heading_text }}</span></{{ heading|default('h1') }}>
{% elseif type == "bg-none" %}
  <{{ heading|default('h1') }} class="bg-none{% if heading_class %} {{ heading_class }}{% endif %}"><span>{{ heading_text }}</span></{{ heading|default('h1') }}>
{% else %}
  <{{ heading }}{% if heading_class %} class="{{ heading_class }}"{% endif %}>{{ heading_text }}</{{ heading }}>
{% endif %}
 
<!-- Heading 1 -->
<h1>Heading 1</h1>


<!-- Heading 2 -->
<h2>Heading 2</h2>


<!-- Heading 3 -->
<h3>Heading 3</h3>


<!-- Heading 4 -->
<h4>Heading 4</h4>


<!-- Overview Title -->
<h1 class="overview-title">Heading without background H1 desktop</h1>


<!-- Heading 1 Background Primary -->
<h1 class="bg-primary"><span>Heading with background H1 desktop</span></h1>


<!-- Heading 2 Background Primary -->
<h2 class="bg-primary"><span>Heading with background H2 desktop</span></h2>


<!-- Heading 3 Background Primary -->
<h3 class="bg-primary"><span>Heading with background H3 desktop</span></h3>


<!-- Heading 4 Background Primary -->
<h4 class="bg-primary"><span>Heading with background H4 desktop</span></h4>


<!-- Heading 1 Background None -->
<h1 class="bg-none"><span>Heading with background H1 desktop</span></h1>


<!-- Heading 2 Background None -->
<h2 class="bg-none"><span>Heading with background H2 desktop</span></h2>


<!-- Heading 3 Background None -->
<h3 class="bg-none"><span>Heading with background H3 desktop</span></h3>


<!-- Heading 4 Background None -->
<h4 class="bg-none"><span>Heading with background H4 desktop</span></h4>


/* Heading 1 */
{
  "heading_text": "Heading 1",
  "heading": "h1"
}


/* Heading 2 */
{
  "heading_text": "Heading 2",
  "heading": "h2"
}


/* Heading 3 */
{
  "heading_text": "Heading 3",
  "heading": "h3"
}


/* Heading 4 */
{
  "heading_text": "Heading 4",
  "heading": "h4"
}


/* Overview Title */
{
  "heading": "h1",
  "heading_text": "Heading without background H1 desktop",
  "type": "overview-title"
}


/* Heading 1 Background Primary */
{
  "heading": "h1",
  "heading_text": "Heading with background H1 desktop",
  "type": "bg-primary"
}


/* Heading 2 Background Primary */
{
  "heading": "h2",
  "heading_text": "Heading with background H2 desktop",
  "type": "bg-primary"
}


/* Heading 3 Background Primary */
{
  "heading": "h3",
  "heading_text": "Heading with background H3 desktop",
  "type": "bg-primary"
}


/* Heading 4 Background Primary */
{
  "heading": "h4",
  "heading_text": "Heading with background H4 desktop",
  "type": "bg-primary"
}


/* Heading 1 Background None */
{
  "heading": "h1",
  "heading_text": "Heading with background H1 desktop",
  "type": "bg-none"
}


/* Heading 2 Background None */
{
  "heading": "h2",
  "heading_text": "Heading with background H2 desktop",
  "type": "bg-none"
}


/* Heading 3 Background None */
{
  "heading": "h3",
  "heading_text": "Heading with background H3 desktop",
  "type": "bg-none"
}


/* Heading 4 Background None */
{
  "heading": "h4",
  "heading_text": "Heading with background H4 desktop",
  "type": "bg-none"
}
  • Content: 
    h1,
.h1,
%h1,
h2,
.h2,
%h2,
h3,
.h3,
%h3,
h4,
.h4,
%h4,
h5,
.h5,
%h5 {
  @include bold-text;

  margin-top: 40px;
  font-style: normal;

  &:first-child {
    margin-top: 0;
  }

  // If the heading is preceded by any empty first-child element, strip its top
  // margin.
  *:first-child:empty + & {
    margin-top: 0;
  }

  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;
    }
  }
}

h1,
.h1,
%h1 {
  margin-bottom: 20px;

  & + h2,
  & + .h2 {
    margin-top: 0;
  }
}

h2,
.h2,
%h2 {
  margin-bottom: 15px;

  @include mobile {
    margin-bottom: 20px;
  }

  & + h3,
  & + .h3 {
    margin-top: 0;
  }
}

h3,
.h3,
%h3 {
  margin-bottom: 15px;

  & + h4,
  & + .h4 {
    margin-top: 0;
  }
}

h4,
.h4,
%h4 {
  margin-bottom: 15px;

  & + h5,
  & + .h5 {
    margin-top: 0;
  }
}

h5,
.h5,
%h5 {
  margin-bottom: 15px;

  & + h6,
  & + .h6 {
    margin-top: 0;
  }
}
  • URL: /components/raw/heading/_heading.scss
  • Filesystem Path: components/21-atoms/heading/_heading.scss
  • Size: 1.1 KB