<article class="highlight-notice">
    <div class="highlight-notice__inner">
        <div class="highlight-notice__content">
            <h3 class="headline highlight-notice__headline headline--headline-3">Ich bin eine Zusatzinfo
            </h3>
            <p class="highlight-notice__text">Die Organisation setzt stark auf Mitmachaktionen. Weitere Informationen gibt es hier:</p>
            <div class="highlight-notice__button">
                <button class="button highlight-notice__button button--red" id="button-cfd6" type="button">Ein Button
</button>
            </div>
        </div>
    </div>
</article>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Process options
  if (style) attr.class.push(`highlight-notice--${style}`);

//- Render highlight-notice
#{tag || 'article'}.highlight-notice&attributes(attr)
  .highlight-notice__inner
    if image
      .highlight-notice__image
        != include('@image', image)

    if headline || link || text
      .highlight-notice__content
        if headline
          != include('@headline--headline-3', { attr: { class: 'highlight-notice__headline' }, text: headline })

        p.highlight-notice__text #{text}

        .highlight-notice__button
          != include('@button', Object.assign({ attr: { class: 'highlight-notice__button' } }, button))
{
  "headline": "Ich bin eine Zusatzinfo",
  "text": "Die Organisation setzt stark auf Mitmachaktionen. Weitere Informationen gibt es hier:",
  "button": {
    "text": "Ein Button",
    "modifier": "red"
  },
  "image": null
}
  • Content:
    $highlight-notice-border-width: 1px;
    
    .highlight-notice {
      border: $highlight-notice-border-width solid $color-anthracite;
      padding: 3rem;
      position: relative;
    
      @include mq($from: l) {
        padding: 3rem 3.5rem;
      }
    }
    
    .highlight-notice--secondary {
      background-color: $color-blue;
      border-color: $color-blue;
      color: #fff;
    }
    
    .highlight-notice--tertiary {
      background-color: $color-red;
      border-color: $color-red;
      color: #fff;
    }
    
    .highlight-notice__inner {
      display: flex;
      flex-direction: column;
    
      @include mq($from: l) {
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
      }
    }
    
    .highlight-notice__headline {
      font-size: 2.4rem;
      font-weight: bold;
      margin-bottom: 1rem;
    
      .highlight-notice--secondary &,
      .highlight-notice--tertiary & {
        color: #fff;
      }
    }
    
    .highlight-notice__image {
      margin-bottom: 3rem;
    
      @include mq($from: l) {
        flex: 1 1 25.5rem;
        margin-bottom: 0;
      }
    }
    
    .highlight-notice__text {
      line-height: 1.5;
      margin-bottom: 3rem;
    }
    
    .highlight-notice__content {
      flex: 0 1 100%;
    }
    
    .highlight-notice__image + .highlight-notice__content {
      @include mq($from: l) {
        flex: 1 1 calc(100% - 28.5rem);
        margin-bottom: 0;
        margin-right: 3rem;
      }
    }
    
    .highlight-notice__button {
      @include mq($until: l) {
        width: 100%;
      }
    }
    
    .overview-page__highlight-notice {
      margin-bottom: 7.5rem;
    }
    
  • URL: /components/raw/highlight-notice/highlight-notice.scss
  • Filesystem Path: src/components/molecules/highlight-notice/highlight-notice.scss
  • Size: 1.4 KB

There are no notes for this item.