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.

Partner Block 

<div class="partner-block {{ single_partner ? 'partner__single' : 'partner__multiple' }}">
  <div class="partner-content intro">
      {% if title or description %}
          <div class="intro__content">
          {% if title %}
            {% include '@heading' with {
              'heading': 'h2',
              'heading_text': title
            } %}
          {% endif %}

          {% if description %}
            {% include '@paragraph' with {
              'text': description
            } %}
          {% endif %}
          </div>
      {% endif %}
  </div>

  <div class="partner-content partners">
    {% if single_partner %}
      <a class="no-icon" 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>
    {% else %}
      <ul class="inline">
        {% for item in items %}
          <li>
            <a class="no-icon" href="#" title="{{ link_text }}">
              {% include '@image' with {
                src: item.link| path,
                alt_text: item.alt_text,
                ratio: null
              } %}
            </a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</div>
 
<!-- Default -->
<div class="partner-block partner__multiple">
    <div class="partner-content intro">
        <div class="intro__content">
            <h2>Partners title</h2>

            <p>Here you may add information about the partners. The logos in this block are not predefined and can be changed per project.</p>
        </div>
    </div>

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


<!-- Single Partner -->
<div class="partner-block partner__single">
    <div class="partner-content intro">
        <div class="intro__content">
            <h2>Partner title</h2>

            <p>Here you may add information about the partners. The logos in this block are not predefined and can be changed per project.</p>
        </div>
    </div>

    <div class="partner-content partners">
        <a class="no-icon" href="#" title="Link to the OCMW Ghent website. ">
            <figure><img src="../../styleguide/img/stock/ocmw-logo.svg" alt="OCMW Gent" /></figure>
        </a>
    </div>
</div>


/* Default */
{
  "title": "Partners title",
  "description": "Here you may add 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"
    }
  ]
}


/* Single Partner */
{
  "title": "Partner title",
  "description": "Here you may add 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"
    }
  ],
  "single_partner": true
}
  • Content: 
    .partner-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;

  @include desktop {
    padding: 0 135px;
  }

  &.partner__multiple {
    @include desktop {
      flex-direction: row;
      align-items: stretch;
      justify-content: center;
    }

    .partner-content {
      display: flex;
      align-items: center;
      min-height: 100%;
    }

    .intro {
      @include desktop {
        min-width: 350px;
      }

      p:last-child {
        margin-bottom: 0;
      }
    }

    .partners {
      @include theme('border-color', 'color-primary-light', 'partner-intro-border');

      margin: 45px 0 0 ;
      padding: 45px 0 0;
      border-top-width: 2px;
      border-top-style: solid;

      @include desktop {
        margin: 0 0 0 60px;
        padding: 0 0 0 60px;
        border-top: 0;
        border-left-width: 2px;
        border-left-style: solid;
      }
    }
  }

  &.partner__single {
    text-align: center;

    .intro {
      p:last-child {
        margin-bottom: 30px;
      }
    }
  }

  h2 {
    margin-bottom: 30px;
  }

  ul {
    align-items: center;
    justify-content: space-between;
    gap: 30px 60px;

    @include tablet {
      justify-content: flex-start;
    }

    li {
      flex: 1 1 calc(100% / 2 - 60px);
      width: calc(100% /2);
      min-width: 70px;
      max-width: 150px;
      margin: 0;

      @include tablet {
        flex-basis: calc(100% / 3 - 60px);
        flex-grow: 0;
        width: calc(100% / 3);
      }

      @include desktop {
        flex-basis: calc(100% / 4 - 60px);
        width: calc(100% / 4);
        min-width: 100px;
        max-width: 200px;
      }
    }
  }

  a {
    display: block;
    border: 0;

    &[href^="http://"]:not([href*="gent.be"]),
    &[href^="https://"]:not([href*="gent.be"]) {
      &:not(.no-icon):not(.tag) {
        margin-right: 0;
      }
    }
  }

  figure,
  img {
    max-width: 100%;
  }
}
  • URL: /components/raw/partner-block/_partner-block.scss
  • Filesystem Path: components/31-molecules/partner-block/_partner-block.scss
  • Size: 2 KB