On this page Heading Heading

The m3e-heading component provides expressive, accessible headings for pages and sections

import "@m3e/web/heading";
 Usage

This section outlines usage examples and configuration guidance for the components in this package.

Typescale variants and sizes

The m3e-heading supports five variants: display (default), headline, title, and label. It supports three size variants: large, medium (default) and small. Use the variant and size attributes to change the typescale of a heading.

Display Large Display Medium Display Small Headline Large Headline Medium Headline Small Title Large Title Medium Title Small Label Large Label Medium Label Small 
<m3e-heading variant="display" size="large">Display Large</m3e-heading>
<m3e-heading variant="display" size="medium">Display Medium</m3e-heading>
<m3e-heading variant="display" size="small">Display Small</m3e-heading>
<!-- Additional variants omitted for brevity -->
 Emphasized typescale

Use the emphasized attribute to control whether a heading's typescale is emphasized.

Display Large Display Medium Display Small Headline Large Headline Medium Headline Small Title Large Title Medium Title Small Label Large Label Medium Label Small 
<m3e-heading variant="display" size="large" emphasized>Display Large</m3e-heading>
<m3e-heading variant="display" size="medium" emphasized>Display Medium</m3e-heading>
<m3e-heading variant="display" size="small" emphasized>Display Small</m3e-heading>
<!-- Additional variants omitted for brevity -->
 Accessibility

By default, headings are not given an ARIA role, indicating that they are treated as neutral, non-semantic elements in the accessibility tree unless explicitly referenced or annotated.

Use the level attribute to control whether a heading adopts the ARIA role="heading" and aria-level attributes. When level is set, role="heading" is applied and aria-level reflects the attribute's value. Supported values range from 1 to 6, aligning with semantic heading levels.

Native module support

The @m3e/web package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following. 

<script type="module" src="/node_modules/@m3e/web/dist/heading.js"></script>

In addition, you must use an import map to include dependencies. 

<script type="importmap">
  {
    "imports": {
      "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.0/",
      "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/+esm",
      "lit-html/directive.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directive.js",
      "lit-html/directives/if-defined.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/if-defined.js",
      "lit-html/directives/class-map.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/class-map.js",
      "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/+esm",
      "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/",
      "@m3e/web/core": "/node_modules/@m3e/web/dist/core.js"
    }
  }
</script>

For production builds, use the minified files to ensure optimal load performance.

API

The @m3e/web package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.