There are no notes for this item.

{# Variables #}
{% if paragraphs is not defined %}
  {% set paragraphs = [
    'Gentinfo is hét centrale aanspreekpunt voor informatie over het stadsbestuur en de stadsdiensten. Heeft u vragen, klachten, suggesties, meldingen,… over de Stad Gent? Neem dan contact op met Gentinfo.',
    '<strong>Bereikbaar van maandag t.e.m. zaterdag van 8 tot 19 uur.</strong>'
  ] %}
{% endif %}

{% if listItmes is not defined %}
  {% set listItems = [
    '<i aria-hidden="true" class="icon-phone"></i><a href="tel:092101010">09 210 10 10</a>',
    '<i aria-hidden="true" class="icon-envelope"></i><a href="mailto:gentinfo@stad.gent">Gentinfo@stad.gent</a>',
    '<i aria-hidden="true" class="icon-document"></i><a href="#!">Contactformulier</a>'
  ] %}
{% endif %}

{# Component #}
<div class="gentinfo {{ modifier }}">
  <div class="gentinfo-content">
    <h2 class="visually-hidden">Gent info</h2>

    {% include '@image' with {
      src: '/styleguide/img/svg/gentinfo-logo.svg' | path,
      modifier: 'gentinfo-logo',
      alt_text: 'Gent info',
      ratio: null
    } %}

    {% include '@paragraph' with {
      text: paragraphs[0]
    } %}

    {% include '@paragraph' with {
      text: paragraphs[1]
    } %}

    {% include '@list' with {
      'type': 'icon-list',
      'modifier': 'inline',
      'icon_items': listItems
    }
    %}

  </div>
</div>
<div class="gentinfo ">
    <div class="gentinfo-content">
        <h2 class="visually-hidden">Gent info</h2>

        <img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gent info" class="gentinfo-logo" />

        <p class="">Gentinfo is hét centrale aanspreekpunt voor informatie over het stadsbestuur en de stadsdiensten. Heeft u vragen, klachten, suggesties, meldingen,… over de Stad Gent? Neem dan contact op met Gentinfo.</p>

        <p class="">Gentinfo is beschikbaar van maandag tot en met zaterdag van 8 tot 19 uur.</p>

        <ul class="icon-list inline">
            <li><i aria-hidden="true" class="icon-phone"></i><a href="tel:092101010">09 210 10 10</a></li>
            <li><i aria-hidden="true" class="icon-envelope"></i><a href="mailto:gentinfo@stad.gent">Gentinfo@stad.gent</a></li>
            <li><i aria-hidden="true" class="icon-document"></i><a href="#!">Contactformulier</a></li>
        </ul>

    </div>
</div>
{
  "paragraphs": [
    "Gentinfo is hét centrale aanspreekpunt voor informatie over het stadsbestuur en de stadsdiensten. Heeft u vragen, klachten, suggesties, meldingen,… over de Stad Gent? Neem dan contact op met Gentinfo.",
    "Gentinfo is beschikbaar van maandag tot en met zaterdag van 8 tot 19 uur."
  ]
}
  • Content:
    $gentinfo-icon-size: 8rem;
    
    .gentinfo {
      @include theme('background-color', 'color-primary--lighten-5', 'gentinfo-background');
      margin: 3rem 0;
      padding: 2rem 1rem;
    
      .gentinfo-content {
        @include theme('background-color', 'color-secondary', 'gentinfo-content-background');
        @include theme-content('color-primary--lighten-5', 'gentinfo-content-shadow') {
          box-shadow: 0 8px 12px 0 $theme-color;
        }
    
        position: relative;
        max-width: $bp-max-content;
        min-height: $gentinfo-icon-size + 2rem;
        margin: 0 auto;
        padding: 1.2rem;
    
        &::before {
          @include spot-image('gentinfo', $gentinfo-icon-size);
          margin: 0 auto 1.5rem;
        }
    
        @include tablet {
          padding: 2.3rem 2.3rem 2.3rem 20rem;
    
          &::before {
            position: absolute;
            top: 50%;
            left: 10rem;
            margin-top: $gentinfo-icon-size / -2;
            margin-bottom: 0;
            margin-left: $gentinfo-icon-size / -2;
          }
        }
      }
    
      .gentinfo-logo {
        margin-bottom: 1.2rem;
      }
    
      .icon-list.inline {
        > li {
          margin-bottom: .5rem;
    
          [class*='icon-'] {
            @include theme('color', 'color-primary', 'link-color');
          }
        }
      }
    }
    
  • URL: /components/raw/gentinfo/_gentinfo.scss
  • Filesystem Path: components/31-molecules/gentinfo/_gentinfo.scss
  • Size: 1.2 KB