City of Ghent Style Guide

Highlight

The highlight component is a general, generic box with a spot illustration.

When to use this component

Use the highlight component on a page to highlight a short text, certain specific information or to show a notification.

The highlight component works best with a text with no more than one or a few sentences. The ideal total length of the text is the length of a tweet, meaning between 140 characters and 280 characters.

When not to use this component

Do not use the highlight component to present the main content. Only use the highlight component to highlight specific information.

Do not use the highlight component to show long text or complex content.

Do not use the highlight component when another, more specific style guide component is more applicable:

  • To highlight a quote or a part of a quote, use the quote component instead.
  • To show contact information of an entity, location or person on a detail page, use the contact details component instead.
  • Use the call to action component instead:
    • To guide users to the next step to reach a certain goal related to the page.
    • To present specific contact information to get help or to get more information from a specitic service to reach a certain goal.
    • To promote a certain action for the user to take.
  • Use the summary component instead:
    • To highlight a key takeaway or a short conclusion.
    • To present metadata.
    • When a call-to-action button is required.
    • To highlight any important data that you want users to remember after they’ve seen the page.

How it works

The highlight component consists of two parts:

  • A spot illustration, add one of these classNames: ‘camera’, ‘form’, ‘hammer’, ‘letter’, ‘loupe’, ‘mail’, ‘newsletter’, ‘upload’, ‘whistle’ or ‘checklist’.
    For ‘link’, ‘phone’, ‘email’ or ‘download’ always use the call to action component instead.
  • A short text, specific information or notification text

Layout

The highlight component has two different layouts that can be used:

  • Spot illustration on the left
  • Spot illustration at the top right corner

On tablets in portrait mode and mobile resolutions, the spot illustration is always shown in the center at the top.

See the examples.

Highlight 

<section class="highlight{{ classes ? ' ' ~ classes|join(' ') }}{{ modifier ? ' highlight--' ~ modifier }}">
  <div class="highlight__inner">
    {{ content }}
  </div>
</section>
 
<!-- Image Left -->
<section class="highlight highlight--left">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Image Top -->
<section class="highlight highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- No Image -->
<section class="highlight">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Badminton -->
<section class="highlight badminton highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Ball -->
<section class="highlight ball highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Book -->
<section class="highlight book highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Camera -->
<section class="highlight camera highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Checklist -->
<section class="highlight checklist highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Download -->
<section class="highlight download highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Form -->
<section class="highlight form highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Hammer -->
<section class="highlight hammer highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Letter -->
<section class="highlight letter highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Link -->
<section class="highlight link highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Loupe -->
<section class="highlight loupe highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Mail -->
<section class="highlight mail highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Newsletter -->
<section class="highlight newsletter highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Phone -->
<section class="highlight phone highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Question -->
<section class="highlight question highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Upload -->
<section class="highlight upload highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


<!-- Whistle -->
<section class="highlight whistle highlight--top">
    <div class="highlight__inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>
    </div>
</section>


/* Image Left */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "left"
}


/* Image Top */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top"
}


/* No Image */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>"
}


/* Badminton */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "badminton"
  ]
}


/* Ball */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "ball"
  ]
}


/* Book */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "book"
  ]
}


/* Camera */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "camera"
  ]
}


/* Checklist */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "checklist"
  ]
}


/* Download */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "download"
  ]
}


/* Form */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "form"
  ]
}


/* Hammer */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "hammer"
  ]
}


/* Letter */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "letter"
  ]
}


/* Link */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "link"
  ]
}


/* Loupe */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "loupe"
  ]
}


/* Mail */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "mail"
  ]
}


/* Newsletter */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "newsletter"
  ]
}


/* Phone */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "phone"
  ]
}


/* Question */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "question"
  ]
}


/* Upload */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "upload"
  ]
}


/* Whistle */
{
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet vestibulum ex, id tincidunt nulla porttitor nec.</p>",
  "modifier": "top",
  "classes": [
    "whistle"
  ]
}
  • Content: 
    .highlight {
  position: relative;
  font-size: .8rem;

  .highlight__inner {
    @include theme('background-color', 'color-primary--lighten-5', 'highlight-background');
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1rem 1.6rem;
    border-radius: border-radius('radius-2');

    @include tablet {
      padding: 2rem;
    }

    > *:last-child {
      margin-bottom: 0;
    }
  }


  input[type="checkbox"]:not([disabled]) + label::before,
  input[type="radio"]:not([disabled]) + label::before,
  input:not([disabled]):not([type="submit"]),
  select:not([disabled]),
  textarea:not([disabled]) {
    @include theme('background-color', 'color-secondary', 'highlight-input-background-color');
  }

  .accolade {
    &::before,
    &::after {
      @include theme('background', 'color-primary--lighten-5', 'highlight-background');
    }
  }
}

.highlight--left,
.highlight--top {
  padding-top: 3.5rem;

  $icons: badminton ball book camera checklist download form hammer letter link loupe mail newsletter phone question upload whistle;
  @each $icon in $icons {
    &.#{$icon} .highlight__inner::before {
      @include spot-image($icon + '-light', 7rem);
    }
  }

  .highlight__inner {
    @include tablet-and-below {
      padding-top: 5rem;
    }

    &::before {
      @include spot-image('lightbulb-light', 7rem);
      @include theme('color', 'color-primary', 'highlight-spot-shadow');

      position:  absolute;
      top: 0;
      right: 0;
      left: 0;
      margin: auto;
      border-radius: 50%;
      box-shadow: 0 10px 35px -25px;
      z-index: z('boxes', 'spotimage');
    }
  }
}

.highlight--left {
  @include tablet {
    padding-top: 0;
  }

  .highlight__inner {

    @include tablet {
      min-height: 11rem;
      padding-left: 11rem;

      &::before {
        top: calc(50% - 3.5rem);
        right: auto;
        bottom: auto;
        left: 2rem;
      }
    }
  }
}

.highlight--top {
  .highlight__inner {
    @include tablet {
      padding-right: 9rem;

      &::before {
        right: 2rem;
        left: auto;
      }
    }
  }
}
  • URL: /components/raw/highlight/_highlight.scss
  • Filesystem Path: components/31-molecules/highlight/_highlight.scss
  • Size: 2.1 KB