Textbox Sequence

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="textbox-sequence__wrapper">
    <div class="textbox-sequence__box--a">
        <h3 class="textbox-sequence__header"> 1.<br>Deine Bewerbung</h3>
        <div class="textbox-sequence__text">Schicke Deine Bewerbung mit Lebenslauf an Uschi Nettersheim (jobs@innoq.com). Du erhältst die erste Rückmeldung so schnell wie möglich (innerhalb weniger Tage).</div>
        <div class="icon icon--brand-primary icon-arrow-drawn-upright textbox-sequence__icon--topright"></div>
    </div>

    <div class="textbox-sequence__box--b">
        <h3 class="textbox-sequence__header"> 2.<br>Kennenlernen</h3>
        <div class="textbox-sequence__text">Wir vereinbaren mit Dir ein erstes Vorgespräch mit einem der Geschäftsführer, bei dem wir einen ersten Eindruck von Dir gewinnen möchten. Hier klären wir, was du bei uns machen willst und welche Ausgangslage du mitbringst. Außerdem klären wir grobe Rahmenbedingungen.</div>
        <div class="icon icon--brand-primary icon-arrow-drawn-downright textbox-sequence__icon--bottomright"></div>
    </div>

    <div class="textbox-sequence__box--c">
        <h3 class="textbox-sequence__header"> 3.<br>Gespräch mit den Geschäftsführern</h3>
        <div class="textbox-sequence__text">Du wirst ein Bewerbungsgespräch mit zwei der Geschäftsführer via Zoom haben, bei dem wir Dich noch besser kennenlernen. Dauer: ca. 2 Stunden. Was ist deine Geschichte? Welche Erfahrungen bringst Du mit und was möchtest Du bei uns tun? Warum möchtest Du bei uns arbeiten? Bei uns gibt es außerdem keine Coding Challenge wie in anderen Unternehmen. Überzeug uns einfach von dem, was du weißt in einem kurzen Fachgespräch. Außerdem werden wir Dir alles über INNOQ erzählen, was du möchtest. Außerdem sprechen wir hier auch über deine Gehaltsvorstellungen und wann Du bei uns anfangen kannst.</div>
        <div class="icon icon--brand-primary icon-arrow-drawn-downleft textbox-sequence__icon--bottomleft"></div>
    </div>

    <div class="textbox-sequence__box--d">
        <h3 class="textbox-sequence__header"> 4.<br>Gespräch mit anderen Teammitgliedern</h3>
        <div class="textbox-sequence__text">Optional gibt es noch ein Gespräch mit anderen Teammitgliedern deines Fachgebiets.</div>
    </div>

    <div class="textbox-sequence__box--e">
        <h3 class="textbox-sequence__header"> 5.<br>Unser Jobangebot</h3>
        <div class="textbox-sequence__text">Wir schicken Dir einen Vertragsentwurf zu, bei dem Anmerkungen immer willkommen sind und finalisieren den Bewerbungsprozess mit der digitalen Unterschrift. Und dann kann es losgehen!</div>
        <div class="icon icon--brand-primary icon-arrow-drawn-downleft-2 textbox-sequence__icon--topright"></div>
        <div class="icon icon--brand-primary icon-arrow-drawn-downright-2 textbox-sequence__icon--bottomright"></div>
    </div>

    <div class="textbox-sequence__box--f">
        <h3 class="textbox-sequence__header"> 6.<br>Dein Einstieg</h3>
        <div class="textbox-sequence__text">Du bekommst eine*n Mentor*in an Deine Seite, um Dich bestmöglich zu unterstützen. Die ersten Tage stehen im Zeichen des Ankommens. Du wirst Deine Teammitglieder kennenlernen sowie unsere Kultur, bevor Du dann in Deinem ersten Projekt starten wirst!</div>
    </div>
