Heading

<!-- Tag 1 -->
<h1 class="">
    First level heading - only tag
</h1>

<!-- Class 1 -->
<div class="heading heading--first-level">
    First level heading - only class
</div>

<!-- Tag And Class 1 -->
<h1 class="heading heading--first-level">
    First level heading - tag and class
</h1>

<!-- Tag 2 -->
<h2 class="">
    Second level heading - only tag
</h2>

<!-- Class 2 -->
<h2 class="heading heading--second-level">
    Second level heading - only class
</h2>

<!-- Tag And Class 2 -->
<div class="heading heading--second-level">
    Second level heading - tag and class
</div>

<!-- Tag 3 -->
<h3 class="">
    Third level heading - only tag
</h3>

<!-- Class 3 -->
<h3 class="heading heading--third-level">
    Third level heading - only class
</h3>

<!-- Tag And Class 3 -->
<div class="heading heading--third-level">
    Third level heading - tag and class
</div>

<!-- Tag 4 -->
<h4 class="">
    Fourth level heading - only tag
</h4>

<!-- Class 4 -->
<h4 class="heading heading--fourth-level">
    Fourth level heading - only class
</h4>

<!-- Tag And Class 4 -->
<div class="heading heading--fourth-level">
    Fourth level heading - tag and class
</div>

<!-- Tag 5 -->
<h5 class="">
    Fifth level heading - only tag
</h5>

<!-- Class 5 -->
<h5 class="heading heading--fifth-level">
    Fifth level heading - only class
</h5>

<!-- Tag And Class 5 -->
<div class="heading heading--fifth-level">
    Fifth level heading - tag and class
</div>

<!-- Tag 6 -->
<h6 class="">
    Sixth level heading - only tag
</h6>

<!-- Class 6 -->
<h6 class="heading heading--sixth-level">
    Sixth level heading - only class
</h6>

<!-- Tag And Class 6 -->
<div class="heading heading--sixth-level">
    Sixth level heading - tag and class
</div>

<{{{ tag }}} class="{{ class }}" {{{ attributes }}}>
    {{ text }}
</{{{ tag }}}>
/* Tag 1 */
{
  "tag": "h1",
  "class": "",
  "text": "First level heading - only tag"
}

/* Class 1 */
{
  "tag": "div",
  "class": "heading heading--first-level",
  "text": "First level heading - only class"
}

/* Tag And Class 1 */
{
  "tag": "h1",
  "class": "heading heading--first-level",
  "text": "First level heading - tag and class"
}

/* Tag 2 */
{
  "tag": "h2",
  "class": "",
  "text": "Second level heading - only tag"
}

/* Class 2 */
{
  "tag": "h2",
  "class": "heading heading--second-level",
  "text": "Second level heading - only class"
}

/* Tag And Class 2 */
{
  "tag": "div",
  "class": "heading heading--second-level",
  "text": "Second level heading - tag and class"
}

/* Tag 3 */
{
  "tag": "h3",
  "class": "",
  "text": "Third level heading - only tag"
}

/* Class 3 */
{
  "tag": "h3",
  "class": "heading heading--third-level",
  "text": "Third level heading - only class"
}

/* Tag And Class 3 */
{
  "tag": "div",
  "class": "heading heading--third-level",
  "text": "Third level heading - tag and class"
}

/* Tag 4 */
{
  "tag": "h4",
  "class": "",
  "text": "Fourth level heading - only tag"
}

/* Class 4 */
{
  "tag": "h4",
  "class": "heading heading--fourth-level",
  "text": "Fourth level heading - only class"
}

/* Tag And Class 4 */
{
  "tag": "div",
  "class": "heading heading--fourth-level",
  "text": "Fourth level heading - tag and class"
}

/* Tag 5 */
{
  "tag": "h5",
  "class": "",
  "text": "Fifth level heading - only tag"
}

/* Class 5 */
{
  "tag": "h5",
  "class": "heading heading--fifth-level",
  "text": "Fifth level heading - only class"
}

