FTSE Russell Styleguide

Contact Regions 

<div class="contact__region__list" style="background: linear-gradient(rgba(124,52,64,.9), rgba(124,52,64,.9)), url(/assets/images/usa-bg.jpg) center center/cover no-repeat;">
    <div class="container">
        <div class="contact__countries grid">

            <div class="contact__country span-3 col-lg-12">
                <h3 class="contact__country--title">USA</h3>
                <div class="contact__cities">

                    <div class="contact__city col-lg-4">
                        <h4 class="contact__city--title">New York City</h4>
                        <div class="contact__city--address">
                            <p>1270 Avenue of the Americas 28th Floor New York, NY 10020</p>
                        </div>

                        <div class="contact__city--phone">
                            <a href="tel:1 866 551 0617"><span><svg class="icon icon--small">
                  <use xlink:href="/assets/sprites/icons.svg#ico-phone"></use>
                  </svg></span>1 866 551 0617
                </a>
                        </div>

                        <div class="contact__city--maps">
                            <a href="https://www.google.co.uk/maps/place/Russell+Investments/@55.9403274,-3.2193707,19.5z/data=!4m7!1m4!3m3!1s0x4887c7a7db683bb1:0xf0ca1cb882c59187!2sJacobs+Ltd,+160+Dundee+St,+Edinburgh+EH11+1DQ!3b1!3m1!1s0x0000000000000000:0x79a33a95da89bdb6" target="_blank"><span><svg class="icon icon--small">
                  <use xlink:href="/assets/sprites/icons.svg#ico-location-pin"></use>
                  </svg></span>Google Maps
                </a>
                        </div>

                    </div>

                    <div class="contact__city col-lg-4">
                        <h4 class="contact__city--title">Boston</h4>
                        <div class="contact__city--address">
                            <p>One International Place 14th Floor Boston, MA 02110</p>
                        </div>

                        <div class="contact__city--phone">
                            <a href="tel:1 866 551 0617"><span><svg class="icon icon--small">
                  <use xlink:href="/assets/sprites/icons.svg#ico-phone"></use>
                  </svg></span>1 866 551 0617
                </a>
                        </div>

                    </div>

                    <div class="contact__city col-lg-4">
                        <h4 class="contact__city--title">Chicago</h4>
                        <div class="contact__city--address">
                            <p>30 South Wacker Drive Suite 2251 Chicago, IL 60606</p>
                        </div>

                        <div class="contact__city--phone">
                            <a href="tel:1 866 551 0617"><span><svg class="icon icon--small">
                  <use xlink:href="/assets/sprites/icons.svg#ico-phone"></use>
                  </svg></span>1 866 551 0617
                </a>
                        </div>

                    </div>

                </div>
            </div>

            <div class="contact__country span-1 col-lg-4">
                <h3 class="contact__country--title">Canada</h3>
                <div class="contact__cities">

                    <div class="contact__city col-lg-12">
                        <h4 class="contact__city--title">Toronto</h4>
                        <div class="contact__city--address">
                            <p>70 York Street Suite 1520 Toronto, ON M5J 1S9</p>
                        </div>

                        <div class="contact__city--phone">
                            <a href="tel:1 866 551 0617"><span><svg class="icon icon--small">
                  <use xlink:href="/assets/sprites/icons.svg#ico-phone"></use>
                  </svg></span>1 866 551 0617
                </a>
                        </div>

                    </div>

                </div>
            </div>

            <div class="contact__country span-1 col-lg-4">
                <h3 class="contact__country--title">Mexico</h3>
                <div class="contact__cities">

                    <div class="contact__city col-lg-12">
                        <h4 class="contact__city--title">Mexico City</h4>
                        <div class="contact__city--address">
                            <p>Paseo de los Tamarindos 400ª, 5 piso. Col. Bosques de las Lomas Mexico city_name, C.P. 05120</p>
                        </div>

                        <div class="contact__city--phone">
                            <a href="tel:1 866 551 0617"><span><svg class="icon icon--small">
                  <use xlink:href="/assets/sprites/icons.svg#ico-phone"></use>
                  </svg></span>1 866 551 0617
                </a>
                        </div>

                    </div>

                </div>
            </div>

            <div class="contact__country span-1 col-lg-4">
                <h3 class="contact__country--title">Brazil</h3>
                <div class="contact__cities">

                    <div class="contact__city col-lg-12">
                        <h4 class="contact__city--title">Rio de Janeiro</h4>
                        <div class="contact__city--address">
                            <p>1270 Avenue of the Americas 28th Floor New York, NY 10020</p>
                        </div>

                        <div class="contact__city--phone">
                            <a href="tel:1 866 551 0617"><span><svg class="icon icon--small">
                  <use xlink:href="/assets/sprites/icons.svg#ico-phone"></use>
                  </svg></span>1 866 551 0617
                </a>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
 
