Service Intro

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="service-intro-grid">
    <div 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>
        <a href="#" class="service-intro__link"><span class="icon-svg icon-arrow-long-right icon--brand-primary"></span></a>
    </div>
    <div 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>
        <a href="#" class="service-intro__link"><span class="icon-svg icon-arrow-long-right icon--brand-primary"></span></a>
    </div>
    <div 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>
        <a href="#" class="service-intro__link"><span class="icon-svg icon-arrow-long-right icon--brand-primary"></span></a>
    </div>
    <div 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>
        <a href="#" class="service-intro__link"><span class="icon-svg icon-arrow-long-right icon--brand-primary"></span></a>
    </div>
    <div 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>
        <a href="#" class="service-intro__link"><span class="icon-svg icon-arrow-long-right icon--brand-primary"></span></a>
    </div>
</div>


        <div class="service-intro-grid">
    <div 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>
        <a href="#" class="service-intro__link">
            <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
        </a>
    </div>

    <div 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>
        <a href="#" class="service-intro__link">
            <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
        </a>
    </div>

    <div 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>
        <a href="#" class="service-intro__link">
            <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
        </a>
    </div>

    <div 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>
        <a href="#" class="service-intro__link">
            <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
        </a>
    </div>

    <div 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>
        <a href="#" class="service-intro__link">
            <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
        </a>
    </div>
</div>


        
            
            /* No context defined. */

File:

Content:


                                // sass-lint:disable no-vendor-prefixes,

.service-intro {
  display: flex;
  flex-direction: column;
  width: 100%; // FF fix: take full width of grid-area

  & + & {
    margin-top: $spacer-lg;
  }
}

.service-intro__header {
  @extend %h1;

  margin-bottom: $spacer-md;
  line-height: 1.38;
  color: $service-intro-text-color;
  font-size: $font-size-xl;

  a,
  a:not([class]) {
    box-shadow: $spacer-xxs 0 0 $brand-primary, -$spacer-xxs 0 0 $brand-primary;
    background-color: $brand-primary;
    padding: ms(-16);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

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

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

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

@media screen and (min-width: $grid-breakpoint-md-lg) {
  .service-intro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: $spacer-lg;
    grid-column-gap: $spacer-lg;
  }

  .service-intro {
    border-right: 1px solid $brand-gray-25;
    padding: $spacer-sm $spacer-base $spacer-base 0;
    grid-column: span 2;

    & + & {
      margin-top: 0;
    }

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

  .service-intro__header {
    margin-bottom: $spacer-base;
    line-height: 1.35;
    font-size: $font-size-xxl;
  }

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

@media screen and (min-width: $grid-breakpoint-xl) {
  .service-intro-grid {
    grid-template-columns: repeat(6, 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/02-molecules/visual-elements/service-intro/_service-intro.scss
Size: 1.8 KB

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

No notes defined.