Headline.css

/**
 * Component: Headline
 */



/**
 * Root styling
 */
.headline {
  margin-top: 0;
  font-weight: var(--text-weight-headline);
  line-height: var(--line-height);

  /* Faded */
  &.isFaded {
    color: var(--color-text-p2);
  }

  /* Flex */
  &.flex {
    display: flex;
  }

  /* Block */
  &.block {
    display: block;
    width: 100%;
  }
}

/**
 * Size
 * Follows HTML5 headline specs
 * https://www.w3.org/TR/html5/rendering.html#sections-and-headings
 */
.size-small { /* default browser h5 proportion */
  font-size: var(--font-size-small);
}

.size-medium { /* default browser h4 proportion */
  font-size: var(--font-size-medium);
}

.size-large { /* default browser h3 proportion */
  font-size: var(--font-size-large);
}

.size-x-large { /* default browser h2 proportion */
  font-size: var(--font-size-x-large);
}

.size-xx-large { /* default browser h1 proportion */
  font-size: var(--font-size-xx-large);
}

/**
 * Margin
 */

.margin-none {
  margin-bottom: 0;
}

.margin-xx-small {
  margin-bottom: 0.67rem;
}

.margin-x-small {
  margin-bottom: 0.83rem;
}

.margin-small {
  margin-bottom: 1rem;
}

.margin-medium {
  margin-bottom: 1.33rem;
}

.margin-large {
  margin-bottom: 1.67rem;
}

.margin-x-large {
  margin-bottom: 2rem;
}

.margin-xx-large {
  margin-bottom: 2.33rem;
}

/**
 * Font weight
 */
.font-weight-regular {
  font-weight: var(--text-weight-regular);
}

.font-weight-medium {
  font-weight: var(--text-weight-medium);
}

.font-weight-bold {
  font-weight: var(--text-weight-bold);
}

.font-weight-black {
  font-weight: var(--text-weight-black);
}