Offices

Come say hello

We’re remote-first, but our offices are always open for coffee.

Lisbon Headquarters
Rua da Prata 120, 1100-420 Lisbon, Portugal
Mon–Fri, 9:00–18:00
+351 21 000 0000
Get directions to the Lisbon office (opens in a new tab)
Berlin Engineering hub
Torstraße 33, 10119 Berlin, Germany
Mon–Fri, 9:00–18:00
+49 30 0000 0000
Get directions to the Berlin office (opens in a new tab)
New York Sales and support
120 W 23rd St, New York, NY 10011, USA
Mon–Fri, 9:00–17:00
+1 212 000 0000
Get directions to the New York office (opens in a new tab)

@use 'sprucecss/scss/spruce' as *;

.locations-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__inner {
    display: flex;
    flex-direction: column;
    gap: spacer('l');
  }

  &__grid {
    @include clear-list;
    @include layout-grid('m', 17rem);

    // The items sit side by side: clear the stack margins of the base list style.
    > li {
      margin-block: 0;
      padding-block: 0;
    }
  }

  &__card {
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  &__image {
    aspect-ratio: 16 / 10;
    inline-size: 100%;
    object-fit: cover;
  }

  &__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: spacer('xs');
    padding: spacer('m');
  }

  &__city {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: font-size('h4');
    gap: spacer('xs');
    justify-content: space-between;
    margin-block: 0;
  }

  &__address,
  &__line {
    align-items: flex-start;
    color: color('text');
    display: flex;
    font-style: normal;
    gap: spacer('xs');
    margin: 0;

    svg {
      block-size: 1.1rem;
      color: color('primary');
      flex-shrink: 0;
      inline-size: 1.1rem;
      margin-block-start: 0.3em;
    }
  }

  &__directions {
    align-self: flex-start;
    margin-block-start: auto;
  }
}

<section class="locations-block" aria-labelledby="locations-title">
    <div class="container">
        <div class="locations-block__inner">
            <header class="block-heading">
                <p class="block-heading__eyebrow">Offices</p>
                <h2 class="block-heading__title" id="locations-title">Come say hello</h2>
                <p class="block-heading__text">We’re remote-first, but our offices are always open for coffee.</p>
            </header>
            <ul class="locations-block__grid" role="list">
                <li class="locations-block__card">
                    <img class="locations-block__image" src="https://images.unsplash.com/photo-1585208798174-6cedd86e019a?auto=format&amp;fit=crop&amp;w=700&amp;q=70" alt="" width="700" height="440" loading="lazy">
                    <div class="locations-block__body">
                        <h3 class="locations-block__city">Lisbon <span class="badge">Headquarters</span></h3>
                        <address class="locations-block__address"><svg class="locations-block__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/>
</svg>
 Rua da Prata 120, 1100-420 Lisbon, Portugal</address>
                        <p class="locations-block__line"><svg class="locations-block__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
</svg>
 Mon–Fri, 9:00–18:00</p>
                        <p class="locations-block__line"><svg class="locations-block__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/>
</svg>
 <a href="tel:+351210000000">+351 21 000 0000</a></p>
                        <a class="btn btn--soft-primary btn--sm locations-block__directions" href="https://www.openstreetmap.org/search?query=Rua%20da%20Prata%20120%2C%201100-420%20Lisbon%2C%20Portugal" target="_blank" rel="noopener">Get directions<span class="sr-only"> to the Lisbon office (opens in a new tab)</span></a>
                    </div>
                </li>
                <li class="locations-block__card">
                    <img class="locations-block__image" src="https://images.unsplash.com/photo-1560969184-10fe8719e047?auto=format&amp;fit=crop&amp;w=700&amp;q=70" alt="" width="700" height="440" loading="lazy">
                    <div class="locations-block__body">
                        <h3 class="locations-block__city">Berlin <span class="badge">Engineering hub</span></h3>
                        <address class="locations-block__address"><svg class="locations-block__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/>
</svg>
 Torstraße 33, 10119 Berlin, Germany</address>
                        <p class="locations-block__line"><svg class="locations-block__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
</svg>
 Mon–Fri, 9:00–18:00</p>
                        <p class="locations-block__line"><svg class="locations-block__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/>
</svg>
 <a href="tel:+493000000000">+49 30 0000 0000</a></p>
                        <a class="btn btn--soft-primary btn--sm locations-block__directions" href="https://www.openstreetmap.org/search?query=Torstra%C3%9Fe%2033%2C%2010119%20Berlin%2C%20Germany" target="_blank" rel="noopener">Get directions<span class="sr-only"> to the Berlin office (opens in a new tab)</span></a>
                    </div>
                </li>
                <li class="locations-block__card">
                    <img class="locations-block__image" src="https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?auto=format&amp;fit=crop&amp;w=700&amp;q=70" alt="" width="700" height="440" loading="lazy">
                    <div class="locations-block__body">
                        <h3 class="locations-block__city">New York <span class="badge">Sales and support</span></h3>
                        <address class="locations-block__address"><svg class="locations-block__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/>
</svg>
 120 W 23rd St, New York, NY 10011, USA</address>
                        <p class="locations-block__line"><svg class="locations-block__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
</svg>
 Mon–Fri, 9:00–17:00</p>
                        <p class="locations-block__line"><svg class="locations-block__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/>
</svg>
 <a href="tel:+12120000000">+1 212 000 0000</a></p>
                        <a class="btn btn--soft-primary btn--sm locations-block__directions" href="https://www.openstreetmap.org/search?query=120%20W%2023rd%20St%2C%20New%20York%2C%20NY%2010011%2C%20USA" target="_blank" rel="noopener">Get directions<span class="sr-only"> to the New York office (opens in a new tab)</span></a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>

Locations

Technical Details

Addresses use the address element; phone numbers are tel: links.
The directions link opens OpenStreetMap in a new tab and says so in its hidden text, together with the office name.
The photos are decorative (empty alt), because the city name is right below.
It combines the Badge component for the office label.
Override the content with locationsBlock.