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
  • 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.

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

/* 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>"
}

  • Content:
    .highlight,
    .box-left, /// @deprecated
    .box-top, /// @deprecated
    .box-no-icon { /// @deprecated
      position: relative;
      font-size: .8rem;
    
      .highlight__inner,
      .inner-box { /// @deprecated
        @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,
    .box-left, /// @deprecated
    .box-top { /// @deprecated
      padding-top: 3.5rem;
    
      .highlight__inner,
      .inner-box { /// @deprecated
        @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,
    .box-left { /// @deprecated
      @include tablet {
        padding-top: 0;
      }
    
      .highlight__inner,
      .inner-box { /// @deprecated
    
        @include tablet {
          min-height: 11rem;
          padding-left: 11rem;
    
          &::before {
            top: calc(50% - 3.5rem);
            right: auto;
            bottom: auto;
            left: 2rem;
          }
        }
      }
    }
    
    .highlight--top,
    .box-top { /// @deprecated
      .highlight__inner,
      .inner-box { /// @deprecated
        @include tablet {
          padding-right: 9rem;
    
          &::before {
            right: 2rem;
            left: auto;
          }
        }
      }
    }
    
    .box-no-icon { /// @deprecated
      @include theme('background-color', 'color-primary--lighten-5', 'highlight-background');
      padding: 2rem 1rem 1.6rem;
      border-radius: border-radius('radius-2');
    }
    
  • URL: /components/raw/highlight/_highlight.scss
  • Filesystem Path: components/31-molecules/highlight/_highlight.scss
  • Size: 2.4 KB