BUX Component Development Platform

Headings: Heading 2 

<h2 class="bux-h2">
    This is a Heading 2 example
</h2>
 
{#

Heading

Available variables:

- heading_level:    Integer (1-6). Sets the semantic HTML tag (h1-h6) and the
                    corresponding BUX typography style class (bux-h1 to bux-h6).
- heading_text:     String. The text content of the heading.
- heading_is_alt:   Boolean. If true, appends the '--alt' modifier to the base
                    heading class (e.g., 'bux-h2--alt').
- heading_is_reveal: Boolean. If true, adds the 'bux-animate--reveal' class for
                    fade-in animation.

#}

{% set base_class = 'bux-h' ~ heading_level %}
{% set classes = [base_class] %}

{% if heading_is_alt %}
    {% set classes = classes|merge([base_class ~ '--alt']) %}
{% endif %}

{% if heading_is_reveal %}
    {% set classes = classes|merge(['bux-animate--reveal']) %}
{% endif %}

<h{{heading_level}} class="{{ classes|join(' ')|trim }}">
    {{ heading_text }}
</h{{heading_level}}>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
heading_text: This is a Heading 2 example
heading_level: 2
  • Content: 
    // Heading mixin.

@mixin heading(
  $size,
  $height,
  $weight,
  $color: $gray-dark-80,
  $font: $sans,
  $link-color: $scarlet
) {
  font-size: $size;
  line-height: rem-calc($height);
  font-weight: $weight;
  font-family: $font;
  color: $color;
  margin: 0;
  margin-bottom: $sp-8;
  a {
    text-decoration: none;
    color: $link-color;
    &:hover {
      text-decoration: underline;
    }
  }
}

// Heading elements at small breakpoint.
@include breakpoint(sm) {
  h1,
  .bux-h1 {
    @include heading($ts-28, 36, 900, $font: $serif);
  }
  h2,
  .bux-h2 {
    @include heading($ts-md, 30, 800);
  }
  h3,
  .bux-h3 {
    @include heading($ts-20, 26, 600);
  }
  h4,
  .bux-h4 {
    @include heading($ts-18, 24, 600);
  }
  h5,
  .bux-h5 {
    @include heading($ts-base, 24, 600);
  }
  h6,
  .bux-h6 {
    @include heading($ts-base, 24, 600);
  }

  // Alternate headings.
  h1.bux-h1--alt {
    @include heading($ts-28, 36, 800);
  }

  h2.bux-h2--alt {
    @include heading($ts-20, 26, 600);
  }
}

// Heading modifications at medium and up.
@include breakpoint(md) {
  h1,
  .bux-h1 {
    @include heading($ts-xl, 48, 900, $font: $serif);
  }
  h2,
  .bux-h2 {
    @include heading($ts-28, 36, 800);
  }
  h3,
  .bux-h3 {
    @include heading($ts-20, 26, 600);
  }

  // Alternate headings.
  h1.bux-h1--alt {
    @include heading($ts-xl, 48, 800);
  }
}
  • URL: /components/raw/heading/_heading.scss
  • Filesystem Path: src/components/heading/_heading.scss
  • Size: 1.4 KB

No notes defined.