SHeading <s-heading>

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

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.