SHeading <s-heading>

A heading that titles a page section. SHeading is the typed Vue 3 wrapper for Shopify's Polaris <s-heading> web component.

import { SHeading } from 'polaris-vue-elements'

Best practices

• Give every major section a heading. Headings form an outline of the interface that helps merchants find their way and see how content is organized.
• Let the component pick the heading level. It assigns the HTML level (h2, h3, h4) from how deeply it's nested, so screen readers get a correct document structure without you setting levels by hand.
• Be specific. Say what the section covers, for example "Product details" or "Customer details" rather than just "Details".
• Clamp lines only when you must. lineClamp can tame long headings in tight spaces like cards, but cutting a heading short can hide information merchants need.
• Style similar headings the same way. Headings for the same kind of content, such as every card in a list, should look alike.

See Shopify's best practices for <s-heading> for the full guidance.

Example

Default headingRenders as a semantic heading element by default.Presentational headingSame visual style, but stripped from the accessibility tree's heading structure. A long heading that gets truncated to a single line via lineClamp

<script setup>
import { SHeading, SParagraph } from 'polaris-vue-elements'
</script>

<template>
  <SHeading>Default heading</SHeading>
  <SParagraph>Renders as a semantic heading element by default.</SParagraph>

  <SHeading accessibilityRole="presentation">Presentational heading</SHeading>
  <SParagraph>Same visual style, but stripped from the accessibility tree's heading structure.</SParagraph>

  <SHeading :lineClamp="1" style="max-width: 220px">
    A long heading that gets truncated to a single line via lineClamp
  </SHeading>
</template>

Props

Prop	Type	Description
accessibilityRole	"heading" | "presentation" | "none"	The semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page. - heading: Identifies the element as a heading for assistive technologies. - none: Removes semantic meaning from the heading element. - presentation: Removes semantic meaning from the heading element.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Changes the visibility of the element. - visible: the element is visible to all users. - hidden: the element is removed from the accessibility tree but remains visible. - exclusive: the element is visually hidden but remains in the accessibility tree.
fontSize	"base" | "auto" | "small" | "large" | "large-100" | "large-200" | "large-300" | "large-400"	The font size of the heading. The named values also apply their matching line-height and letter-spacing: - 'small' maps to headingXs - 'base' maps to headingSm - 'large' / 'large-100' maps to headingMd - 'large-200' maps to headingLg - 'large-300' maps to headingXl - 'large-400' maps to heading2xl
lineClamp	number	Truncates the text content to the specified number of lines.

Slots

Slot	Description
default	The heading text displayed within the heading component, which provides a title or section header for content.