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>
<!-- Default -->
<div class="contact-block box-left tel">
    <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='tel:09 123 45 67' class="button button-primary" title="Contact us">
                    Call 09 123 45 67</a>
            </li>
            <li>
                <a href='#' title="Contact us">
                    Check all contact details</a>
            </li>
        </ul>

    </div>
</div>

<!-- Contact Block With Email -->
<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>

<!-- Contact Block Without Description -->
<div class="contact-block box-left tel">
    <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='tel:09 123 45 67' class="button button-primary" title="Contact us">
                    Call 09 123 45 67</a>
            </li>
            <li>
                <a href='#' title="Contact us">
                    Check all contact details</a>
            </li>
        </ul>

    </div>
</div>

<!-- Contact Block Without Link -->
<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>

/* Default */
{
  "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": "09 123 45 67",
  "email": null,
  "link": "#"
}

/* Contact Block With Email */
{
  "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": "#"
}

/* Contact Block Without Description */
{
  "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": "09 123 45 67",
  "email": null,
  "link": "#"
}

/* Contact Block Without Link */
{
  "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