<div class="box box--light-blue">
    <div class="box__content">
        <div class="box__headline">
            <h3 class="headline headline--headline-1">Das ist eine Headline einer Box
            </h3>
        </div>
        <ul class="icon-list icon-list--lined">
            <li class="icon-list__item">
                <a class="icon-block" href="#">
                    <svg class="icon icon-block__icon icon--internal-link" id="icon-17a8" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Interner Link
                </a>
            </li>
            <li class="icon-list__item">
                <a class="icon-block" href="#">
                    <svg class="icon icon-block__icon icon--external-link" id="icon-436b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>Externer Link
                </a>
            </li>
            <li class="icon-list__item">
                <a class="icon-block" href="#">
                    <svg class="icon icon-block__icon icon--download" id="icon-b8c2" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg>Download-Link<span class="icon-block__sub"> (PDF, 2MB)</span>
                </a>
            </li>
        </ul>
        <div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Weitere Informationen</span>
<svg class="icon icon--arrow-right" id="icon-048c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.class.push(`box--${color || 'light-blue'}`);

  //- Tool box
  if (tool) attr.class.push('box--tool');

  //- Growing box
  if (grow) attr.class.push('box--grow');

//- Render box
.box&attributes(attr)
  //- Icon
  if icon
    .box__icon
      != include('@icon', {icon})

  //- Box content
  .box__content
    //- Headline
    if headline
      .box__headline
        - headlineOptions = Object.assign({}, {text: headline, hkkPlus}, headlineOptions)
        != include('@headline--headline-1', headlineOptions)

    //- Content
    if content
      != renderPug(content)

    //- More link
    if link
      .box__more
        != include('@teaser-link', {link, text: more || 'Weitere Informationen'})
{
  "headline": "Das ist eine Headline einer Box",
  "color": "light-blue",
  "more": "Weitere Informationen",
  "link": "#",
  "hkkPlus": null,
  "headlineOptions": {
    "level": 3
  },
  "content": "!= include('@icon-list--lined')\n"
}
  • Content:
    .box {
      background-color: $color-steelgrey-light;
      display: flex;
      font-size: 1.5rem;
      margin-bottom: 3rem;
      padding: 2.5rem 2.5rem 1rem;
    
      @include mq($from: m) {
        display: block;
      }
    }
    
    .box--tool {
      .box__content {
        margin: 0 auto;
      }
    
      @include mq($from: m) {
        padding: 4rem 5rem 3rem;
      }
    }
    
    .box--bordered {
      background-color: transparent;
      border: 0.5rem solid $color-steelgrey-light;
      padding: 2rem 2rem 0.5rem;
    }
    
    .box--sand {
      background-color: $color-sand;
    
      .form-micro {
        margin-top: 3rem;
      }
    }
    
    .box--grow {
      @include mq($from: m) {
        height: 100%;
        margin: 0;
      }
    }
    
    .box__icon {
      color: rgba(#333, 0.2);
      font-size: 8rem;
      line-height: 1;
      margin-left: 1.5rem;
      order: 1;
      width: 8rem;
    
      @include mq($from: m) {
        margin-left: 0;
        padding-bottom: 2.5rem;
        padding-top: 0.5rem;
        text-align: center;
        width: 100%;
      }
    }
    
    .box__content {
      flex-shrink: 1;
      max-width: 100%;
    }
    
    .box__more {
      margin-bottom: 1.5rem;
    }
    
  • URL: /components/raw/box/box.scss
  • Filesystem Path: src/components/organisms/box/box.scss
  • Size: 985 Bytes

There are no notes for this item.