Service Intro 

<div class="service-intro-grid">
    <clickable-area class="service-intro">
        <h2 class="service-intro__header"><a href="#">Strategie- und Technologieberatung</a></h2>
        <div class="service-intro__text">
            Nichts interessiert uns mehr als neue Technologie. Doch bei Strategie
            und Technologieberatung geht es uns nicht um das neueste, sondern um das,
            was am besten zu Ihnen und Ihren Aufgabenstellungen passt. Dank unserer
            branchenübergreifenden Erfahrung können wir Ihnen dazu die richtigen
            Fragen stellen und die richtigen Antworten gleich dazu liefern. Dabei
            profitieren Sie von unserem Wissensvorsprung. Damit Ihre Entscheidung
            zukunftsfähig ist.
        </div>
        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    </clickable-area>

    <clickable-area class class="service-intro">
        <h2 class="service-intro__header"><a href="#">Entwicklung digitaler Geschäftsmodelle</a></h2>
        <div class="service-intro__text">
            Ihre Fachexpertise und unser Entwicklung-Knowhow sind eine
            erfolgsversprechende Kombination. Im Software-as-a-Service-Modell
            (SaaS) transformieren wir Ihr neues oder bestehendes Geschäftsmodell
            in einen innovativen, digitalen Service für Ihre Kunden. Das gilt
            selbstverständlich für den gesamten Lebenszyklus – fachlich,
            technisch und kommerziell.
        </div>
        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    </clickable-area>

    <clickable-area class class="service-intro">
        <h2 class="service-intro__header"><a href="#">Softwarearchitektur und -entwicklung</a></h2>
        <div class="service-intro__text">
            Unsere langjährige Erfahrung als Softwarearchitekten und -entwickler
            lehrt uns vor allem eines: DIE Lösung gibt es nicht. Deshalb nehmen
            wir Ihre Software- und Systemarchitektur genau unter die Lupe und
            analysieren Ihre Unternehmensprozesse im Detail. Und deshalb arbeiten
            wir auch unabhängig von Herstellern und Produkten. Das Ergebnis ist
            so vielfältig, wie unsere Kunden. Doch ob Modernisierungskonzept oder
            neu entwickelte Individualsoftware, eines ist immer gleich:
            Der Nutzer steht im Mittelpunkt.
        </div>
        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    </clickable-area>

    <clickable-area class class="service-intro">
        <h2 class="service-intro__header"><a href="#">Digitale Plattformen und Infrastrukturen</a></h2>
        <div class="service-intro__text">
            Noch in Arbeit.
        </div>
        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    </clickable-area>

    <clickable-area class class="service-intro">
        <h2 class="service-intro__header"><a href="#">Wissenstransfer, Coaching und Trainings</a></h2>
        <div class="service-intro__text">
            Unsere öffentlichen Trainings, Inhouse-Schulungen und Coaching
            gestalten wir so, wie wir sie als Teilnehmer gerne selbst erleben:
            Die Schulungen sind interaktiv und unsere Trainer sind
            praktizierende Softwareentwickler und -architekten. Sie wenden
            täglich an, was sie lehren und sind immer auf dem neuesten
            technischen Stand. Und sie teilen gerne ihr Knowhow aus der Praxis.
        </div>
        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    </clickable-area>
</div>
 
