City of Ghent Style Guide - Version 3.1.1

Summary

Summary

When to use this component

Use the summary component on detail pages to highlight the data that you want users to remember after they’ve seen the page.

The summary component works best:

  • To highlight a key takeaway or a short conclusion. Remember, keep it short, you want users to remember it. The ideal length is the length of a tweet, meaning between 140 characters and 280 characters.
  • To present metadata, for instance:
    • On an event detail page: event date and location.
    • On a team member’s detail page: job function and departement.
    • On a detail page about a book or publication: author, publication date, publisher, number of pages, language.

When not to use this component

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

Do not use the summary component on overview or filter pages. Only use the summary component on detail pages.

How it works

The summary component consists of three parts:

  • A spot illustration
  • A container where to put the data to highlight
  • An optional call-to-action button, for instance to subscribe for an event on an event detail page
<aside class="summary-box highlight highlight--top">
  <div class="highlight__inner">
    {% include '@list' with {
    'type': 'icon-list',
    'icon_items': [
    '<i class="icon-calendar" aria-hidden="true"></i><span><time datetime="2018-11-18T18:00:00+02:00">Saturday 18 november 2018 between 18:00 and 22:00</time>Saturday 18 november with continuous activities</span>',
    '<i class="icon-marker" aria-hidden="true"></i>Inner city',
    ]
    } %}

    {% include '@accolade' %}
  </div>

  {% include '@button' with {
    'text': 'Register for this event',
    'type': 'primary',
    'modifier': 'icon-arrow-right'
  } %}
</aside>
 
<aside class="summary-box highlight highlight--top">
    <div class="highlight__inner">

        <ul class="icon-list ">
            <li><i class="icon-calendar" aria-hidden="true"></i><span><time datetime="2018-11-18T18:00:00+02:00">Saturday 18 november 2018 between 18:00 and 22:00</time>Saturday 18 november with continuous activities</span></li>
            <li><i class="icon-marker" aria-hidden="true"></i>Inner city</li>
        </ul>

        <div class="accolade "></div>
    </div>

    <button type="button" class="button button-primary icon-arrow-right ">
        Register for this event
    </button>
</aside>
 
{
  "tags": [
    "Inner city",
    "Another tag"
  ]
}
  • Content: 
    .summary-box {
  text-align: center;

  ul.icon-list {
    width: 100%;
    margin: 0;

    time {
      @include bold-text;
      display: block;
    }
  }

  .inner-box, /// @deprecated
  .highlight__inner {
    position: relative;
    margin-bottom: 1.5rem; // Save room for the accolade
    text-align: left;

    &::before {
      top: -3.5rem;
    }

    .accolade {
      bottom: -1rem;
      background-color: inherit;

      &::before,
      &::after {
        @include theme('background-color', 'color-secondary', 'summary-box-accolade-background');
      }
    }
  }

  .button {
    @include button-large;
  }
}
  • URL: /components/raw/summary/_summary.scss
  • Filesystem Path: components/41-organisms/summary/_summary.scss
  • Size: 624 Bytes