<div class="message-box">
    <div class="message-box__content"><b>Gleich geschafft!</b> Nur noch 1 Schritt bis zum Abschluss.
    </div>
    <div class="message-box__icon">
        <svg class="icon icon--thumbs-up" id="icon-b6b2" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-thumbs-up"></use>
</svg>
    </div>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render box
.message-box&attributes(attr)
  //- Box content
  if content
    .message-box__content
      != renderPug(content)

  //- Icon
  if icon
    .message-box__icon
      != include('@icon', {icon})
{
  "icon": "thumbs-up",
  "content": "| #[b Gleich geschafft!] Nur noch 1 Schritt bis zum Abschluss.\n"
}
  • Content:
    .message-box {
      align-items: center;
      background-color: $color-sand;
      border-radius: 0.4rem;
      display: flex;
      justify-content: space-between;
      padding: 1.5rem;
    
      @include mq($from: m) {
        padding: 1.5rem 2.5rem;
      }
    }
    
    .message-box__icon {
      font-size: 2.4rem;
      opacity: 0.25;
    }
    
    .message-box__content {
      font-size: 1.5rem;
    }
    
  • URL: /components/raw/message-box/message-box.scss
  • Filesystem Path: src/components/organisms/message-box/message-box.scss
  • Size: 337 Bytes

There are no notes for this item.