hkk Frontend 2017

Highlight-Notiz 

<!-- Default -->
<article class="highlight-notice">
    <div class="highlight-notice__inner">
        <div class="highlight-notice__image">
            <div class="image-wrap"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/300x190/cccaca/333333.png" />
                <button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-3183" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
            </div>
        </div>
        <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-313b" type="button">Ein Button
</button>
            </div>
        </div>
    </div>
</article>


<!-- No image -->
<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-60e8" type="button">Ein Button
</button>
            </div>
        </div>
    </div>
</article>


<!-- With icon -->
<article class="highlight-notice">
    <div class="highlight-notice__inner">
        <div class="highlight-notice__icon">
            <svg class="icon icon--big-nourishment" id="icon-2054" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-nourishment"></use>
</svg>
        </div>
        <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-b39b" type="button">Ein Button
</button>
            </div>
        </div>
    </div>
</article>


<!-- Secondary -->
<article class="highlight-notice highlight-notice--secondary">
    <div class="highlight-notice__inner">
        <div class="highlight-notice__image">
            <div class="image-wrap"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/300x190/cccaca/333333.png" />
                <button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-abf4" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
            </div>
        </div>
        <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--white-blue button--outline" id="button-d6bc" type="button">Ein Button
</button>
            </div>
        </div>
    </div>
</article>


<!-- Tertiary -->
<article class="highlight-notice highlight-notice--tertiary">
    <div class="highlight-notice__inner">
        <div class="highlight-notice__image">
            <div class="image-wrap"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/300x190/cccaca/333333.png" />
                <button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-7cc1" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
            </div>
        </div>
        <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--white-red" id="button-b783" 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 icon
      .highlight-notice__icon
        != include('@icon', { icon })

    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))
 
/* Default */
{
  "headline": "Ich bin eine Zusatzinfo",
  "text": "Die Organisation setzt stark auf Mitmachaktionen. Weitere Informationen gibt es hier:",
  "button": {
    "text": "Ein Button",
    "modifier": "red"
  },
  "image": {
    "image": "https://via.placeholder.com/300x190/cccaca/333333.png"
  }
}


/* No image */
{
  "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
}


/* With icon */
{
  "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,
  "icon": "big-nourishment"
}


/* Secondary */
{
  "headline": "Ich bin eine Zusatzinfo",
  "text": "Die Organisation setzt stark auf Mitmachaktionen. Weitere Informationen gibt es hier:",
  "button": {
    "text": "Ein Button",
    "modifier": "white-blue",
    "outline": true
  },
  "image": {
    "image": "https://via.placeholder.com/300x190/cccaca/333333.png"
  },
  "style": "secondary"
}


/* Tertiary */
{
  "headline": "Ich bin eine Zusatzinfo",
  "text": "Die Organisation setzt stark auf Mitmachaktionen. Weitere Informationen gibt es hier:",
  "button": {
    "text": "Ein Button",
    "modifier": "white-red"
  },
  "image": {
    "image": "https://via.placeholder.com/300x190/cccaca/333333.png"
  },
  "style": "tertiary"
}
  • 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__icon {
  color: $color-sand-dark;
  font-size: 14rem;
  line-height: 1;
  text-align: center;

  .highlight-notice--secondary &,
  .highlight-notice--tertiary & {
    color: #fff;
  }

  @include mq($from: l) {
    flex: 1 1 25.5rem;
  }
}

.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__icon + .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.8 KB

There are no notes for this item.