hkk Frontend 2017

Überschrift 

<!-- 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-258c" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-258c">
  <title id="title-icon-258c">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-cce7" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-cce7">
  <title id="title-icon-cce7">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 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}
 
/* 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;
  }
}

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