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"	Sets 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: defines the element as a heading to a page or section. - presentation: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree. - none: a synonym for the presentation role.
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.
lineClamp	number	Truncates the text content to the specified number of lines.

Slots

Slot	Description
default	The content of the Heading.