<div class="contact__region__list" style="background: linear-gradient(rgba(124,52,64,.9), rgba(124,52,64,.9)), url({{ background }}) center center/cover no-repeat;">
  <div class="container">
    <div class="contact__countries grid">
      {% for country in countries %}
      <div class="contact__country span-{{ country.span }} col-lg-{{ country.span*4 }}">
        <h3 class="contact__country--title">{{ country.name }}</h3>
          <div class="contact__cities">
          {% for city in country.cities %}
            <div class="contact__city col-lg-{{ 12/country.span }}">
              <h4 class="contact__city--title">{{ city.city_name }}</h4>
              <div class="contact__city--address">
                {{ city.address }}
              </div>
              {% if city.phone %}
              <div class="contact__city--phone">
                <a href="tel:{{ city.phone }}"><span><svg class="icon icon--small">
                  <use xlink:href="/assets/sprites/icons.svg#ico-phone"></use>
                  </svg></span>{{ city.phone }}
                </a>
              </div>
              {% endif %}
              {% if city.location %}
              <div class="contact__city--maps">
                <a href="{{ city.location }}" target="_blank"><span><svg class="icon icon--small">
                  <use xlink:href="/assets/sprites/icons.svg#ico-location-pin"></use>
                  </svg></span>Google Maps
                </a>
              </div>
              {% endif %}
            </div>
          {% endfor %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
 
{
  "background": "/assets/images/usa-bg.jpg",
  "countries": [
    {
      "country": "USA",
      "name": "USA",
      "span": 3,
      "cities": [
        {
          "city_name": "New York City",
          "address": "<p>1270 Avenue of the Americas 28th Floor New York, NY 10020</p>",
          "phone": "1 866 551 0617",
          "location": "https://www.google.co.uk/maps/place/Russell+Investments/@55.9403274,-3.2193707,19.5z/data=!4m7!1m4!3m3!1s0x4887c7a7db683bb1:0xf0ca1cb882c59187!2sJacobs+Ltd,+160+Dundee+St,+Edinburgh+EH11+1DQ!3b1!3m1!1s0x0000000000000000:0x79a33a95da89bdb6"
        },
        {
          "city_name": "Boston",
          "address": "<p>One International Place 14th Floor Boston, MA 02110</p>",
          "phone": "1 866 551 0617",
          "location": null
        },
        {
          "city_name": "Chicago",
          "address": "<p>30 South Wacker Drive Suite 2251 Chicago, IL 60606</p>",
          "phone": "1 866 551 0617",
          "location": null
        }
      ]
    },
    {
      "country": "Canada",
      "span": 1,
      "name": "Canada",
      "cities": [
        {
          "city_name": "Toronto",
          "address": "<p>70 York Street Suite 1520 Toronto, ON M5J 1S9</p>",
          "phone": "1 866 551 0617",
          "location": null
        }
      ]
    },
    {
      "country": "Mexico",
      "span": 1,
      "name": "Mexico",
      "cities": [
        {
          "city_name": "Mexico City",
          "address": "<p>Paseo de los Tamarindos 400ª, 5 piso. Col. Bosques de las Lomas Mexico city_name, C.P. 05120</p>",
          "phone": "1 866 551 0617",
          "location": null
        }
      ]
    },
    {
      "country": "Brazil",
      "span": 1,
      "name": "Brazil",
      "cities": [
        {
          "city_name": "Rio de Janeiro",
          "address": "<p>1270 Avenue of the Americas 28th Floor New York, NY 10020</p>",
          "phone": "1 866 551 0617",
          "location": null
        }
      ]
    }
  ]
}
  • Content: 
    .contact__region--is-expanded {
  transition: all 0.3s ease-in-out;

  .contact__region__list {
    transition: all 0.3s ease-in-out;
    margin-top: 0;
    //-webkit-animation: slide-down .8s ease-out;
  // -moz-animation: slide-down .8s ease-out;
  }
}
.contact__region__info {
  display: none;
}

.contact__region__list {
  color: $white;
  padding: $space-xl 0;

  @include mq($breakpoint-lg) {
    padding: $space-xl;
  }

  .container {
    max-width: map(breakpoints, max);
    width: 100%;
  }
}

.contact__countries {
  grid-template-columns: 1fr;
  margin: 0;

  @include mq($breakpoint-lg) {
    grid-template-columns: 1fr 1fr 1fr;

    & > .span-1 {
      flex-basis: calc(33.33333% - 4rem);
    }

    & > .span-2 {
      flex-basis: calc(66.66667% - 4rem);
      grid-column-end: span 2;

      .contact__city {
        flex-basis: calc(50% - 1rem);
      }
    }

    & > .span-3 {
      flex-basis: calc(100% - 4rem);
      grid-column-end: span 3;

      .contact__cities {
        grid-template-columns: 1fr 1fr 1fr;

        .contact__city {
          flex-basis: calc(33.33333% - 1rem);
        }
      }
    }

    .span-2,
    .span-3 {
      .contact__cities {
        grid-column-gap: 4rem;

        .contact__city {
          padding-left: 0;
        }
      }
    }
  }
}

.contact__country {

  padding: 0 $space-xl;

  @include mq($breakpoint-lg) {
    padding: $space-xl;
  }

  &--title{
    border-bottom: $border-width-thin solid $primary-darker;
    padding-bottom: $space-sm;

    @include mq-only($breakpoint-mob) {
      font-size: $font-size-xl;
    }
  }
}

.contact__cities {
  display: flex;

  @supports (display: grid) {
    display: grid
  }

  grid-template-columns: 1fr;
  justify-items: stretch;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: wrap;

  @include mq($breakpoint-lg) {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

.contact__city {
  padding: $space-md 0;
  font-weight: $font-weight-light;
  font-size: $font-size-sm;

  @include mq($breakpoint-lg) {
    padding: $space-md;
  }

  &:first-child {
    padding-left: 0;
  }

  &--title{
    color: $white;
    font-weight: $font-weight-normal;
    margin-bottom: 0;

    @include mq-only($breakpoint-mob) {
      font-size: $font-size-lg;
    }
  }

  &--address {
    color: $white;
    font-size: $font-size-sm;
    padding: $space-xs 0;

    p{
      font-size: $font-size-sm;
      margin-bottom: 0;
    }
  }

  &--phone,
  &--maps {
    padding: 0 0 $space-xs 0;

    a {
      color: $white;
      font-size: $font-size-base;

      span {
        margin-right: $space-sm;
      }

      .icon {
        display: inline-block;
        vertical-align: middle;
        fill: $white;
      }
    }
  }

  &--maps {
    a {
      text-decoration: underline;
    }
  }
}
  • URL: /components/raw/contact_regions/_contact_regions.scss
  • Filesystem Path: src/components/molecules/contact/contact_regions/_contact_regions.scss
  • Size: 2.8 KB
  • Handle: @contact_regions
  • Preview:
  • Filesystem Path: src/components/molecules/contact/contact_regions/contact_regions.html
  • Referenced by (1): @contact

There are no notes for this item.