<!-- Display 1 -->
<h1 class="headline headline--display-1">
    Display 1
</h1>

<!-- Display 1 (mit Dachzeile) -->
<h1 class="headline headline--display-1">
    <span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span>
    </span>Display 1
</h1>

<!-- Display 1 (mit Dachzeile & hkk-Plus & Facette) -->
<h1 class="headline headline--display-1">
    <span class="headline__kicker"><span class="headline__kicker-text">
<svg class="icon headline__hkk-plus icon--hkk-plus" id="icon-a901" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-a901">
  <title id="title-icon-a901">HKK Plus</title>
  <use xlink:href="#icon-hkk-plus"></use>
</svg>Dachzeile<span class="u-hidden-visually">: </span></span><span class="headline__kicker-facette">Facette</span></span>Display 1
</h1>

<!-- Display 1 -->
<h1 class="headline headline--display-1">
    Display 1
</h1>

<!-- Display 1 (mit Dachzeile) -->
<h1 class="headline headline--display-1">
    <span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span>
    </span>Display 1
</h1>

<!-- Display 2 -->
<h1 class="headline headline--display-2">
    Display 2
</h1>

<!-- Display 2 -->
<h1 class="headline headline--display-2">
    Display 2
</h1>

<!-- Display 3 -->
<h1 class="headline headline--display-3">
    Display 3
</h1>

<!-- Headline 1 -->
<h1 class="headline headline--headline-1">
    Headline 1
</h1>

<!-- Headline 1 -->
<h1 class="headline headline--headline-1">
    <svg class="icon headline__hkk-plus icon--hkk-plus" id="icon-468c" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-468c">
  <title id="title-icon-468c">HKK Plus</title>
  <use xlink:href="#icon-hkk-plus"></use>
</svg>Headline 1
</h1>

<!-- Headline 1 -->
<h1 class="headline headline--headline-1">
    Headline 1
</h1>

<!-- Headline 2 -->
<h1 class="headline headline--headline-2">
    Headline 2
</h1>

<!-- Headline 2 -->
<h1 class="headline headline--headline-2">
    Headline 2
</h1>

<!-- Headline 3 -->
<h3 class="headline headline--headline-3">
    Headline 3
</h3>

<!-- Kicker einzeln (blau) -->
<h1 class="headline headline--kicker">
    Kicker
</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 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}
/* Display 1 */
{
  "modifier": "display-1",
  "text": "Display 1",
  "level": 1
}

/* Display 1 (mit Dachzeile) */
{
  "modifier": "display-1",
  "text": "Display 1",
  "kicker": "Dachzeile",
  "level": 1
}

/* Display 1 (mit Dachzeile & hkk-Plus & Facette) */
{
  "modifier": "display-1",
  "text": "Display 1",
  "kicker": "Dachzeile",
  "facette": "Facette",
  "level": 1,
  "hkkPlus": true
}

/* Display 1 */
{
  "modifier": "display-1",
  "text": "Display 1",
  "level": 1
}

/* Display 1 (mit Dachzeile) */
{
  "modifier": "display-1",
  "text": "Display 1",
  "kicker": "Dachzeile",
  "level": 1
}

/* Display 2 */
{
  "modifier": "display-2",
  "text": "Display 2",
  "level": 1
}

/* Display 2 */
{
  "modifier": "display-2",
  "text": "Display 2",
  "level": 1
}

/* Display 3 */
{
  "modifier": "display-3",
  "text": "Display 3",
  "level": 1
}

/* Headline 1 */
{
  "modifier": "headline-1",
  "text": "Headline 1",
  "level": 1
}

/* Headline 1 */
{
  "modifier": "headline-1",
  "text": "Headline 1",
  "level": 1,
  "hkkPlus": true
}

/* Headline 1 */
{
  "modifier": "headline-1",
  "text": "Headline 1",
  "level": 1
}

/* Headline 2 */
{
  "modifier": "headline-2",
  "text": "Headline 2",
  "level": 1
}

/* Headline 2 */
{
  "modifier": "headline-2",
  "text": "Headline 2",
  "level": 1
}

/* Headline 3 */
{
  "modifier": "headline-3",
  "text": "Headline 3",
  "level": 3
}

/* Kicker einzeln (blau) */
{
  "level": 1,
  "text": "Kicker",
  "modifier": "kicker"
}

  • 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.