<h3 class="headline headline--headline-3">
    Headline 3
</h3>
-
  //- 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 hkkPlusKicker = hkkPlus && kicker ? hkkPlusIcon : '';
  - const hkkPlusHeadline = hkkPlus && !kicker ? hkkPlusIcon : '';

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

      if facette
        span.headline__kicker-facette #{facette}
    
  | !{hkkPlusHeadline}#{content || text}
{
  "modifier": "headline-3",
  "text": "Headline 3",
  "level": 3
}
  • 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;
      }
    }
    
    @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.