JMT Alimentation Animal
Project version : 1.0.3

Heading: Alt Color 

<h1 class="alt--color">This is a title</h1>
<h2 class="alt--color">This is a title</h2>
<h3 class="alt--color">This is a title</h3>
<h4 class="alt--color">This is a title</h4>
<h5 class="alt--color">This is a title</h5>
<h6 class="alt--color">This is a title</h6>
 
<h1 class="alt--color">This is a title</h1>
<h2 class="alt--color">This is a title</h2>
<h3 class="alt--color">This is a title</h3>
<h4 class="alt--color">This is a title</h4>
<h5 class="alt--color">This is a title</h5>
<h6 class="alt--color">This is a title</h6>
 
/* No context defined for this component. */
  • Content: 
    h1, h2, h3, h4, h5, h6{
    font-family: $font-primary;
    font-display: swap;
    font-size: 1.1em;
    line-height: 1.1;
    font-weight: 400;
    margin: 0;
    margin-bottom: $margin-m;

    em, strong, b {
        font-style: initial;
        font-weight: initial;
    }

    &.alt--color:not(h1), em {
        color: $c-heading-color-alt;
    }

    &.alt--font {
        font-weight: 700;
        font-family: $font-secondary;
    }
}

h1, .h1 { font-size: 2.5em }
h2, .h2 { 
    font-size: 2.2em;
    &.alt--font { font-size: 1.9em }
}
h3, .h3 { 
    font-size: 1.9em;
    &.alt--font { font-size: 1.6em }
}
h4, .h4 { 
    font-size: 1.6em;
    &.alt--font { font-size: 1.3em }
}
h5, .h5 { 
    font-size: 1.4em;
    &.alt--font { font-size: 1.1em }
}
h6, .h6 { font-size: 1.1em }

@include mediaWQuery($media-query-m) {
    h1, .h1 { font-size: 3em  }
    h2, .h2 { 
        font-size: 2.7em;
        &.alt--font { font-size: 2.4em }
    }
    h3, .h3 { 
        font-size: 2.4em;
        &.alt--font { font-size: 2.1em }
    }
    h4, .h4 { 
        font-size: 2.1em;
        &.alt--font { font-size: 1.8em }
    }
    h5, .h5 { 
        font-size: 1.8em;
        &.alt--font { font-size: 1.5em }
    }
    h6, .h6 { 
        font-size: 1.5em;
        &.alt--font { font-size: 1.3em }
    }
}

p + *, address + *, blockquote + *, ul + * { 
    margin-top: 1.5rem;
}

h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * {
    margin-top: .5rem;
    @include mediaWQuery($media-query-m) {
        margin-top: 1rem;
    }
}

* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
    margin-top: 1rem;
    @include mediaWQuery($media-query-m) {
        margin-top: 2rem;
    }
}

h1 + p, 
h2 + p, 
h3 + p, 
h4 + p, 
h5 + p, 
h6 + p { 
    margin-top: 0;
}
  • URL: /components/raw/heading/_heading.scss
  • Filesystem Path: components/04-elements/01-typography/01-heading/_heading.scss
  • Size: 1.8 KB

There are no notes for this item.