Heading

This is the heading component which is used as sections, components and pages titles. Passing default_class to component can cancel the inclusion of the .heading class.

100 years Of Impact
.heading--medium
Heading with special styles such as blue background and gold border.
100 years Of Impact
.heading--large
Heading with special styles such as blue background and gold border.
100 years Of Impact
.heading--xlarge
Heading with special styles such as blue background and gold border.
100 years Of Impact
.heading--right
Heading with right aligned text.
100 years Of Impact
Markup Details
                            {{ attach_library('goizueta_theme/heading') }}

{# The heading component accommodates for the following scenarios:
- Title is a single string with no changing font weight.
- Title is split into two parts, light font weight and heavy font weight.
- Title could be plain text or a link.#}
<div class="heading--wrapper">
  <h{{ heading.heading_level|default('2') }} class="{{ heading.default_class is defined ? heading.default_class : 'heading' }} {{ modifier_class }} {{ heading.classes ? '' ~ heading.classes }}
    {{- heading.attributes ? heading.attributes.class -}}"
    {{- heading.attributes ? heading.attributes|without(class) -}}>
    {% if heading.url %}
      <a href="{{ heading.url }}">
        {% if heading.title_light %}
          <span class="heading__light">{{ heading.title_light }}</span>
        {% endif %}
        {% if heading.title_heavy %}
          <span class="heading__heavy">{{ heading.title_heavy }}</span>
        {% endif %}
      </a>
    {% else %}
      {% if heading.title_light %}
        <span class="heading__light">{{ heading.title_light }}</span>
      {% endif %}
      {% if heading.title_heavy %}
        <span class="heading__heavy">{{ heading.title_heavy }}</span>
      {% endif %}
    {% endif %}
  </h{{ heading.heading_level|default('2') }}>
</div>