HIDA - Helmholtz Information and Data Science Academy

Headline: Module 3 

<h3 class="headline headline--module-3">Das ist eine Überschrift</h3>
 
if kicker
  span.headline-kicker&attributes(kickerAttr)
    | !{render(kicker, true)}#[span.u-hidden-visually : ]
#{tag || `h${Math.min(Math.max(level, 1), 6)}`}.headline(
  class=classList({
    [`headline--${size || 1}`]: size,
    [`headline--color-${color}`]: color,
  })
)&attributes(attr)
  if text
    | !{render(text, true)}
 
{
  "text": "Das ist eine Überschrift",
  "size": "module-3",
  "level": 3
}
  • Content: 
    .headline--1,
%headline--1 {
  font-family: $font-family-secondary;
  font-size: 3.2rem;
  font-weight: $font-weight-bold;
  letter-spacing: -0.15rem;
  line-height: calc(4.2 / 3.2);

  @include mq($from: m) {
    font-size: 5.2rem;
    letter-spacing: -0.2rem;
    line-height: calc(5.8 / 5.2);
  }

  @include mq($from: l) {
    font-size: 6rem;
    letter-spacing: -0.25rem;
    line-height: calc(6.8 / 6);
  }
}

.headline--2,
%headline--2 {
  font-size: 2.4rem;
  font-weight: $font-weight-demi;
  line-height: calc(3.2 / 2.4);

  @include mq($from: m) {
    font-size: 3.2rem;
    line-height: calc(4.2 / 3.2);
  }
}

.headline--3,
%headline--3 {
  font-size: 2.1rem;
  font-weight: $font-weight-demi;
  line-height: calc(3 / 2.1);

  @include mq($from: l) {
    font-size: 2.3rem;
    line-height: calc(3.2 / 2.3);
  }
}

.headline--4,
%headline--4 {
  font-size: 1.9rem;
  font-weight: $font-weight-demi;
  line-height: calc(3 / 1.9);

  @include mq($from: m) {
    font-size: 2.1rem;
    line-height: calc(3 / 2.1);
  }
}

.headline--module-1 {
  font-family: $font-family-secondary;
  font-size: 2.4rem;
  font-weight: $font-weight-bold;
  letter-spacing: -0.1rem;
  line-height: calc(2.8 / 2.4);

  @include mq($from: m) {
    font-size: 4rem;
    letter-spacing: -0.15rem;
    line-height: calc(4.6 / 4);
  }

  @include mq($from: l) {
    font-size: 4.8rem;
    letter-spacing: -0.2rem;
    line-height: calc(5.5 / 4.8);
  }
}

.headline--module-2 {
  font-family: $font-family-secondary;
  font-size: 2.4rem;
  font-weight: $font-weight-bold;
  letter-spacing: -0.1rem;
  line-height: calc(2.8 / 2.4);

  @include mq($from: m) {
    font-size: 3.2rem;
    letter-spacing: -0.125rem;
    line-height: calc(3.6 / 3.2);
  }

  @include mq($from: l) {
    font-size: 3.4rem;
    letter-spacing: -0.15rem;
    line-height: calc(4 / 3.4);
  }
}

.headline--module-3 {
  font-family: $font-family-secondary;
  font-size: 1.9rem;
  font-weight: $font-weight-bold;
  letter-spacing: -0.08rem;
  line-height: calc(3 / 1.9);

  @include mq($from: m) {
    font-size: 2.5rem;
    letter-spacing: -0.1rem;
    line-height: calc(3 / 2.5);
  }
}

.headline-kicker {
  display: block;
  font-family: $font-family-secondary;
  font-size: 1.5rem;
  font-weight: $font-weight-bold;
  line-height: calc(2 / 1.5);
  margin-bottom: 2rem;
  text-transform: uppercase;
}
  • URL: /components/raw/headline/headline.scss
  • Filesystem Path: src/components/atoms/headline/headline.scss
  • Size: 2.4 KB

There are no notes for this item.