There are no notes for this item.

Headline

Component Preview
< class="headline ">
    <span class="headline__text"></span>
</>
  • Content:
    // Headline
    
    @mixin headline {
      padding: 0;
      line-height: 1;
    
      a {
        color: $secondary;
        text-decoration: none;
    
        &:hover,
        &:focus {
          text-decoration: underline;
        }
      }
    }
    
    @mixin headline-negative {
      color: $white;
    
      a {
        color: $white;
      }
    }
    
    @mixin headline-uppercase {
      text-transform: uppercase;
      font-family: $font-family-caps;
      -webkit-font-smoothing: auto;
      -moz-osx-font-smoothing: auto;
      font-weight: bold;
      font-style: normal;
      font-display: swap;
    }
    
    @mixin headline-serif {
      font-family: $font-family-serif;
      font-weight: $font-weight-bold;
    }
    
    @mixin headline-highlight {
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      padding: 2px 0;
      line-height: 1.7;
    }
    
    @mixin headline-highlight-word {
      background: $primary;
      display: inline;
      padding: 0.85rem 1rem;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      color: $secondary;
      text-shadow: none;
      [class*="bg--gold"] & {
        background: $secondary;
        color: #fff;
      }
    }
    
    @mixin headline-highlight-word-uppercase {
      background: $primary;
      display: inline-block;
      margin-bottom: .8rem;
      margin-top: .8rem;
      padding: 0.6rem 1rem;
      color: $secondary;
      [class*="bg--gold"] & {
        background: $secondary;
        color: #fff;
        font-weight: 400;
      }
    }
    
    @mixin headline-underline {
      padding-bottom: $sm;
      line-height: 1.3;
      display: inline;
      background-size: 1px 1em;
      box-shadow: inset 0 -0.175em white, inset 0 -0.25em $primary;
    
      &::after {
        content: '\A';
        white-space: pre;
        margin-bottom: $gutter;
        display: inline-block;
      }
    
      [class*="bg--gray"] & {
        box-shadow: inset 0 -0.175em $light, inset 0 -0.25em $primary;
      }
    
      .bg-pattern--brain-black &,
      [class*="bg--black"] & {
        box-shadow: inset 0 -0.175em $secondary, inset 0 -0.25em $primary;
      }
    
      .bg-pattern--brain-reversed &,
      [class*="bg--gold"] & {
        box-shadow: inset 0 -0.175em $primary, inset 0 -0.25em $light;
      }
    }
    
  • URL: /components/raw/headline/_headline-mixins.scss
  • Filesystem Path: src/components/headline/_headline-mixins.scss
  • Size: 2 KB
  • Content:
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: 500;
      line-height: 1.125;
      letter-spacing: 0; }
    
    h1, .h1 {
      font-size: 3.35rem;
      line-height: unset;
      margin-top: 0.625rem;
      margin-bottom: 0.625rem;
      font-family: "Zilla Slab", serif;
      font-weight: 600;
      font-size: clamp(2.3rem, calc(2.3662vw + 1.4127rem), 3.35rem); }
    
    h2, .h2 {
      font-size: 2.3rem;
      line-height: 1.25;
      font-weight: 500;
      margin-top: 0;
      margin-bottom: 0.325rem;
      font-size: clamp(1.95rem, calc(0.7887vw + 1.6542rem), 2.3rem); }
      h2:not(:first-child), .h2:not(:first-child) {
        margin-top: 1.875rem; }
    
    h3, .h3 {
      font-size: 1.9125rem;
      line-height: 1.25;
      margin-top: 0;
      margin-bottom: 0.325rem;
      font-size: clamp(1.65rem, calc(0.5915vw + 1.4282rem), 1.9125rem); }
      h3:not(:first-child), .h3:not(:first-child) {
        margin-top: 1.875rem; }
    
    h4, .h4 {
      font-size: 1.6rem;
      line-height: 1.25;
      font-weight: 500;
      margin-top: 0;
      margin-bottom: 0.325rem;
      font-size: clamp(1.45rem, calc(0.338vw + 1.3232rem), 1.6rem); }
      h4:not(:first-child), .h4:not(:first-child) {
        margin-top: 1.875rem; }
    
    h5, .h5 {
      font-size: 1.4rem;
      line-height: 1.25;
      font-weight: 500;
      margin-top: 0;
      margin-bottom: 0.325rem;
      font-size: clamp(1.3rem, calc(0.2254vw + 1.2155rem), 1.4rem); }
      h5:not(:first-child), .h5:not(:first-child) {
        margin-top: 1.875rem; }
    
    h6, .h6 {
      font-size: 1.2rem;
      line-height: 1.25;
      font-weight: 500;
      margin-top: 0;
      margin-bottom: 0.325rem; }
      h6:not(:first-child), .h6:not(:first-child) {
        margin-top: 1.875rem; }
    
    .bold-headline,
    .headline {
      padding: 0;
      line-height: 1; }
      .bold-headline a,
      .headline a {
        color: #151515;
        text-decoration: none; }
        .bold-headline a:hover, .bold-headline a:focus,
        .headline a:hover,
        .headline a:focus {
          text-decoration: underline; }
      [class*="bg-"] .bold-headline a, [class*="bg-"]
      .headline a {
        color: inherit; }
      .bold-headline.bold-headline--negative, .bold-headline.headline--negative,
      .headline.bold-headline--negative,
      .headline.headline--negative {
        color: #fff; }
        .bold-headline.bold-headline--negative a, .bold-headline.headline--negative a,
        .headline.bold-headline--negative a,
        .headline.headline--negative a {
          color: #fff; }
    
    .bold-headline--caps,
    .headline--uppercase {
      text-transform: uppercase;
      font-family: "Antonio", sans-serif;
      -webkit-font-smoothing: auto;
      -moz-osx-font-smoothing: auto;
      font-weight: bold;
      font-style: normal;
      font-display: swap; }
    
    .bold-headline--serif,
    .headline--serif {
      font-family: "Zilla Slab", serif;
      font-weight: 700; }
    
    .bold-headline--highlight,
    .headline--highlight {
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      padding: 2px 0;
      line-height: 1.7; }
    
    .bold-headline--caps .headline__headline span,
    .bold-headline--highlight span,
    .headline--highlight span {
      background: #FFCD00;
      display: inline;
      padding: 0.85rem 1rem;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      color: #151515;
      text-shadow: none; }
      [class*="bg--gold"] .bold-headline--caps .headline__headline span, [class*="bg--gold"]
      .bold-headline--highlight span, [class*="bg--gold"]
      .headline--highlight span {
        background: #151515;
        color: #fff; }
    
    [class*="bg--gold"] .bold-headline--caps .headline__heading, [class*="bg--gold"]
    .headline--uppercase .headline__heading, [class*="bg--gold"]
    .headline--uppercase .headline__text {
      font-weight: 400; }
    
    .bold-headline--caps .headline__heading span,
    .headline--uppercase .headline__heading span,
    .headline--uppercase .headline__text span {
      background: #FFCD00;
      display: inline-block;
      margin-bottom: .8rem;
      margin-top: .8rem;
      padding: 0.6rem 1rem;
      color: #151515; }
      [class*="bg--gold"] .bold-headline--caps .headline__heading span, [class*="bg--gold"]
      .headline--uppercase .headline__heading span, [class*="bg--gold"]
      .headline--uppercase .headline__text span {
        background: #151515;
        color: #fff;
        font-weight: 400; }
    
    .bold-headline--underline,
    .headline--underline {
      padding-bottom: 0.625rem;
      line-height: 1.3;
      display: inline;
      background-size: 1px 1em;
      box-shadow: inset 0 -0.175em white, inset 0 -0.25em #FFCD00; }
      .bold-headline--underline::after,
      .headline--underline::after {
        content: '\A';
        white-space: pre;
        margin-bottom: 1.25rem;
        display: inline-block; }
      [class*="bg--gray"] .bold-headline--underline, [class*="bg--gray"]
      .headline--underline {
        box-shadow: inset 0 -0.175em #f3f3f3, inset 0 -0.25em #FFCD00; }
      .bg-pattern--brain-black .bold-headline--underline,
      [class*="bg--black"] .bold-headline--underline, .bg-pattern--brain-black
      .headline--underline,
      [class*="bg--black"]
      .headline--underline {
        box-shadow: inset 0 -0.175em #151515, inset 0 -0.25em #FFCD00; }
      .bg-pattern--brain-reversed .bold-headline--underline,
      [class*="bg--gold"] .bold-headline--underline, .bg-pattern--brain-reversed
      .headline--underline,
      [class*="bg--gold"]
      .headline--underline {
        box-shadow: inset 0 -0.175em #FFCD00, inset 0 -0.25em #f3f3f3; }
    
    .bold-headline--highlight.bold-headline--serif,
    .headline--highlight.headline--serif {
      font-weight: 600; }
    
    .bold-headline--highlight.bold-headline--caps span,
    .headline--highlight.headline--uppercase span {
      padding: 0.1rem 1rem 0; }
    
  • URL: /components/raw/headline/headline.css
  • Filesystem Path: src/components/headline/headline.css
  • Size: 5.3 KB
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    @import '../typography/headings/headings.scss';
    @import 'headline-mixins';
    
    // @todo Remove `.bold-headline` variations.
    
    .bold-headline,
    .headline {
      @include headline;
    
      [class*="bg-"] & {
        a {
          color: inherit;
        }
      }
    
      &.bold-headline--negative,
      &.headline--negative {
        @include headline-negative;
      }
    }
    
    .bold-headline--caps,
    .headline--uppercase {
      @include headline-uppercase;
    }
    
    .bold-headline--serif,
    .headline--serif {
      @include headline-serif;
    }
    
    .bold-headline--highlight,
    .headline--highlight {
      @include headline-highlight;
    }
    
    .bold-headline--caps .headline__headline span,
    .bold-headline--highlight span,
    .headline--highlight span {
      @include headline-highlight-word;
    }
    
    .bold-headline--caps .headline__heading,
    .headline--uppercase .headline__heading,
    .headline--uppercase .headline__text {
      [class*="bg--gold"] & {
        font-weight: 400;
      }
    }
    
    .bold-headline--caps .headline__heading span,
    .headline--uppercase .headline__heading span,
    .headline--uppercase .headline__text span {
      @include headline-highlight-word-uppercase;
    }
    
    .bold-headline--underline,
    .headline--underline {
      @include headline-underline;
    }
    
    .bold-headline--highlight.bold-headline--serif,
    .headline--highlight.headline--serif {
      font-weight: 600;
    }
    
    .bold-headline--highlight.bold-headline--caps,
    .headline--highlight.headline--uppercase {
      span {
        padding: 0.1rem 1rem 0;
      }
    }
    
  • URL: /components/raw/headline/headline.scss
  • Filesystem Path: src/components/headline/headline.scss
  • Size: 1.5 KB