D.School Component Library

Heading 

<h1 class="o-heading">
      Heading
  </h1>
 
{% set base_class = heading.base_class|default('o-heading') %}
{% if heading.level and heading.text %}
  <h{{ heading.level }} class="{{ heading.type and heading.size ? heading_base_class ~ ' ' : '' }}{{ bem(base_class, heading.type, heading.size, heading.extra) }}"{{ attributes(heading.attributes) }}>
    {% if heading.link %}
      <a class="{{ bem(base_class, 'link') }}" href="{{ heading.link.url }}" {{ attributes(heading.link.attributes) }}>
        {{ heading.text }}
      </a>
    {% else %}
      {{ heading.text }}
    {% endif %}
  </h{{ heading.level }}>
{% endif %}
 
{
  "heading": {
    "level": "1",
    "text": "Heading"
  }
}
  • Content: 
    /* ------------------------------------ *\
  $HEADINGS
\* ------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

// D.School heading styles (matching Typography spec/examples in Figma)

/** Per specs, this should always be bold when Primary font is used. **/
.o-heading--h0-primary {
  @include o-typography-heading--h0('primary', 'bold');
}

.o-heading--h0-secondary {
  @include o-typography-heading--h0('secondary');
}

.o-heading--h0-secondary-bold {
  @include o-typography-heading--h0('secondary', 'bold');
}

.o-heading--h1-primary {
  @include o-typography-heading--h1('primary', 'bold');
}

.o-heading--h1-secondary {
  @include o-typography-heading--h1('secondary');
}

.o-heading--h1-secondary-bold {
  @include o-typography-heading--h1('secondary', 'bold');
}

.o-heading--h2-primary {
  @include o-typography-heading--h2('primary', 'bold');
}

.o-heading--h2-secondary {
  @include o-typography-heading--h2('secondary');
}

.o-heading--h2-secondary-bold {
  @include o-typography-heading--h2('secondary', 'bold');
}

.o-heading--h3-primary {
  @include o-typography-heading--h3('primary');
}

.o-heading--h3-secondary {
  @include o-typography-heading--h3('secondary', 'regular');
}

.o-heading--h3-secondary-bold {
  @include o-typography-heading--h3('secondary', 'bold');
}

.o-heading--h4-primary {
  @include o-typography-heading--h4('primary');
}

.o-heading--h4-secondary {
  @include o-typography-heading--h4('secondary');
}

.o-heading--h4-secondary-bold {
  @include o-typography-heading--h4('secondary', 'bold');
}

.o-heading--h5-primary {
  @include o-typography-heading--h5('primary', 'bold');
}

.o-heading--h5-secondary {
  @include o-typography-heading--h5('secondary');
}

.o-heading--h5-secondary-bold {
  @include o-typography-heading--h5('secondary', 'bold');
}

.o-heading--h6-primary {
  @include o-typography-heading--h6();
}
  • URL: /components/raw/heading/_heading.scss
  • Filesystem Path: components/01-atoms/text/heading/_heading.scss
  • Size: 1.9 KB

No notes defined.