SectionHeading

The block that opens every page section: an eyebrow label, a heading and an optional lead paragraph.

Eyebrow with the K mark, heading-2 and leadDark · Grafite

Telecom

Portabilidade numérica sem atrito

Integrações SOA e BDO para prestadoras que precisam portar números com segurança e dentro dos prazos.

Eyebrow with the K mark, heading-2 and leadLight · Gelo

Telecom

Portabilidade numérica sem atrito

Integrações SOA e BDO para prestadoras que precisam portar números com segurança e dentro dos prazos.

Usage

Provide an eyebrow of one to three words (uppercase via the eyebrow style, in the eyebrow color, optionally preceded by the K mark), a heading in sentence case (display for h1, heading-2 for h2) and a lead of one or two sentences (lead, muted). The block is left-aligned and capped at text-measure; keep space-8 between it and the section content (the component adds it when content follows).

Do

• Write headings in sentence case: "Como trabalhamos".
• Keep the eyebrow to one to three words.
• Give the heading an id (headingId) and label the section with it (aria-labelledby).

Don't

• Center headings on content pages.
• Stack two eyebrows.
• Write eyebrows as sentences.
• Use the K mark more than once per view region.

Astro

---
import SectionHeading from '@monk-business/astro/SectionHeading.astro';
---

<section aria-labelledby="telecom">
  <SectionHeading
    eyebrow="Telecom"
    kmark
    title="Portabilidade numérica sem atrito"
    lead="Integrações SOA e BDO para prestadoras que precisam portar números com segurança e dentro dos prazos."
    headingId="telecom"
  />
</section>

HTML

<div class="mb-section-heading">
  <p class="mb-eyebrow"><span class="mb-kmark" aria-hidden="true"></span>Telecom</p>
  <h2 id="telecom">Portabilidade numérica sem atrito</h2>
  <p>Integrações SOA e BDO para prestadoras que precisam portar números com segurança e dentro dos prazos.</p>
</div>

Props

SectionHeading props · also accepts the attributes of <div>

Prop	Type	Default	Description
eyebrow	string	—	Eyebrow label of one to three words. Rendered uppercase.
title *	string	—	The heading text.
lead	string	—	The lead paragraph. The default slot replaces it when you need markup.
level	1| 2	2	Heading level: 1 for page titles (display style), 2 for sections (heading-2 style).
kmark	boolean	false	Precede the eyebrow with the K mark (at most once per view region).
headingId	string	—	id for the heading, to reference it from aria-labelledby on the section.
as	'div'| 'header'| 'hgroup'	'div'	Element that wraps the block.

* required.

Eyebrow props · also accepts the attributes of <p>

Prop	Type	Default	Description
as	'p'| 'span'| 'div'| 'figcaption'| 'h2'| 'h3'	'p'	Element to render.
kmark	boolean	false	Precede the label with the K mark. Use it at most once per view region.

* required.