There are no notes for this item.

Headline
WIP

Output (HTML)
Assets
Info


        
        < class="headline ">
    <span class="headline__text"></span>
</>

File:

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;
  }
  [class*="bg--gold"] [class*="bg--black"] & {
    background: $primary;
    color: $secondary;
  }
}

@mixin headline-underline {
  padding-bottom: $sm;

  &:after {
    content: "";
    display: block;
    width: 75px;
    height: 6px;
    margin-top: 15px;
    background: $primary;
  }

  &.headline--center {
    &:after {
      margin-right: auto;
      margin-left: auto;
    }
  }


  .bg-pattern--brain-reversed &,
  [class*="bg--gold"] & {
    &:after {
      background: $light;
    }
  }
}

URL: /components/raw/headline/_headline-mixins.scss
Filesystem Path: src/components/headline/_headline-mixins.scss
Size: 1.8 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", "Zilla-fallback", serif;
  font-weight: 600;
  font-size: clamp(2.3rem, calc(2.3662vw + 1.4127rem), 3.35rem); }

.h1.bold-headline--serif, .h1.headline--serif {
  font-size: 3.35rem;
  line-height: unset;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
  font-family: "Zilla Slab", "Zilla-fallback", serif;
  font-weight: 600;
  font-size: clamp(2.3rem, calc(2.3662vw + 1.4127rem), 3.35rem);
  font-weight: 700; }

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; }
  h2.bold-headline--serif, h2.headline--serif, .h2.bold-headline--serif, .h2.headline--serif {
    font-size: clamp(1.75rem, calc(1.7465vw + 1.0951rem), 2.525rem); }

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; }
  h3.bold-headline--serif, h3.headline--serif, .h3.bold-headline--serif, .h3.headline--serif {
    font-size: clamp(1.65rem, calc(1.0986vw + 1.238rem), 2.1375rem); }

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; }
  h4.bold-headline--serif, h4.headline--serif, .h4.bold-headline--serif, .h4.headline--serif {
    font-size: clamp(1.45rem, calc(0.8451vw + 1.1331rem), 1.825rem); }

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; }
  h5.bold-headline--serif, h5.headline--serif, .h5.bold-headline--serif, .h5.headline--serif {
    font-size: clamp(1.3rem, calc(0.7324vw + 1.0254rem), 1.625rem); }

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; }
  h6.bold-headline--serif, h6.headline--serif, .h6.bold-headline--serif, .h6.headline--serif {
    font-size: clamp(1.2rem, calc(0.507vw + 1.0099rem), 1.425rem); }

.bold-headline,
.headline {
  padding: 0;
  line-height: 1; }
  .bold-headline a,
  .headline a {
    color: var(--brand-secondary);
    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; }

.headline--center {
  text-align: center; }

.bold-headline--caps,
.headline--uppercase {
  text-transform: uppercase;
  font-family: "Antonio", "Antonio-fallback", 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", "Zilla-fallback", 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; }

.headline--highlight.headline--serif span {
  padding: .2rem 1rem 0.5rem 1rem; }

.bold-headline--caps .headline__headline span,
.bold-headline--highlight span,
.headline--highlight span {
  background: var(--brand-primary);
  display: inline;
  padding: 0.85rem 1rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--brand-secondary);
  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: var(--brand-secondary);
    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: var(--brand-primary);
  display: inline-block;
  margin-bottom: .8rem;
  margin-top: .8rem;
  padding: 0.6rem 1rem;
  color: var(--brand-secondary); }
  [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: var(--brand-secondary);
    color: #fff;
    font-weight: 400; }
  [class*="bg--gold"] [class*="bg--black"] .bold-headline--caps .headline__heading span, [class*="bg--gold"] [class*="bg--black"]
  .headline--uppercase .headline__heading span, [class*="bg--gold"] [class*="bg--black"]
  .headline--uppercase .headline__text span {
    background: var(--brand-primary);
    color: var(--brand-secondary); }

