DOTD Component Library

Heading: Xxl 

<h1 class="o-heading o-heading--xxl">
      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",
    "size": "xxl"
  }
}
  • Content: 
    /* ------------------------------------ *\
  $HEADINGS
\* ------------------------------------ */

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

.o-heading--xxl,
h1 {
  color: var(--dotd-color-content-secondary-strong);
  @include o-typography-display--lg('black');
}

.o-heading--xl,
h2 {
  color: var(--dotd-color-content-secondary-strong);
  @include o-typography-display--md('black');
}

.o-heading--lg,
h3 {
  color: var(--dotd-color-content-secondary-strong);
  @include o-typography-display--sm('black');
}

.o-heading--md,
h4 {
  color: var(--dotd-color-content-secondary-strong);
  @include o-typography-heading--lg('bold');
}

.o-heading--sm,
h5 {
  color: var(--dotd-color-content-secondary-strong);
  @include o-typography-heading--md('bold');
}

.o-heading--xs,
h6 {
  color: var(--dotd-color-content-secondary-strong);
  @include o-typography-heading--sm('bold');
}

.o-heading--xxs {
  color: var(--dotd-color-content-secondary-strong);
  @include o-typography-body--lg('bold');
}
  • URL: /components/raw/heading/_heading.scss
  • Filesystem Path: components/01-atoms/text/heading/_heading.scss
  • Size: 991 Bytes

No notes defined.