Related box

When to use this component

The related box is used to show links to related information on a page related to the content of that specific page.

When not to use this component

  • Do not use the related box to link to related contacts, to show a related location or authorized persons. In these cases, use the contact box component.
  • Do not use the related box to link to related documents. In this case, use the document box component.

How to use this component

The related box should be placed just after the page contents.

If there is also a contact box and/or a document box on the page, the order of the boxes should be the following:

  1. Contact box
  2. Document box
  3. Related box

If the page is a news article page with related articles, the extra articles component should be following right after.

Composition and behavior of this component

The related box consists of the following 3 components:

  1. Related pages
  2. Related tags
  3. Related linked open data

At least one of these 3 components should be included in the related box.

The related pages component is a list of links to pages related to the page where the related box is shown.

The related tags component is a list of tags linked to the page where the related box is shown.

The related linked open data component is a one external link to linked open data related to the page where the related box is shown.

<div class="related-box">
  <div class="related-box-content">
    {% include '@heading' with {
      'type': 'h2',
      'heading_text': 'Also interesting'
    } %}

  {% if similar_articles %}
    <div class="related-box-content-column">
        {% include '@heading' with {
          'type': 'h3',
          'heading_text': 'Similar articles'
        } %}

        {% include '@list' with {
            'type': 'unordered',
            "items": [
              '<a href="javascript:(void);">Council meeting dates</a>',
              '<a href="javascript:(void);">Neighborhood</a>',
              '<a href="javascript:(void);">Service policy participation</a>',
              '<a href="javascript:(void);">Re-listen the city council and the dec...<Paste></a>'
            ]
          }
        %}
      </div>
    {% endif %}
    <div class="related-box-content-column">
      {% include '@heading' with {
        'type': 'h3',
        'heading_text': 'More info about'
      } %}

      {% if tags.length > 1 %}
        <ul class="related-box-tags">
          {% for tag in tags %}
            <li>
              {% include '@tag' with {
                'tag_text': tag,
                type: 'tag'
              } %}
            </li>
          {% endfor %}
        </ul>
      {% else %}
        {% include '@tag' with {
          'tag_text': tags.0
        } %}
      {% endif %}

      {% include '@heading' with {
        'type': 'h3',
        'heading_text': 'Related Linked Open Data'
      } %}

      {% include '@link' with {
        'link': 'https://stad.gent',
        'text': 'Lorem ipsum dolor set'
      } %}
    </div>
  </div>
</div>
<div class="related-box">
    <div class="related-box-content">
        <h2>Also interesting</h2>

        <div class="related-box-content-column">
            <h3>Similar articles</h3>

            <ul class="">
                <li><a href="javascript:(void);">Council meeting dates</a></li>
                <li><a href="javascript:(void);">Neighborhood</a></li>
                <li><a href="javascript:(void);">Service policy participation</a></li>
                <li><a href="javascript:(void);">Re-listen the city council and the dec...<Paste></a></li>
            </ul>

        </div>
        <div class="related-box-content-column">
            <h3>More info about</h3>

            <ul class="related-box-tags">
                <li>
                    <a href="javascript:(void);" class="tag ">
                        Inner city
                    </a>

                </li>
                <li>
                    <a href="javascript:(void);" class="tag ">
                        Another tag
                    </a>

                </li>
            </ul>

            <h3>Related Linked Open Data</h3>

            <a href='https://stad.gent'>
                Lorem ipsum dolor set</a>
        </div>
    </div>
</div>
{
  "similar_articles": true,
  "tags": [
    "Inner city",
    "Another tag"
  ]
}
  • Content:
    .related-box {
      &-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    
        > h2 {
          flex-basis: 100%;
          max-width: none;
        }
    
        &-column {
          margin-bottom: 1.6rem;
          padding-right: 2rem;
    
          & + & {
            @include tablet {
              flex-basis: span(4 of 8);
            }
          }
    
          @include desktop {
            margin-bottom: 0;
          }
    
          > h3 {
            margin-bottom: .8rem;
    
            &:first-of-type {
              margin-top: 0;
            }
          }
    
          ul.related-box-tags {
            @extend %list-no-style;
    
            display: flex;
            flex-wrap: wrap;
          }
    
          .tag {
            margin: 0 .8rem .8rem 0;
          }
        }
      }
    }
    
  • URL: /components/raw/related-box/_related-box.scss
  • Filesystem Path: components/41-organisms/related-box/_related-box.scss
  • Size: 696 Bytes