Search

Careers

Careers

Join our team

We’re a small, remote-first team. Come build the tools you’d love to use.

6 open positions

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

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

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

  &__filter {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs') spacer('s');
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 48rem;

    .form-control {
      inline-size: auto;
      min-inline-size: 12rem;
    }
  }

  &__count {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    margin-block: 0;
    margin-inline-start: auto;
  }

  &__list {
    @include clear-list;
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 48rem;
    overflow: hidden;
  }

  &__job {
    align-items: center;
    background-color: color('surface');
    display: flex;
    gap: spacer('m');
    justify-content: space-between;
    margin: 0 !important;
    padding: spacer('m');
    position: relative;
    @include a11y-card-link('.careers-block__title a');

    & + & {
      border-block-start: config('border-width-base', $display) solid color('border');
    }

    &:hover {
      background-color: color('surface-muted');
    }
  }

  &__info {
    @include layout-stack('xxs');
  }

  &__title {
    font-size: font-size('h5');

    a {
      color: color('heading');
      text-decoration: none;

      &:focus-visible {
        outline: none;

        &::before {
          outline: 2px solid color('focus-ring');
          outline-offset: -2px;
        }
      }
    }
  }

  &__meta {
    color: color('muted');
    display: flex;
    flex-wrap: wrap;
    font-size: config('font-size-sm', $typography);
    gap: spacer('xxs') spacer('m');

    span {
      align-items: center;
      display: inline-flex;
      gap: spacer('xxs');
    }
  }

  &__icon {
    block-size: 1em;
    inline-size: 1em;
  }
}
<section class="careers-block" aria-labelledby="careers-title" data-careers>
    <div class="container">
        <div class="careers-block__inner">
            <header class="block-heading">
                <p class="block-heading__eyebrow">Careers</p>
                <h2 class="block-heading__title" id="careers-title">Join our team</h2>
                <p class="block-heading__text">We’re a small, remote-first team. Come build the tools you’d love to use.</p>
            </header>
            <div class="careers-block__filter">
                <label class="form-label" for="careers-team">Team</label>
                <select class="form-control" id="careers-team" data-careers-filter>
                    <option value="">All teams</option>
                    <option value="Engineering">Engineering</option>
                    <option value="Design">Design</option>
                    <option value="Marketing">Marketing</option>
                    <option value="Support">Support</option>
                </select>
                <p class="careers-block__count" aria-live="polite" data-careers-count>6 open positions</p>
            </div>
            <ul class="careers-block__list" role="list">
                <li class="careers-block__job" data-team="Engineering">
                    <div class="careers-block__info">
                        <h3 class="careers-block__title"><a href="#">Senior Frontend Engineer</a></h3>
                        <p class="careers-block__meta">
                            <span>Engineering</span>
                            <span><svg class="careers-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>
 Remote (EU)</span>
                        </p>
                    </div>
                    <span class="badge badge--primary">Full-time</span>
                </li>
                <li class="careers-block__job" data-team="Engineering">
                    <div class="careers-block__info">
                        <h3 class="careers-block__title"><a href="#">Developer Advocate</a></h3>
                        <p class="careers-block__meta">
                            <span>Engineering</span>
                            <span><svg class="careers-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>
 Remote</span>
                        </p>
                    </div>
                    <span class="badge badge--primary">Full-time</span>
                </li>
                <li class="careers-block__job" data-team="Design">
                    <div class="careers-block__info">
                        <h3 class="careers-block__title"><a href="#">Product Designer</a></h3>
                        <p class="careers-block__meta">
                            <span>Design</span>
                            <span><svg class="careers-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>
 Lisbon</span>
                        </p>
                    </div>
                    <span class="badge badge--primary">Full-time</span>
                </li>
                <li class="careers-block__job" data-team="Design">
                    <div class="careers-block__info">
                        <h3 class="careers-block__title"><a href="#">Design Systems Intern</a></h3>
                        <p class="careers-block__meta">
                            <span>Design</span>
                            <span><svg class="careers-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>
 Remote</span>
                        </p>
                    </div>
                    <span class="badge">Internship</span>
                </li>
                <li class="careers-block__job" data-team="Marketing">
                    <div class="careers-block__info">
                        <h3 class="careers-block__title"><a href="#">Content Marketer</a></h3>
                        <p class="careers-block__meta">
                            <span>Marketing</span>
                            <span><svg class="careers-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>
 Remote (US)</span>
                        </p>
                    </div>
                    <span class="badge">Part-time</span>
                </li>
                <li class="careers-block__job" data-team="Support">
                    <div class="careers-block__info">
                        <h3 class="careers-block__title"><a href="#">Customer Success Manager</a></h3>
                        <p class="careers-block__meta">
                            <span>Support</span>
                            <span><svg class="careers-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>
 Berlin</span>
                        </p>
                    </div>
                    <span class="badge badge--primary">Full-time</span>
                </li>
            </ul>
        </div>
    </div>
</section>
(() => {
  document.querySelectorAll('[data-careers]').forEach((block) => {
    const filter = block.querySelector('[data-careers-filter]');
    const count = block.querySelector('[data-careers-count]');
    const jobs = [...block.querySelectorAll('[data-team]')];

    filter.addEventListener('change', () => {
      let visible = 0;

      jobs.forEach((job) => {
        const isMatch = !filter.value || job.dataset.team === filter.value;

        job.hidden = !isMatch;
        visible += isMatch ? 1 : 0;
      });

      count.textContent = `${visible} open ${visible === 1 ? 'position' : 'positions'}`;
    });
  });
})();

Careers

On this page

A careers block with open positions and a team filter.

Technical Details

  • Each row is fully clickable through the job title link (a11y-card-link), with a focus ring on the whole row.
  • The team filter is a native select; the script filters the list and announces the number of positions in a polite live region. Without JavaScript, every job is listed.
  • It combines the Badge component for the employment type.
  • Override the content with careersBlock.

Documentation

Learn about Spruce CSS through our extensive documentation.

Read more
Documentation

Components

Explore our UI library of accessible components built with Spruce CSS.

Read more
Components

Blocks and Pages

Full-width page blocks and complete page templates, ready to copy.

Explore
Blocks and Pages

Find us on GitHub

Did you find a bug? Have an idea or a question? Please open an issue to help us develop the project.

GitHub