hkk Frontend 2017

Überschrift: Headline 1 

<h1 class="headline headline--headline-1">
    Headline 1
</h1>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.class.push(`headline--${modifier}`);

  //- Tag
  tag = (level === 0) ? 'span' : `h${Math.min(Math.max(level, 1), 6)}`;

  //- Subline
  if (subline) attr.class.push('headline--subline');

//- Render atom
#{tag}.headline&attributes(attr)
  - const hkkPlusIcon = include('@icon--hkk-plus', {attr: {class: 'headline__hkk-plus'}});
  - const hkkDockIcon = include('@image', { image: `${relativeRoot}images/logo-magazin.svg`, attr: { class: 'headline__hkk-dock' } });
  - let hkkExtraKicker = hkkPlus && kicker ? hkkPlusIcon : '';
  - hkkExtraKicker = hkkDock && kicker ? hkkDockIcon : hkkExtraKicker;
  - let hkkExtraHeadline = hkkPlus && !kicker ? hkkPlusIcon : '';
  - hkkExtraHeadline = hkkDock && !kicker ? hkkDockIcon : hkkExtraHeadline;

  if kicker
    span.headline__kicker
      span.headline__kicker-text !{hkkExtraKicker}#{kicker}#[span.u-hidden-visually : ]

      if facette
        span.headline__kicker-facette #{facette}

  | !{hkkExtraHeadline}#{content || text}
 
{
  "modifier": "headline-1",
  "text": "Headline 1",
  "level": 1
}
  • Content: 
    .headline {
  color: $color-blue;
  display: block;
  font-weight: bold;
  margin-bottom: 1rem;

  @include mq($from: m) {
    margin-bottom: 1.5rem;
  }

  @include mq($from: l) {
    margin-bottom: 2rem;
  }

  .u-inverted & {
    color: #fff;
  }
}

.headline--display-1 {
  font-size: 2.8rem;
  line-height: 1.1;
}

.headline--display-2,
.headline--display-3 {
  font-size: 2.3rem;
  line-height: 1.2;
}

.headline--headline-1 {
  font-size: 1.9rem;
  line-height: 1.25;
}

.headline--headline-2 {
  font-size: 1.5rem;
  line-height: 1.3;
}

.headline--headline-3 {
  font-size: 1.3rem;
  line-height: 1;
}

.headline--subline {
  margin-bottom: 0.5rem;
}

.headline__kicker,
.headline--kicker {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.headline__kicker {
  color: $color-red;
  display: block;
  font-size: 1.1rem;
  margin-bottom: 1rem;

  .u-inverted & {
    color: #fff;
  }
}

.headline__kicker-text {
  margin-right: 0.5rem;
}

.headline__kicker-facette {
  color: $color-anthracite;
  font-weight: normal;
  text-transform: none;
}

.headline__hkk-plus {
  font-size: 1.25em;
  margin-left: -0.25em;
  margin-right: 0.25em;
  vertical-align: -0.225em;

  .headline__kicker & {
    font-size: 2em;
    vertical-align: -0.4em;
  }

  .box__headline & {
    margin-left: calc(-2rem - 0.625em);
    margin-right: 1rem;
  }
}

.headline__hkk-dock {
  height: 100%;
  margin-right: 1rem;
  width: 3em;
}

@include mq($from: m) {
  .headline--display-1 {
    font-size: 3.6rem;
  }

  .headline--display-2 {
    font-size: 2.8rem;
  }

  .headline--headline-1 {
    font-size: 2.3rem;
  }

  .headline--headline-2 {
    font-size: 1.9rem;
  }

  .headline--headline-3 {
    font-size: 1.5rem;
  }

  .headline__kicker {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
  }
}

@include mq($from: l) {
  .headline--display-1 {
    font-size: 5rem;
  }

  .headline--display-2 {
    font-size: 3.6rem;
  }

  .headline__kicker {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }
}
  • URL: /components/raw/headline/headline.scss
  • Filesystem Path: src/components/atoms/headline/headline.scss
  • Size: 2 KB

There are no notes for this item.