Features

Everything you need to ship faster

A short, friendly sentence that explains what this block is about.

@use 'sprucecss/scss/spruce' as *;

.block-heading {
  margin-inline: auto;
  max-inline-size: 44rem;
  text-align: center;
  @include layout-stack('xs');

  &--start {
    margin-inline: 0;
    text-align: start;
  }

  &__eyebrow {
    color: color('primary');
    font-size: config('font-size-sm', $typography);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  &__title {
    font-size: responsive-font-size(2.75rem, 35, '3vw + 1rem');
  }

  &__text {
    color: color('muted');
    font-size: config('font-size-lead', $typography);
  }
}

<header class="block-heading">
    <p class="block-heading__eyebrow">Features</p>
    <h2 class="block-heading__title" id="block-heading-title">Everything you need to ship faster</h2>
    <p class="block-heading__text">A short, friendly sentence that explains what this block is about.</p>
</header>

Block Heading

Technical Details

Set a heading object before you include it: { eyebrow, title, text, id, align }. The id labels the parent section (aria-labelledby).
Centered by default; align: 'start' (the .block-heading--start modifier) aligns it to the start for two-column layouts.
The title size is fluid with responsive-font-size().
Every block uses it, so their headings look the same in every style.