diff --git a/scss/_type.scss b/scss/_type.scss index 7726b7b212..efa2c81552 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -32,25 +32,12 @@ } // Type display classes -.display-1 { - @include font-size($display1-size); - font-weight: $display1-weight; - line-height: $display-line-height; -} -.display-2 { - @include font-size($display2-size); - font-weight: $display2-weight; - line-height: $display-line-height; -} -.display-3 { - @include font-size($display3-size); - font-weight: $display3-weight; - line-height: $display-line-height; -} -.display-4 { - @include font-size($display4-size); - font-weight: $display4-weight; - line-height: $display-line-height; +@each $display, $font-size in $display-font-sizes { + .display-#{$display} { + @include font-size($font-size); + font-weight: $display-font-weight; + line-height: $display-line-height; + } } // diff --git a/scss/_variables.scss b/scss/_variables.scss index 6597e10adf..5539f31726 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -411,16 +411,19 @@ $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; $headings-color: null !default; -$display1-size: 6rem !default; -$display2-size: 5.5rem !default; -$display3-size: 4.5rem !default; -$display4-size: 3.5rem !default; +// scss-docs-start display-headings +$display-font-sizes: ( + 1: 5rem, + 2: 4.5rem, + 3: 4rem, + 4: 3.5rem, + 5: 3rem, + 6: 2.5rem +) !default; -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; -$display-line-height: $headings-line-height !default; +$display-font-weight: 300 !default; +$display-line-height: $headings-line-height !default; +// scss-docs-end display-headings $lead-font-size: $font-size-base * 1.25 !default; $lead-font-weight: 300 !default; diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md index 5b65166098..7d4875e925 100644 --- a/site/content/docs/4.3/content/typography.md +++ b/site/content/docs/4.3/content/typography.md @@ -108,7 +108,9 @@ Traditional heading elements are designed to work best in the meat of your page