City of Ghent Style Guide

Partner block

When to use this component

Use the partner block to present a set of logos of partners, organizations or companies that are related to a web page or a web site.

Example usages of the partner block are:

  • Presenting partners or organizations that support the topic of the web page or web site.
  • Presenting the entity or organization that is reponsible about the topic of a specific web page.
  • Presenting sponsors.
  • Presenting clients or references.

When not to use this component

Do not use the partner block to present a set of images. In this case, use the image gallery component or the image wall component instead.

How it works

The partner block contains the following elements:

  • An optional title.
  • An optional short introduction text.
  • One or more logos of partners, organizations or companies.

Each logo of a partner, organization or company can optionally link to another web page or web site. Typically, this will be the web page or web site of the partner, organization or company.

The partner block works best:

  • When it is placed at the bottom of the content of web pages.
  • When the logos of the partners, organizations or companies are SVGs with a transparant background and are unicolor using one of the Style Guide colors.
{% set content %}
  {% if title %}
    {% include '@heading' with {
      'type': 'h3',
      'heading_text': title
    } %}
  {% endif %}

  {% if description %}
    {% include '@paragraph' with {
      'text': description
    } %}
  {% endif %}


  {% if single_partner %}
    <div class="single-partner">
      <a href="#" title="Link to the OCMW Ghent website. ">
        {% include '@image' with {
          src: '/styleguide/img/stock/ocmw-logo.svg' | path,
          alt_text: 'OCMW Gent',
          ratio: null
        } %}
      </a>
    </div>
  {% else %}
    <div class="partners">
      <ul class="inline">
        {% for item in items %}
          <li>
            <a href="#" title="{{ link_text }}">
              {% include '@image' with {
                src: item.link| path,
                alt_text: item.alt_text,
                ratio: null
              } %}
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{% endset %}

{% include "@highlight--no-image" with {
  content: content,
  classes: ['partner-block']
} %}
<section class="highlight partner-block">
    <div class="highlight__inner">
        <h3>Partners</h3>

        <p class="">Here comes information about the partners. The logos in this block are not predefined and can be changed per project.</p>

        <div class="partners">
            <ul class="inline">
                <li>
                    <a href="#" title="">
                        <figure><img src="../../styleguide/img/stock/partner1.svg" alt="University of Ghent" /></figure>
                    </a>
                </li>
                <li>
                    <a href="#" title="">
                        <figure><img src="../../styleguide/img/stock/partner2.svg" alt="HoGent" /></figure>
                    </a>
                </li>
                <li>
                    <a href="#" title="">
                        <figure><img src="../../styleguide/img/stock/partner3.svg" alt="Artevelde Hogeschool" /></figure>
                    </a>
                </li>
                <li>
                    <a href="#" title="">
                        <figure><img src="../../styleguide/img/stock/partner4.svg" alt="Odisee" /></figure>
                    </a>
                </li>
                <li>
                    <a href="#" title="">
                        <figure><img src="../../styleguide/img/stock/partner5.svg" alt="KU Leuven" /></figure>
                    </a>
                </li>
                <li>
                    <a href="#" title="">
                        <figure><img src="../../styleguide/img/stock/partner6.svg" alt="Luca" /></figure>
                    </a>
                </li>
                <li>
                    <a href="#" title="">
                        <figure><img src="../../styleguide/img/stock/partner7.svg" alt="Student in Ghent" /></figure>
                    </a>
                </li>
            </ul>
        </div>

    </div>
</section>
{
  "title": "Partners",
  "description": "Here comes information about the partners. The logos in this block are not predefined and can be changed per project.",
  "items": [
    {
      "link": "/styleguide/img/stock/partner1.svg",
      "alt_text": "University of Ghent",
      "link_title": "Link to the University of Ghent website"
    },
    {
      "link": "/styleguide/img/stock/partner2.svg",
      "alt_text": "HoGent",
      "link_title": "Link to the HoGent website"
    },
    {
      "link": "/styleguide/img/stock/partner3.svg",
      "alt_text": "Artevelde Hogeschool",
      "link_text": "Link to the Artevelde Hogeschool website"
    },
    {
      "link": "/styleguide/img/stock/partner4.svg",
      "alt_text": "Odisee",
      "link_text": "Link to the Odisee website"
    },
    {
      "link": "/styleguide/img/stock/partner5.svg",
      "alt_text": "KU Leuven",
      "link_text": "Link to the KU Leuven website"
    },
    {
      "link": "/styleguide/img/stock/partner6.svg",
      "alt_text": "Luca",
      "link_text": "Link to the Luca website"
    },
    {
      "link": "/styleguide/img/stock/partner7.svg",
      "alt_text": "Student in Ghent",
      "link_text": "Link to the Student in Ghent website"
    }
  ]
}
  • Content:
    .partner-block {
    
      .highlight__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem gutter();
    
        @include tablet {
          padding: 2rem 5.5rem;
        }
      }
    
      p {
        text-align: center;
      }
    
      .partners ul.inline {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-top: 2.2rem;
    
        li {
          width: calc(50% - #{gutter()});
          margin: 0 gutter()/2 gutter();
          text-align: center;
    
          @include tablet {
            width: calc(25% - #{gutter()});
          }
        }
      }
    
      .single-partner {
        width: 9rem;
        max-width: 100%;
        margin: 1.5rem 0 1.2rem;
      }
    }
    
  • URL: /components/raw/partner-block/_partner-block.scss
  • Filesystem Path: components/31-molecules/partner-block/_partner-block.scss
  • Size: 652 Bytes