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 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>
{
  "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": "#"
}
  • 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