/* Tag And Class 5 */
{
  "tag": "div",
  "class": "heading heading--fifth-level",
  "text": "Fifth level heading - tag and class"
}

/* Tag 6 */
{
  "tag": "h6",
  "class": "",
  "text": "Sixth level heading - only tag"
}

/* Class 6 */
{
  "tag": "h6",
  "class": "heading heading--sixth-level",
  "text": "Sixth level heading - only class"
}

/* Tag And Class 6 */
{
  "tag": "div",
  "class": "heading heading--sixth-level",
  "text": "Sixth level heading - tag and class"
}

  • Content:
    $headings-margin                          : 0 0 0.5em 0 !default;
    $headings-margin--page                    : $spacer--medium 0 !default;
    
    $headings-font-family                     : $font-family-base !default;
    $headings-font-family--secondary          : $font-family-sans-serif !default;
    $headings-font-weight                     : $font-weight-medium !default;
    $headings-line-height                     : $font-line-height !default;
    $headings-color                           : $color-primary !default;
    
    $headings-text-transform                  : none !default;
    $headings-text-transform--page            : none !default;
    
    $heading-font-size--page\@screen-m        : $font-size-super-extra-large !default;
    $heading-font-size--page                  : $font-size-extra-large !default;
    $heading-font-size--first-level\@screen-m : $font-size-heading-largest !default;
    $heading-font-size--first-level           : $font-size-heading-large !default;
    $heading-font-size--second-level\@screen-m: $font-size-extra-large !default;
    $heading-font-size--second-level          : $font-size-medium-large !default;
    $heading-font-size--third-level\@screen-m : $font-size-large !default;
    $heading-font-size--third-level           : $font-size-medium !default;
    $heading-font-size--fourth-level          : $font-size-medium !default;
    $heading-font-size--fifth-level           : $font-size-medium !default;
    $heading-font-size--sixth-level           : $font-size-medium !default;
    
    .heading {
        display: block;
        margin: $headings-margin;
        font-family: $headings-font-family;
        font-weight: $headings-font-weight;
        line-height: $headings-line-height;
        color: $headings-color;
        text-transform: $headings-text-transform;
    
        &--first-level {
            font-size: $heading-font-size--first-level;
            font-weight: 300;
            @include mq($screen-m) {
                font-size: $heading-font-size--first-level\@screen-m;
            }
        }
    
        &--second-level {
            font-size: $heading-font-size--second-level;
            @include mq($screen-m) {
                font-size: $heading-font-size--second-level\@screen-m;
            }
        }
    
        &--third-level {
            font-size: $heading-font-size--third-level;
            @include mq($screen-m) {
                font-size: $heading-font-size--third-level\@screen-m;
            }
        }
    
        &--fourth-level {
            font-size: $heading-font-size--fourth-level;
        }
    
        &--fifth-level {
            font-size: $heading-font-size--fifth-level;
        }
    
        &--sixth-level {
            font-size: $heading-font-size--sixth-level;
        }
    
        &--font-secondary {
            font-family: $headings-font-family--secondary;
        }
    
        &--page {
            margin: $headings-margin--page;
            font-size: $heading-font-size--page;
            text-transform: $headings-text-transform--page;
            @include mq($screen-m) {
                font-size: $heading-font-size--page\@screen-m;
            }
        }
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @extend .heading;
    }
    
    h1 {
        @extend .heading--first-level;
    }
    
    h2 {
        @extend .heading--second-level;
    }
    
    h3 {
        @extend .heading--third-level;
    }
    
    h4 {
        @extend .heading--fourth-level;
    }
    
    h5 {
        @extend .heading--fifth-level;
    }
    
    h6 {
        @extend .heading--sixth-level;
    }
    
  • URL: /components/raw/heading/_heading.scss
  • Filesystem Path: build/components/Atoms/typography/heading/_heading.scss
  • Size: 3.2 KB

There are no notes for this item.