Vechtsport Online Components for Magento 2

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 And Class 1 -->
<h1 class="heading heading--first-level heading--red">
    First level heading - tag and class -- in red
</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 And Class 1 */
{
  "tag": "h1",
  "class": "heading heading--first-level heading--red",
  "text": "First level heading - tag and class -- in red"
}


/* 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-italic     : 'Evogria Italic' !default;
$headings-font-family            : 'Evogria Regular' !default;
$headings-font-weight            : 700 !default;
$headings-line-height            : $font-line-height !default;
$headings-color                  : $color-secondary !default;

$headings-text-transform         : none !default;
$headings-text-transform--page   : uppercase !default;

$headings-text-transform--red    : uppercase !default;
$headings-font-weight--red       : normal !default;
$headings-color--red             : $red !default;

$heading-font-size--page         : 24px !default;
$heading-font-size--first-level  : 18px !default;
$heading-font-size--second-level : 18px !default;
$heading-font-size--third-level  : 14px !default;
$heading-font-size--fourth-level : 14px !default;
$heading-font-size--fifth-level  : 12px !default;
$heading-font-size--sixth-level  : 12px !default;

.heading {
    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;
    }

    &--second-level {
        font-size: $heading-font-size--second-level;
    }

    &--third-level {
        font-size: $heading-font-size--third-level;
    }

    &--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;
    }

    &--page {
        margin: $headings-margin--page;
        font-size: $heading-font-size--page;
        text-transform: $headings-text-transform--page;
    }

    &--red {
        color: $headings-color--red;
        text-transform: $headings-text-transform--red;
        font-weight: $headings-font-weight--red;
        line-height: 165%;
        letter-spacing: -0.005em;
    }

    &--white {
        color: $white;
    }
}

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/01-globals/typography/heading/_heading.scss
  • Size: 2.5 KB

There are no notes for this item.