</div>


        <div class="textbox-sequence__wrapper">
    <div class="textbox-sequence__box--a">
        <h3 class="textbox-sequence__header"> 1.<br>Deine Bewerbung</h3>
        <div class="textbox-sequence__text">Schicke Deine Bewerbung mit Lebenslauf an Uschi Nettersheim (jobs@innoq.com). Du erhältst die erste Rückmeldung so schnell wie möglich (innerhalb weniger Tage).</div>
        <div class="icon icon--brand-primary icon-arrow-drawn-upright textbox-sequence__icon--topright"></div>
    </div>

    <div class="textbox-sequence__box--b">
        <h3 class="textbox-sequence__header"> 2.<br>Kennenlernen</h3>
        <div class="textbox-sequence__text">Wir vereinbaren mit Dir ein erstes Vorgespräch mit einem der Geschäftsführer, bei dem wir einen ersten Eindruck von Dir gewinnen möchten. Hier klären wir, was du bei uns machen willst und welche Ausgangslage du mitbringst. Außerdem klären wir grobe Rahmenbedingungen.</div>
        <div class="icon icon--brand-primary icon-arrow-drawn-downright textbox-sequence__icon--bottomright"></div>
    </div>

    <div class="textbox-sequence__box--c">
        <h3 class="textbox-sequence__header"> 3.<br>Gespräch mit den Geschäftsführern</h3>
        <div class="textbox-sequence__text">Du wirst ein Bewerbungsgespräch mit zwei der Geschäftsführer via Zoom haben, bei dem wir Dich noch besser kennenlernen. Dauer: ca. 2 Stunden. Was ist deine Geschichte? Welche Erfahrungen bringst Du mit und was möchtest Du bei uns tun? Warum möchtest Du bei uns arbeiten? Bei uns gibt es außerdem keine Coding Challenge wie in anderen Unternehmen. Überzeug uns einfach von dem, was du weißt in einem kurzen Fachgespräch. Außerdem werden wir Dir alles über INNOQ erzählen, was du möchtest. Außerdem sprechen wir hier auch über deine Gehaltsvorstellungen und wann Du bei uns anfangen kannst.</div>
        <div class="icon icon--brand-primary icon-arrow-drawn-downleft textbox-sequence__icon--bottomleft"></div>
    </div>

    <div class="textbox-sequence__box--d">
        <h3 class="textbox-sequence__header"> 4.<br>Gespräch mit anderen Teammitgliedern</h3>
        <div class="textbox-sequence__text">Optional gibt es noch ein Gespräch mit anderen Teammitgliedern deines Fachgebiets.</div>
    </div>

    <div class="textbox-sequence__box--e">
        <h3 class="textbox-sequence__header"> 5.<br>Unser Jobangebot</h3>
        <div class="textbox-sequence__text">Wir schicken Dir einen Vertragsentwurf zu, bei dem Anmerkungen immer willkommen sind und finalisieren den Bewerbungsprozess mit der digitalen Unterschrift. Und dann kann es losgehen!</div>
        <div class="icon icon--brand-primary icon-arrow-drawn-downleft-2 textbox-sequence__icon--topright"></div>
        <div class="icon icon--brand-primary icon-arrow-drawn-downright-2 textbox-sequence__icon--bottomright"></div>
    </div>

    <div class="textbox-sequence__box--f">
        <h3 class="textbox-sequence__header"> 6.<br>Dein Einstieg</h3>
        <div class="textbox-sequence__text">Du bekommst eine*n Mentor*in an Deine Seite, um Dich bestmöglich zu unterstützen. Die ersten Tage stehen im Zeichen des Ankommens. Du wirst Deine Teammitglieder kennenlernen sowie unsere Kultur, bevor Du dann in Deinem ersten Projekt starten wirst!</div>
    </div>
</div>


        
            
            /* No context defined. */

File:

Content:


                                .textbox-sequence__header {
  @extend %heading-font-heavy;
  @extend %manual-hyphenation;

  display: inline;

  margin-bottom: $spacer-base;
  padding: ms(-16);

  font-size: $font-size-lg;
  line-height: 1.38; //magic number
  color: $service-intro-text-color;

  background-color: $brand-primary;
  box-shadow:
    $spacer-xxs 0 0 $brand-primary,
    -$spacer-xxs 0 0 $brand-primary;
  box-decoration-break: clone;
}

.textbox-sequence__text {
  @extend %heading-font-regular;

  margin: $spacer-xs 0 $spacer-sm 0;
  font-size: $font-size-base;
  line-height: $paragraph-line-height;
  color: $service-intro-text-color;

  a {
    color: $service-intro-text-color;
  }
}

.textbox-sequence__wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  width: 100%;
  padding: 0 $spacer-sm;

  background-color: $brand-white;
}

.textbox-sequence__icon--bottomleft,
.textbox-sequence__icon--bottomright,
.textbox-sequence__icon--topright {
  display: none;
}

@media screen and (min-width: $grid-breakpoint-md-lg) {
  .textbox-sequence__wrapper {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(auto, 10rem);

    padding: 0;
  }

  .textbox-sequence__text {
    font-size: $font-size-sm;
  }

  .textbox-sequence__box--a {
    position: relative;
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    align-self: start;
  }

  .textbox-sequence__box--b {
    position: relative;
    grid-column: 3 / 5;
    grid-row: 1 / 3;
    align-self: start;
  }

  .textbox-sequence__box--c {
    position: relative;
    grid-column: 5 / 7;
    grid-row: 2 / 6;
    align-self: start;
  }

  .textbox-sequence__box--d {
    position: relative;
    grid-column: 3 / 5;
    grid-row: 5 / 7;
    align-self: start;
  }

  .textbox-sequence__box--e {
    position: relative;
    grid-column: 1 / 3;
    grid-row: 6 / 8;
    align-self: start;
  }

  .textbox-sequence__box--f {
    position: relative;

    grid-column: 3 / 5;
    grid-row: 8 / 10;
    align-self: start;

    margin-top: -40px;
  }

  .textbox-sequence__icon--topright {
    position: absolute;
    top: -5rem;
    right: 0;
    display: block;

    &--text-only {
      top: -7rem;
    }
  }

  .textbox-sequence__icon--bottomright {
    position: absolute;
    right: 0;
    bottom: -6rem;
    display: block;
  }

  .textbox-sequence__icon--bottomleft {
    position: absolute;
    bottom: -5rem;
    left: -2rem;
    display: block;
  }
}

URL: /components/raw/textbox-sequence/_textbox-sequence.scss
Filesystem Path: components/04-molecules/textbox-sequence/_textbox-sequence.scss
Size: 2.5 KB

Handle: @textbox-sequence
Preview:
- With layout
- Component only
Filesystem Path: components/04-molecules/textbox-sequence/textbox-sequence.html

No notes defined.