<div class="service-intro-grid">
    <clickable-area class="service-intro">
        <h2 class="service-intro__header"><a href="#">Strategie- und Technologieberatung</a></h2>
        <div class="service-intro__text">
            Nichts interessiert uns mehr als neue Technologie. Doch bei Strategie
            und Technologieberatung geht es uns nicht um das neueste, sondern um das,
            was am besten zu Ihnen und Ihren Aufgabenstellungen passt. Dank unserer
            branchenübergreifenden Erfahrung können wir Ihnen dazu die richtigen
            Fragen stellen und die richtigen Antworten gleich dazu liefern. Dabei
            profitieren Sie von unserem Wissensvorsprung. Damit Ihre Entscheidung
            zukunftsfähig ist.
        </div>
        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    </clickable-area>

    <clickable-area class class="service-intro">
        <h2 class="service-intro__header"><a href="#">Entwicklung digitaler Geschäftsmodelle</a></h2>
        <div class="service-intro__text">
            Ihre Fachexpertise und unser Entwicklung-Knowhow sind eine
            erfolgsversprechende Kombination. Im Software-as-a-Service-Modell
            (SaaS) transformieren wir Ihr neues oder bestehendes Geschäftsmodell
            in einen innovativen, digitalen Service für Ihre Kunden. Das gilt
            selbstverständlich für den gesamten Lebenszyklus – fachlich,
            technisch und kommerziell.
        </div>
        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    </clickable-area>

    <clickable-area class class="service-intro">
        <h2 class="service-intro__header"><a href="#">Softwarearchitektur und -entwicklung</a></h2>
        <div class="service-intro__text">
            Unsere langjährige Erfahrung als Softwarearchitekten und -entwickler
            lehrt uns vor allem eines: DIE Lösung gibt es nicht. Deshalb nehmen
            wir Ihre Software- und Systemarchitektur genau unter die Lupe und
            analysieren Ihre Unternehmensprozesse im Detail. Und deshalb arbeiten
            wir auch unabhängig von Herstellern und Produkten. Das Ergebnis ist
            so vielfältig, wie unsere Kunden. Doch ob Modernisierungskonzept oder
            neu entwickelte Individualsoftware, eines ist immer gleich:
            Der Nutzer steht im Mittelpunkt.
        </div>
        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    </clickable-area>

    <clickable-area class class="service-intro">
        <h2 class="service-intro__header"><a href="#">Digitale Plattformen und Infrastrukturen</a></h2>
        <div class="service-intro__text">
            Noch in Arbeit.
        </div>
        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    </clickable-area>

    <clickable-area class  class="service-intro">
        <h2 class="service-intro__header"><a href="#">Wissenstransfer, Coaching und Trainings</a></h2>
        <div class="service-intro__text">
            Unsere öffentlichen Trainings, Inhouse-Schulungen und Coaching
            gestalten wir so, wie wir sie als Teilnehmer gerne selbst erleben:
            Die Schulungen sind interaktiv und unsere Trainer sind
            praktizierende Softwareentwickler und -architekten. Sie wenden
            täglich an, was sie lehren und sind immer auf dem neuesten
            technischen Stand. Und sie teilen gerne ihr Knowhow aus der Praxis.
        </div>
        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
    </clickable-area>
</div>
 
/* No context defined. */
  • Content: 
    .service-intro-grid {
  display: grid;
  grid-row-gap: $spacer-xl;
}

.service-intro {
  @extend %link-unstyled;

  justify-self: center;
  width: 90%;
}

.service-intro__header {
  @extend %heading-font-heavy;
  @extend %manual-hyphenation;

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

  a,
  a:not([class]) {
    padding: ms(-16);

    background-color: $brand-primary;
    box-shadow:
      $spacer-xxs 0 0 $brand-primary,
      -$spacer-xxs 0 0 $brand-primary;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    &:hover {
      background-color: $brand-primary;
    }
  }
}

.service-intro__text {
  @extend %heading-font-bold;

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

@media screen and (min-width: $grid-breakpoint-md-lg) {
  .service-intro-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: $spacer-sm;
  }

  .service-intro {
    justify-self: flex-end;
    width: 100%;
    padding: 0 $spacer-lg;
    border-right: 1px solid $brand-gray-25;

    &:nth-child(2n) {
      border-right: 0;
    }
  }

  .service-intro__header {
    margin-bottom: $spacer-base;
    font-size: $font-size-xl;
    line-height: 1.35; //magic number
  }

  .service-intro__text {
    margin-bottom: $spacer-md;
    font-size: $font-size-sm;
  }
}

@media screen and (min-width: $grid-breakpoint-xl) {
  .service-intro-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .service-intro {
    &:nth-child(2n) {
      border-right: 1px solid $brand-gray-25;
    }

    &:nth-child(3n) {
      border-right: 0;
    }
  }
}
  • URL: /components/raw/service-intro/_service-intro.scss
  • Filesystem Path: components/04-molecules/service-intro/_service-intro.scss
  • Size: 1.8 KB

No notes defined.