HIDA - Helmholtz Information and Data Science Academy

Teaser Application 

<div class="teaser-application">
    <div class="teaser-application__inner">
        <div class="teaser-applcation__headline">
            <h2 class="headline headline--module-2">Ich will mich bewerben</h2>
        </div>
        <div class="teaser-application__text large"> In venenatis bibendum blandit neque. Vulputate nunc neque neque sed diam sed urna.</div>
        <div class="teaser-application__subtext large"> Zu welchem Partner gehört Deine Heimatinstitution?</div>
        <ul class="teaser-application__link-list">
            <li class="teaser-application__link"><a class="button button--tertiary" target="_blank" href="#"><span class="button__inner"><span class="button__text">Helmholtz-gemeinschaft (Deutschland)</span><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-arrow-up-right"></use>
                        </svg></span></a></li>
            <li class="teaser-application__link"><a class="button button--tertiary" target="_blank" href="#"><span class="button__inner"><span class="button__text">NORA (Norwegen)</span><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-arrow-up-right"></use>
                        </svg></span></a></li>
            <li class="teaser-application__link"><a class="button button--tertiary" target="_blank" href="#"><span class="button__inner"><span class="button__text">IDSAI (Israel)</span><svg class="icon icon--arrow-up-right" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-arrow-up-right"></use>
                        </svg></span></a></li>
        </ul>
    </div>
</div>
 
#{tag || 'div'}.teaser-application()&attributes(attr)
  .teaser-application__inner
    .teaser-applcation__headline
      +include('@headline--module-2', headline)
    .teaser-application__text.large  #{text}
    .teaser-application__subtext.large  #{subtext}
    ul.teaser-application__link-list
      each item in items
        li.teaser-application__link
          +include('@button', item.buttonExternal)
 
{
  "headline": {
    "text": "Ich will mich bewerben"
  },
  "text": "In venenatis bibendum blandit neque. Vulputate nunc neque neque sed diam sed urna.",
  "subtext": "Zu welchem Partner gehört Deine Heimatinstitution?",
  "items": [
    {
      "buttonExternal": {
        "href": "#",
        "iconAfter": "arrow-up-right",
        "text": "Helmholtz-gemeinschaft (Deutschland)",
        "style": "tertiary",
        "external": true
      }
    },
    {
      "buttonExternal": {
        "href": "#",
        "iconAfter": "arrow-up-right",
        "text": "NORA (Norwegen)",
        "style": "tertiary",
        "external": true
      }
    },
    {
      "buttonExternal": {
        "href": "#",
        "iconAfter": "arrow-up-right",
        "text": "IDSAI (Israel)",
        "style": "tertiary",
        "external": true
      }
    }
  ]
}
  • Content: 
    .teaser-application {
  background-color: $color-gray-xxlight;
  padding: 4rem 1.5rem;
  position: relative;

  @include mq($from: m) {
    padding: 6rem 3rem;
  }

  @include mq($from: xl) {
    padding: 8rem 9rem;
  }
}

.teaser-application__inner {
  margin: 0 auto;
  max-width: 127rem;
}

.teaser-application__text {
  padding-top: 2rem;
}

.teaser-application__subtext {
  padding-top: 4rem;

  @include mq($from: m) {
    padding-top: 6rem;
  }
}

.teaser-application__link-list {
  list-style-type: none;
  display: flex;
  gap: 2rem;
  padding-top: 2rem;
  padding-left: 0;
  flex-wrap: wrap;
}
  • URL: /components/raw/teaser-application/teaser-application.scss
  • Filesystem Path: src/components/organisms/teaser-application/teaser-application.scss
  • Size: 603 Bytes

There are no notes for this item.