Heading with emphasized underline

Thumbnail

PugSCSS
h1.uk-text-primary.heading-small.text-bold.heading-underline(style='line-height:1;')
  span Section Title
.heading-underline {
  padding-bottom: 15px;
  border-bottom: 1px solid #d0d0d0;
  span {
    position: relative;
    font-weight: bold;
    letter-spacing: 2px;
    &:after {
      content: '';
      @include pos-a('','',-12px,0,120%,6px,5);
      background-color: $global-secondary-background;
    }
  }
}

Heading Font Size Init

SCSS
.heading-xxsmall {font-size:rem(18px);line-height:1.5;}
.heading-xsmall {font-size:rem(24px);line-height:1.5;}
.heading-small {font-size:rem(30px);line-height:1.5;}
.heading-default {font-size:rem(32px);line-height:1.5;}
.heading-medium {font-size:rem(35px);line-height:1.5;}
.heading-large {font-size:rem(40px);line-height:1.5;}
.heading-xlarge {font-size:rem(50px);line-height:1.5;}
.heading-xxlarge {font-size:rem(60px);line-height:1.5;}
.heading-huge {font-size:rem(70px);line-height:1.5;}
@media (min-width: 640px) { 
  .heading-xxsmall-s {font-size:rem(18px)}
  .heading-xsmall-s {font-size:rem(22px)}
  .heading-small-s {font-size:rem(30px)}
  .heading-default-s {font-size:rem(32px)}
  .heading-medium-s {font-size:rem(35px)}
  .heading-large-s {font-size:rem(40px)}
  .heading-xlarge-s {font-size:rem(50px);}
  .heading-xxlarge-s {font-size:rem(60px);}
  .heading-huge-s {font-size:rem(70px);}
}
@media (min-width: 960px) { 
  .heading-xxsmall-m {font-size:rem(18px)}
  .heading-xsmall-m {font-size:rem(22px)}
  .heading-small-m {font-size:rem(30px)}
  .heading-default-m {font-size:rem(32px)}
  .heading-medium-m {font-size:rem(35px)}
  .heading-large-m {font-size:rem(40px)}
  .heading-xlarge-m {font-size:rem(50px);}
  .heading-xxlarge-m {font-size:rem(60px);}
  .heading-huge-m {font-size:rem(70px);}
}
@media (min-width: 1200px) { 
  .heading-xxsmall-l {font-size:rem(18px)}
  .heading-xsmall-l {font-size:rem(22px)}
  .heading-small-l {font-size:rem(30px)}
  .heading-default-l {font-size:rem(32px)}
  .heading-medium-l {font-size:rem(35px)}
  .heading-large-l {font-size:rem(40px)}
  .heading-xlarge-l {font-size:rem(50px);}
  .heading-xxlarge-l {font-size:rem(60px);}
  .heading-huge-l {font-size:rem(70px);}
}
@media (min-width: 1600px) { 
  .heading-xxsmall-xl {font-size:rem(18px)}
  .heading-xsmall-xl {font-size:rem(22px)}
  .heading-small-xl {font-size:rem(30px)}
  .heading-default-xl {font-size:rem(32px)}
  .heading-medium-xl {font-size:rem(35px)}
  .heading-large-xl {font-size:rem(40px)}
  .heading-xlarge-xl {font-size:rem(50px);}
  .heading-xxlarge-xl {font-size:rem(60px);}
  .heading-huge-xl {font-size:rem(70px);}
}