There are no notes for this item.

<div class="gentinfo-block">
  <div class="gentinfo-block-content">
    <h2 class="visually-hidden">Gentinfo</h2>

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

    {% include '@paragraph' with {
      'text': 'Gentinfo is available from Monday till Saturday from 08:00 till 19:00'
    } %}
    {% include '@list' with {
      'type': 'icon-list',
      'icon_items': [
        '<i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 9 210 10 10" alt="Gentinfo tel link">09 210 10 10</a>',
        '<i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent" alt="Gentinfo mail link">Gentinfo@stad.gent</a>',
        '<i class="icon-document" aria-hidden="true"></i><a href="#">Contactformulier</a>'
      ]
    } %}
  </div>
  {% include '@button' with { 'text': 'Chat with Gentinfo', 'type': 'primary', 'modifier': 'gentinfo-chat-button button icon-chat-round' } %}
</div>
<div class="gentinfo-block">
    <div class="gentinfo-block-content">
        <h2 class="visually-hidden">Gentinfo</h2>

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

        <p class="">Gentinfo is available from Monday till Saturday from 08:00 till 19:00</p>

        <ul class="icon-list ">
            <li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 9 210 10 10" alt="Gentinfo tel link">09 210 10 10</a></li>
            <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent" alt="Gentinfo mail link">Gentinfo@stad.gent</a></li>
            <li><i class="icon-document" aria-hidden="true"></i><a href="#">Contactformulier</a></li>
        </ul>

    </div>
    <button type="button" class="button button-primary gentinfo-chat-button button icon-chat-round ">
        Chat with Gentinfo
    </button>
</div>
/* No context defined for this component. */
  • Content:
    .gentinfo-block {
      @include theme('background-color', 'color-secondary', 'gentinfo-block-background');
      display: flex;
      position: relative;
      flex-wrap: wrap;
      margin-top: 3rem;
      padding: 6rem 1.2rem 2.5rem;
      font-size: .8rem;
      line-height: 1.75;
      text-align: center;
      box-shadow: 0 8px 12px 0 rgba(0, 125, 179, .06);
    
      @include phablet {
        flex-wrap: nowrap;
        margin: 0;
        padding: 2.5rem;
        text-align: left;
      }
    
      &::before {
        @include spot-image('gentinfo');
        height: 10rem;
        margin: -6rem auto 0;
    
        @include phablet {
          display: block;
          align-self: center;
          margin: 0 2.4rem 0 0;
        }
      }
    
      .gentinfo-block-content {
        width: 100%;
        text-align: left;
    
        @include phablet {
          width: span(5 of 7);
          max-width: 15rem;
        }
    
        h2,
        p {
          text-align: center;
    
          @include phablet {
            text-align: left;
          }
        }
    
        h2 {
          font-weight: 800;
        }
    
        ul {
          margin: 0;
          list-style: none;
    
          li {
            margin-bottom: .5rem;
          }
    
          a {
            font-weight: 600;
          }
        }
      }
    
      .gentinfo-chat-button {
        position: absolute;
        right: 1.2rem;
        bottom: -1rem;
        left: 1.2rem;
        width: calc(100% - 2.2rem);
        margin: auto;
    
        @include phablet {
          right: 1.5rem;
          left: auto;
          width: auto;
        }
      }
    
      .gentinfo-logo {
        width: 8.25rem;
        margin-bottom: 1.5rem;
      }
    }
    
  • URL: /components/raw/gentinfo-island/_gentinfo_island.scss
  • Filesystem Path: components/31-molecules/gentinfo-island/_gentinfo_island.scss
  • Size: 1.4 KB