Copy environment

Contact 

<div class="section     section--mt-large     section--mb-large
        fo contact">
    <div class="section__inner h-container">
        <div class="grid">
            <div class="grid__col grid__col--xs-4 grid__col--sm-12 grid__col--md-11 grid__col--offset-md-1">
                <div class="section__content ">
                    <div class="grid contact__info">
                        <div class="grid__col grid__col--md-12 contact__grid-col">
                            <div class="contact__info-item">
                                <div class="contact__info-label animation__target">Email</div>
                                <div class="contact__info-data h3 animation__target">
                                    <a href="mailto:info@something.com" class="link contact__info-link">info@something.com</a>
                                </div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--md-12 contact__grid-col">
                            <div class="contact__info-item">
                                <div class="contact__info-label animation__target">Visit</div>
                                <div class="contact__info-data h3 animation__target">
                                    Emajõe 1b, Tartu, Estonia </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid contact__persons animation__target">
                        <div class="grid__col grid__col--md-12">
                            <p class="contact__persons-label">Call</p>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4  contact__persons-col">
                            <div class="person  contact__person">
                                <figure class="image image--fluid person__image ">
                                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant Managers <br> <a href="mailto:ceo@mail.com">ceo@mail.com</a> <br> <a href="tel:+37253251166">+372 53 251 166</a></div>
                                <a href="#" class="link person__link">Visit Linkedin<svg class="icon  link__icon person__link-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
                                    </svg>
                                </a>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4  contact__persons-col">
                            <div class="person  contact__person">
                                <figure class="image image--fluid person__image ">
                                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant Managers <br> <a href="mailto:ceo@mail.com">ceo@mail.com</a> <br> <a href="tel:+37253251166">+372 53 251 166</a></div>
                                <a href="#" class="link person__link">Visit Linkedin<svg class="icon  link__icon person__link-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
 
{% set topSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.topSpacing %}
            section--mt-small
        {% elseif 'medium' in data.topSpacing %}
            section--mt-medium
        {% else %}
            section--mt-large
        {% endif %}
    {% endapply %}
{% endset %}

{% set bottomSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.bottomSpacing %}
            section--mb-small
        {% elseif 'medium' in data.bottomSpacing %}
            section--mb-medium
        {% else %}
            section--mb-large
        {% endif %}fo
    {% endapply %}
{% endset %}

{% set content %}
    {% if data.contacts %}
        <div class="grid contact__info">
            {% for item in data.contacts %}
                <div class="grid__col grid__col--md-12 contact__grid-col">
                    <div class="contact__info-item">
                        {% if item.label %}
                            <div class="contact__info-label animation__target">{{ item.label }}</div>
                        {% endif %}
                        {% if item.data %}
                            <div class="contact__info-data h3 animation__target">
                                {% if item.link %}<a href="{{ item.link }}" class="link contact__info-link">{{ item.data }}</a>{% else %}{{ item.data }}{% endif %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
    {% if data.persons %}
        <div class="grid contact__persons animation__target">
            {% if data.personsLabel %}
                <div class="grid__col grid__col--md-12">
                    <p class="contact__persons-label">{{ data.personsLabel }}</p>
                </div>
            {% endif %}
            {% for item in data.persons %}
                <div class="grid__col grid__col--sm-6 grid__col--md-4  contact__persons-col">
                    {% include '@person' with { data: item, class: 'contact__person', modifier: '' } %}
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endset %}
{% include '@section' with { class: 'contact', modifier: topSpacing ~ ' ' ~ bottomSpacing, data: { title: data.title, content: content }, container: true } %}

{
  "language": "en-US",
  "data": {
    "contacts": [
      {
        "label": "Email",
        "data": "info@something.com",
        "link": "mailto:info@something.com"
      },
      {
        "label": "Visit",
        "data": "Emajõe 1b, Tartu, Estonia"
      }
    ],
    "personsLabel": "Call",
    "persons": [
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant Managers <br> <a href=\"mailto:ceo@mail.com\">ceo@mail.com</a> <br> <a href=\"tel:+37253251166\">+372 53 251 166</a>",
        "links": [
          {
            "title": "Visit Linkedin",
            "link": "#"
          }
        ]
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant Managers <br> <a href=\"mailto:ceo@mail.com\">ceo@mail.com</a> <br> <a href=\"tel:+37253251166\">+372 53 251 166</a>",
        "links": [
          {
            "title": "Visit Linkedin",
            "link": "#"
          }
        ]
      }
    ]
  }
}
  • Content: 
    .contact__info {
    margin-bottom: -48px;

    @include bp(md-min) {
        margin-bottom: -72px;
    }
}

.contact__grid-col {
    margin-bottom: 48px;

    @include bp(md-min) {
        margin-bottom: 72px;
    }
}

.contact__info-data {
    margin-top: 16px;
}

.contact__info-link {
    font-weight: $font-weight-medium;
}

.contact__persons {
    margin-top: 48px;
    margin-bottom: -48px;

    @include bp(md-min) {
        margin-top: 72px;
        margin-bottom: -72px;
    }
}

.contact__persons-col {
    margin-bottom: 48px;

    @include bp(md-min) {
        margin-bottom: 72px;
    }
}

.contact__persons-label {
    margin-bottom: 16px;
}
  • URL: /components/raw/contact/contact.scss
  • Filesystem Path: src/patterns/modules/contact/contact.scss
  • Size: 657 Bytes
  • Handle: @contact--default
  • Filesystem Path: src/patterns/modules/contact/contact.twig
  • References (2): @person, @section