# Service Intro

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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

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

No notes defined.