There are no notes for this item.

<div class="contact-block box-left {% if tel %}tel{% endif %}{% if email %}mail{% endif %}">
  <div class="inner-box">
    {%  if title %}
      {% include '@heading' with {
        'type': 'h2',
        'heading_text': title
      } %}
    {% endif %}

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

    <ul class="links">
      {% if tel %}
        <li>
          {% include '@link' with {
            'text': 'Call '~tel,
            'link': 'tel:'~tel,
            'modifier': 'button button-primary'
          } %}
        </li>
      {% endif %}
      {% if email %}
        <li>
          {% include '@link' with {
            'text': 'Send an email to '~email,
            'link': 'mailto:'~email,
            'modifier': 'button button-primary'
          } %}
        </li>
      {% endif %}
      {% if link %}
        <li>
          {% include '@link' with {
            'text': 'Check all contact details',
            'link': '#'
          } %}
        </li>
      {% endif %}
    </ul>

  </div>
</div>
<div class="contact-block box-left mail">
    <div class="inner-box">
        <h2>Contact us</h2>

        <p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>

        <ul class="links">
            <li>
                <a href='mailto:info@stad.gent' class="button button-primary" title="Contact us">
                    Send an email to info@stad.gent</a>
            </li>
            <li>
                <a href='#' title="Contact us">
                    Check all contact details</a>
            </li>
        </ul>

    </div>
</div>
{
  "title": "Contact us",
  "description": "Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.",
  "tel": null,
  "email": "info@stad.gent",
  "link": "#"
}
  • Content:
    .contact-block {
    
      &.tel .inner-box::before {
        @include spot-image('phone-light', 7rem);
      }
    
      &.mail .inner-box::before {
        @include spot-image('mail-light', 7rem);
      }
    
      .inner-box {
        li:last-of-type {
          margin-top: 1rem;
        }
      }
    }
    
  • URL: /components/raw/contact-block/_contact-block.scss
  • Filesystem Path: components/31-molecules/contact-block/_contact-block.scss
  • Size: 251 Bytes