.bold-headline--underline,
.headline--underline {
  padding-bottom: 0.625rem; }
  .bold-headline--underline:after,
  .headline--underline:after {
    content: "";
    display: block;
    width: 75px;
    height: 6px;
    margin-top: 15px;
    background: var(--brand-primary); }
  .bold-headline--underline.headline--center:after,
  .headline--underline.headline--center:after {
    margin-right: auto;
    margin-left: auto; }
  .bg-pattern--brain-reversed .bold-headline--underline:after,
  [class*="bg--gold"] .bold-headline--underline:after, .bg-pattern--brain-reversed
  .headline--underline:after,
  [class*="bg--gold"]
  .headline--underline:after {
    background: #f3f3f3; }

h5.bold-headline--underline, h5.headline--underline, .h5.bold-headline--underline, .h5.headline--underline {
  padding-bottom: 0.625rem; }
  h5.bold-headline--underline:after, h5.headline--underline:after, .h5.bold-headline--underline:after, .h5.headline--underline:after {
    content: "";
    display: block;
    width: 75px;
    height: 6px;
    margin-top: 15px;
    background: var(--brand-primary); }
  h5.bold-headline--underline.headline--center:after, h5.headline--underline.headline--center:after, .h5.bold-headline--underline.headline--center:after, .h5.headline--underline.headline--center:after {
    margin-right: auto;
    margin-left: auto; }
  .bg-pattern--brain-reversed h5.bold-headline--underline:after,
  [class*="bg--gold"] h5.bold-headline--underline:after, .bg-pattern--brain-reversed h5.headline--underline:after,
  [class*="bg--gold"] h5.headline--underline:after, .bg-pattern--brain-reversed .h5.bold-headline--underline:after,
  [class*="bg--gold"] .h5.bold-headline--underline:after, .bg-pattern--brain-reversed .h5.headline--underline:after,
  [class*="bg--gold"] .h5.headline--underline:after {
    background: #f3f3f3; }
  h5.bold-headline--underline:after, h5.headline--underline:after, .h5.bold-headline--underline:after, .h5.headline--underline:after {
    height: 5px; }

h6.bold-headline--underline, h6.headline--underline, .h6.bold-headline--underline, .h6.headline--underline {
  padding-bottom: 0.625rem; }
  h6.bold-headline--underline:after, h6.headline--underline:after, .h6.bold-headline--underline:after, .h6.headline--underline:after {
    content: "";
    display: block;
    width: 75px;
    height: 6px;
    margin-top: 15px;
    background: var(--brand-primary); }
  h6.bold-headline--underline.headline--center:after, h6.headline--underline.headline--center:after, .h6.bold-headline--underline.headline--center:after, .h6.headline--underline.headline--center:after {
    margin-right: auto;
    margin-left: auto; }
  .bg-pattern--brain-reversed h6.bold-headline--underline:after,
  [class*="bg--gold"] h6.bold-headline--underline:after, .bg-pattern--brain-reversed h6.headline--underline:after,
  [class*="bg--gold"] h6.headline--underline:after, .bg-pattern--brain-reversed .h6.bold-headline--underline:after,
  [class*="bg--gold"] .h6.bold-headline--underline:after, .bg-pattern--brain-reversed .h6.headline--underline:after,
  [class*="bg--gold"] .h6.headline--underline:after {
    background: #f3f3f3; }
  h6.bold-headline--underline:after, h6.headline--underline:after, .h6.bold-headline--underline:after, .h6.headline--underline:after {
    height: 4px; }

.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: 9.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;
  }
}

.headline--center {
  text-align: center;
}

.bold-headline--caps,
.headline--uppercase {
  @include headline-uppercase;
}

.bold-headline--serif,
.headline--serif {
  @include headline-serif;
}

.bold-headline--highlight,
.headline--highlight {
  @include headline-highlight;
}

.headline--highlight.headline--serif {
  span {
    padding: .2rem 1rem 0.5rem 1rem;
  }
}

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

h5, .h5 {
  &.bold-headline--underline,
  &.headline--underline {
    @include headline-underline;
    &:after {
      height: 5px;
    }
  }
}

h6, .h6 {
  &.bold-headline--underline,
  &.headline--underline {
    @include headline-underline;
    &:after {
      height: 4px;
    }
  }
}

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

Headline WIP

Headline
WIP