City of Ghent Style Guide

Banner

When to use this component

Use the image component to present a full-width image banner on a page. The banner is a simple image shown in the aspect ratio of the image itself (so not 8:5 by default) with a max-width of the maximum grid container size, set in the $bp-container variable, or the viewport width (for smaller screens).

How it works

For images, the following requirements should be followed:

  • An alt attribute is required. A short text alternative should be specified using the alt attribute. See WCAG Technique page
  • For images that are purely decorative images, the alt attributes must be empty.
  • The aspect ratio is determined by the image inside
  • When the image cannot be loaded or is not found, a placeholder is used. See the “broken image placeholder” example.
  • When there is no image to show, a placeholder is used. See the “no image placeholder” example.

The image components also adds the benefit of providing an optional caption tag.

Banner 

<div class="banner-image-container full-width">
    <div class="banner-image">
        {% include '@image' with {
            src: 'https://via.placeholder.com/1800x500&text=18:5+(1800x500)',
            alt_text: image|first.alt,
            caption: image|first.caption
        } %}
    </div>
</div>
 
<div class="banner-image-container full-width">
    <div class="banner-image">
        <figure><img src="https://via.placeholder.com/1800x500&text=18:5+(1800x500)" alt="placeholder image alternative text" />
            <figcaption>image caption</figcaption>
        </figure>
    </div>
</div>
 
{
  "image": [
    {
      "src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
      "alt": "placeholder image alternative text",
      "caption": "image caption"
    }
  ]
}
  • Content: 
    .banner-image {
  position: relative;
  max-width: calc($bp-container + $container-padding*2);
  margin: 0 auto;
  padding: 0 $container-padding;
  text-align: center;

  figure {
    display: inline-block;
    position: relative;
    max-width: 100%;

    img {
      width: auto;
      margin: 0 auto;
    }
  }

  figcaption {
    display: none;
    max-width: $bp-container;

    @include tablet {
      display: block;
    }
  }
}
  • URL: /components/raw/banner/_banner.scss
  • Filesystem Path: components/41-organisms/banner/_banner.scss
  • Size: 436 Bytes