snurky components for Magento 2

Heading: Tag And Class 4 

<div class="heading heading--fourth-level">
    Fourth level heading - tag and class
</div>
 
<{{{ tag }}} class="{{ class }}" {{{ attributes }}}>
    {{ text }}
</{{{ tag }}}>
 
{
  "tag": "div",
  "class": "heading heading--fourth-level",
  "text": "Fourth 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-super-extra-large !default;
$heading-font-size--first-level           : $font-size-extra-large !default;
$heading-font-size--second-level\@screen-m: $font-size-extra-large !default;
$heading-font-size--second-level          : $font-size-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;
        @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.