hkk Frontend 2017

Box: Icon Sand 

<div class="box box--sand">
    <div class="box__icon">
        <svg class="icon icon--big-calendar" id="icon-633d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-calendar"></use>
</svg>
    </div>
    <div class="box__content">
        <div class="box__headline">
            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Der Kicker<span class="u-hidden-visually">: </span></span>
                </span>Das ist eine Headline einer Box
            </h3>
        </div>
        <form class="form form--inline">
            <div class="form__inner">
                <div class="form-group">
                    <label class="label u-hidden-visually" for="email">E-Mail</label>
                    <div class="form-group__inner">
                        <input class="input input--email" type="email" placeholder="E-Mail-Adresse" required="required" autocomplete="email" id="email" name="email" />
                    </div>
                </div>
                <div class="form__submit">
                    <input class="button button--blue" type="submit" value="Weiter" />
                </div>
            </div>
        </form>
    </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": "sand",
  "more": "Weitere Informationen",
  "link": null,
  "hkkPlus": null,
  "headlineOptions": {
    "level": 3,
    "kicker": "Der Kicker"
  },
  "content": "!= include('@form--mini')\n",
  "icon": "big-calendar"
}
  • 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.