Employer Style Base Pattern Library

Headers 


        
    



    
    

    
        

    



    
    

    
        
            
            
/* No context defined for this component. */

            
        
    



    
    




    


        

            
            
        


        
        

            
    
                
  • 
                    Content:
                    
                        
    
                            
                            
                                
    @mixin header-hero {
  position: relative;
  overflow: hidden;
  background-color: $base-background-color;

  @media only screen and (max-width: $small-screen-max) {
    @include display(flex);
    @include align-items(center);
  }

  &__text {
    @include display(flex);
    @include flex-direction(column);
    @include justify-content(center);
    @include align-items(flex-start);
    position: absolute; // TODO this is all specific to background image + gradients
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding-top: $header-padding;
    padding-bottom: $header-padding;

    @media only screen and (max-width: $small-screen-max) {
      position: relative;
      padding-top: $header-top-bottom-padding;
      padding-bottom: $header-top-bottom-padding;
    }

    h1 {
      margin-top: 0;
      margin-bottom: $header-headline-bottom-margin;
      line-height: normal;
      color: $hero-text-color-light;

      @media only screen and (max-width: $small-screen-max) {
        margin-bottom: 0;
      }
    }

    p {
      max-width: 28em;
      margin-bottom: 0;
      color: $hero-text-color-light;
    }
  }
}

@mixin header-hero--home($background-image-large: nil, $background-image-medium: nil) {
  @include heading--hero;
  position: relative;
  min-height: $header-height-home;
  overflow: hidden;
  background-color: $base-background-color;
  background-image: url(asset_path(#{$background-image-large}));
  background-size: auto $header-height-home;
  background-position: right bottom;
  background-repeat: repeat no-repeat;

  @media only screen and (max-width: $medium-screen-max) {
    background-image: url(asset_path(#{$background-image-medium}));
  }

  @media only screen and (max-width: $small-screen-max) {
    @include display(flex);
    @include align-items(center);
    background-size: cover;
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @include dayAfterTomorrowGradientTransparent;
  }

  &__text {
    @include display(flex);
    @include flex-direction(column);
    @include justify-content(center);
    @include align-items(flex-start);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding-top: $base-margin;
    padding-bottom: $base-margin;

    @media only screen and (max-width: $small-screen-max) {
      position: relative;
    }

    h1 {
      margin-top: 0;
      line-height: normal;
      color: $hero-text-color-dark;
    }

    p {
      margin-bottom: 0;
      color: $hero-text-color-dark;
    }
  }
}

@mixin header--large--background-image($background-image-large: nil, $background-image-medium: nil) {
  @include header-hero;
  @include heading--hero;
  min-height: $header-height-large;
  background-image: url(asset_path(#{$background-image-large}));
  background-size: auto $header-height-large;
  background-position: right bottom;
  background-repeat: repeat no-repeat;

  @media only screen and (max-width: $medium-screen-max) {
    background-image: url(asset_path(#{$background-image-medium}));
  }

  @media only screen and (max-width: $small-screen-max) {
    min-height: unset;
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @include cbGradientTransparent;
  }
}

@mixin header--extra-large($background-image-large: nil, $background-image-medium: nil, $gradient-variable: $cb) {
  @include header-hero;
  min-height: $header-height-xl;
  background-image: url(asset_path(#{$background-image-large}));
  background-size: auto $header-height-xl;
  background-position: right bottom;
  background-repeat: repeat no-repeat;

  @media only screen and (max-width: $medium-screen-max) {
    background-image: url(asset_path(#{$background-image-medium}));
  }

  @media only screen and (max-width: $small-screen-max) {
    min-height: unset;
  }

  @media only screen and (max-width: $small-screen-max) {
    background-image: none;
    padding: $base-spacing-xlarge 0;
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @include gradientTransparent(map-get($gradient-variable, dark), map-get($gradient-variable, medium), map-get($gradient-variable, light));

    @media only screen and (max-width: $small-screen-max) {
      @include gradient(map-get($gradient-variable, dark), map-get($gradient-variable, medium), map-get($gradient-variable, light));
    }
  }

  &__text {
    @include heading--hero--xl;
    text-align: center;
    align-items: center;
  }
}

@mixin header--large--side-image {
  @include heading--hero;
  @include cbGradient;
  position: relative;
  overflow: hidden;
  min-height: $header-height-large;

  @media only screen and (max-width: $small-screen-max) {
    min-height: unset;
  }

  &__content-wrap {
    @include display(flex);
    @include justify-content(space-between);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;

    @media only screen and (max-width: $small-screen-max) {
      position: relative;
    }
  }

  &__text {
    @include flex-grow(1);
    @include flex-shrink(1);
    @include flex-basis(auto);
    @include display(flex);
    @include flex-direction(column);
    @include justify-content(center);
    @include align-items(flex-start);
    margin-right: $base-spacing-medium;
    padding-top: $header-padding;
    padding-bottom: $header-padding;

    @media only screen and (max-width: $small-screen-max) {
      position: relative;
      padding-top: $header-top-bottom-padding;
      padding-bottom: $header-top-bottom-padding;
    }

    h1 {
      margin-top: 0;
      margin-bottom: $header-headline-bottom-margin;
      line-height: normal;
      color: $hero-text-color-light;

      @media only screen and (max-width: $small-screen-max) {
        margin-bottom: 0;
      }
    }

    p {
      margin-bottom: 0;
      color: $hero-text-color-light;
    }
  }

  .header--large__image-wrap {
    @include flex-grow(1);
    @include flex-shrink(0);
    @include flex-basis(auto);
    @include display(flex);
    @include justify-content(flex-end);
    @include align-items(flex-end);

    @media only screen and (max-width: $small-screen-max) {
      display: none;
    }
  }

  .header--large__image {
    display: block;
    max-width: 34.375rem;
  }
}

@mixin header--small {
  max-height: $header-height-small;

  &__headline {
    padding: $header-padding 0;
    max-width: $header-width-normal;
    position: relative;

    @include heading--small;

    @media only screen and (min-width: $mobile-nav-max) {
      max-height: $header-height-small;
    }

    @media only screen and (max-width: $medium-screen-max) {
      padding: $section-padding--mobile 0;
    }
  }
}

// Text alignment

@mixin header--large--left {
  &__text {
    p {
      @media only screen and (max-width: $small-screen-max) {
        display: none;
      }
    }
  }

  &:before {
    @media only screen and (max-width: $small-screen-max) {
      @include cbGradient;
    }
  }
}

@mixin header--large--centered {
  &__text {
    text-align: center;
    align-items: center;

    h1 {
      max-width: 32ch;
    }

    p {
      max-width: 65ch;
    }
  }
}

    
                                
                            
                        
    
                        
                
    • 
                
  • 
                    URL:
                    /components/raw/headers/_headers.scss
                
    • 
                
  • 
                    Filesystem Path:
                    sass/directives/03_components/headers/_headers.scss
                
    • 
                
  • 
                    Size:
                    7.3 KB
                
    • 
            

        

        
    






    
    

    



    
    

    

        
        
Make up to 3 sizes of header background images:






Size
Width
Height






Large
original width or max 1600px
540px or 445px tall1




Medium
1040px
540px or 445px tall1




Small2
650px
540px or 445px tall1






1 See Header Types and their heights in the Header Audit Doc on Confluence(TODO: add that info here)


2 Don’t create the small size if the image is meant to disappear on small screens


For Employer, see app/assets/images/headers for image naming conventions