Highlight Card 

<div class="highlight-card bg-image-edition-24">
    <div class="highlight-card__content">
        <h2 class="highlight-card__title">Soziotechnische Architekturen als Wettbewerbsvorteil</h2>
        <p class="highlight-card__text">In der heutigen Geschäftswelt dient technologischer Fortschritt nicht nur der Effizienzsteigerung, sondern eröffnet auch neue Geschäftsfelder, die ohne diese Technologien undenkbar wären. Die optimale Nutzung neuer Technologien wird damit zu einem zentralen Wettbewerbsvorteil. IT-Entscheider:innen stehen jedoch zunehmend vor der Herausforderung, dass Technologie allein nicht ausreicht. Stattdessen müssen Unternehmen sich als soziotechnisches System verstehen, in dem technische Systeme und menschliche Interaktionen eng miteinander verzahnt sind.
        </p>
        <a href="#" class="highlight-card__link link-teaser">Mehr erfahren</a>
    </div>
</div>
 
<div class="highlight-card bg-image-edition-24">
    <div class="highlight-card__content">
        <h2 class="highlight-card__title">{{headline}}</h2>
        <p class="highlight-card__text">{{text}}</p>
        <a href="{{link}}" class="highlight-card__link link-teaser">{{linkText}}</a>
    </div>
</div>
 
{
  "headline": "Soziotechnische Architekturen als Wettbewerbsvorteil",
  "text": "In der heutigen Geschäftswelt dient technologischer Fortschritt nicht nur der Effizienzsteigerung, sondern eröffnet auch neue Geschäftsfelder, die ohne diese Technologien undenkbar wären. Die optimale Nutzung neuer Technologien wird damit zu einem zentralen Wettbewerbsvorteil. IT-Entscheider:innen stehen jedoch zunehmend vor der Herausforderung, dass Technologie allein nicht ausreicht. Stattdessen müssen Unternehmen sich als soziotechnisches System verstehen, in dem technische Systeme und menschliche Interaktionen eng miteinander verzahnt sind.\n",
  "linkText": "Mehr erfahren",
  "link": "#"
}
  • Content: 
    $highlight-card-border-width: $spacer-sm;

.highlight-card {
  @extend %page-header;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 70vh;
  padding: $spacer-lg $spacer-md;

  border: $highlight-card-border-width solid $highlight-card-border-color;
}

.highlight-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 800px;
  padding: $spacer-lg $spacer-md;

  text-align: center;

  background-color: $highlight-card-content-bg-color;
}

.highlight-card__title {
  @extend %h2;

  color: $highlight-card-title-color;
}

.highlight-card__text {
  @extend %body-font-italic;

  margin-top: $spacer-md;
  font-size: $font-size-sm;
  color: $highlight-card-text-color;
}

.highlight-card__link {
  margin-top: $spacer-lg;
}

// Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  .highlight-card {
    min-height: 80vh;
    padding: $spacer-xl;
  }

  .highlight-card__content {
    padding: $spacer-xl $spacer-lg;
  }

  .highlight-card__text {
    font-size: $font-size-md;
  }
}

@media screen and (min-width: $grid-breakpoint-lg) {
  .highlight-card__content {
    max-width: 900px;
  }
}
  • URL: /components/raw/highlight-card/_highlight-card.scss
  • Filesystem Path: components/04-molecules/highlight-card/_highlight-card.scss
  • Size: 1.2 KB
  • Handle: @highlight-card
  • Preview:
  • Filesystem Path: components/04-molecules/highlight-card/highlight-card.html

No notes defined.