Homecomponentsinformational

Alpha

This component is in development. There could be breaking changes made to it in a non-major release of Prism. Please use with caution.

Use Heading to display titles and subtitles.

Clara Delcroix

Nutritionist

Additional Services

Dietician

Open in Playroom

Level

Use the level property to set the size of the heading.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Open in Playroom

Weight

Use the weight property to set the heading thickness.

Level 1 and Strong

Level 1 and Weak

Level 2 and Strong

Level 2 and Weak

Level 3 and Strong

Level 3 and Weak

Level 4 and Strong

Level 4 and Weak

Level 5 and Strong

Level 5 and Weak

Level 6 and Strong

Level 6 and Weak

Open in Playroom

By default, the semantic heading level matches the visual heading level, e.g. <Heading level="2"> will render an h2 element. If you need the semantics to be different from the visuals, you can provide the desired HTML tag via the as property.

This looks like an H3, but it's actually an H4.

Open in Playroom

Alignment

Use the align property to align the heading horizontally.

Align start

Align center

Align end

Open in Playroom

Truncation

Use the truncate property to truncate the heading text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dapibus magna at velit dapibus, id dapibus enim pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Open in Playroom

Text transformation

Use the transform property to transform the casing of the heading text.

This is uppercase

This is lowercase

This is capitalized

Open in Playroom

Examples

Service description

A typical use of Heading is to show the service description.

Our dentists Services

Dental check-up

Dental checkups are essential for a healthy smile.

Dental care

The latest techniques can treat missing or damaged teeth, gum disease and all the problems that cause you discomfort or anxiety.

Aesthetic dentistry

A smile is worth a thousand words.

Open in Playroom

API

level

Required

Applies the typography styles for the heading.

children

Required

The text to display inside heading.

ReactNode

weight

The weight of the heading.

strong

weak

The element used for the root node.

span

align

The horizontal alignment of the heading.

ResponsiveValue

truncate

Truncate the heading if set.

true

false

color

The color of the heading.

inherit

white

dark

subdued

transform

Change the case of the text.

none

capitalize

lowercase

uppercase

data

An object with the data keys and values.

DataAttributeMap

ref

Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Ref<HTMLHtmlElement>

key

Key | null

manifest

string

defaultChecked

true

false

defaultValue

string | number | readonly string[]

suppressContentEditableWarning

true

false

suppressHydrationWarning

true

false

accessKey

string

autoCapitalize

(string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters"

autoFocus

true

false

className

string

contentEditable

"inherit" | Booleanish | "plaintext-only"

contextMenu

string

dir

string

draggable

Booleanish

enterKeyHint

done

enter

send

hidden

true

false

string

lang

string

nonce

string

slot

string

spellCheck

Booleanish

style

CSSProperties

tabIndex

number

title

string

translate

yes

radioGroup

string

role

AriaRole

about

string

content

string

datatype

string

inlist

any

prefix

string

property

string

rel

string

resource

string

rev

string

typeof

string

vocab

string

autoCorrect

string

autoSave

string

results

number

security

string

unselectable

off

popover

auto

manual

popoverTargetAction

hide

show

toggle

popoverTarget

string

inert

@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

true

false

inputMode

Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}

none

text

tel

url

numeric

decimal

Specify that a standard HTML element should behave like a defined custom built-in element @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}

string

aria-activedescendant

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

string

aria-atomic

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

Booleanish

aria-autocomplete

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

none

both

inline

list

aria-braillelabel

Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label.

string

aria-brailleroledescription

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription.

string

aria-busy

Booleanish

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.

boolean | "mixed" | "false" | "true"

aria-colcount

Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.

number

aria-colindex

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.

number

aria-colindextext

Defines a human readable text alternative of aria-colindex. @see aria-rowindextext.

string

aria-colspan

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.

number

aria-controls

Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.

string

aria-current

Indicates the element that represents the current item within a container or set of related elements.

aria-describedby

Identifies the element (or elements) that describes the object. @see aria-labelledby

string

aria-description

Defines a string value that describes or annotates the current element. @see related aria-describedby.

string

aria-details

Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.

string

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.

Booleanish

aria-dropeffect

Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1

none

copy

move

link

execute

popup

aria-errormessage

Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.

string

aria-expanded

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Booleanish

aria-flowto

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

string

aria-grabbed

Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1

Booleanish

aria-haspopup

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

aria-hidden

Indicates whether the element is exposed to an accessibility API. @see aria-disabled.

Booleanish

aria-invalid

Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.

boolean | "false" | "true" | "grammar" | "spelling"

aria-keyshortcuts

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

string

aria-label

Defines a string value that labels the current element. @see aria-labelledby.

string

aria-labelledby

Identifies the element (or elements) that labels the current element. @see aria-describedby.

string

aria-level

Defines the hierarchical level of an element within a structure.

number

aria-live

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

off

assertive

polite

aria-modal

Indicates whether an element is modal when displayed.

Booleanish

aria-multiline

Indicates whether a text box accepts multiple lines of input or only a single line.

Booleanish

aria-multiselectable

Indicates that the user may select more than one item from the current selectable descendants.

Booleanish

aria-orientation

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

horizontal

vertical

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.

string

aria-placeholder

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

string

aria-posinset

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.

number

aria-pressed

Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.

boolean | "mixed" | "false" | "true"

aria-readonly

Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.

Booleanish

aria-relevant

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.

all

text

additions

additions removals

additions text

removals

removals additions

removals text

text additions

text removals

aria-required

Indicates that user input is required on the element before a form may be submitted.

Booleanish

aria-roledescription

Defines a human-readable, author-localized description for the role of an element.

string

aria-rowcount

Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.

number

aria-rowindex

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.

number

aria-rowindextext

Defines a human readable text alternative of aria-rowindex. @see aria-colindextext.

string

aria-rowspan

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.

number

aria-selected

Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed.

Booleanish

aria-setsize

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.

number

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order.

none

ascending

descending

other

aria-valuemax

Defines the maximum allowed value for a range widget.

number

aria-valuemin

Defines the minimum allowed value for a range widget.

number

aria-valuenow

Defines the current value for a range widget. @see aria-valuetext.

number

aria-valuetext

Defines the human readable text alternative of aria-valuenow for a range widget.

string

dangerouslySetInnerHTML

{ __html: string | TrustedHTML; }

onCopy

ClipboardEventHandler<HTMLHtmlElement>

onCopyCapture

ClipboardEventHandler<HTMLHtmlElement>

onCut

ClipboardEventHandler<HTMLHtmlElement>

onCutCapture

ClipboardEventHandler<HTMLHtmlElement>

onPaste

ClipboardEventHandler<HTMLHtmlElement>

onPasteCapture

ClipboardEventHandler<HTMLHtmlElement>

onCompositionEnd

CompositionEventHandler<HTMLHtmlElement>

onCompositionEndCapture

CompositionEventHandler<HTMLHtmlElement>

onCompositionStart

CompositionEventHandler<HTMLHtmlElement>

onCompositionStartCapture

CompositionEventHandler<HTMLHtmlElement>

onCompositionUpdate

CompositionEventHandler<HTMLHtmlElement>

onCompositionUpdateCapture

CompositionEventHandler<HTMLHtmlElement>

onFocus

FocusEventHandler<HTMLHtmlElement>

onFocusCapture

FocusEventHandler<HTMLHtmlElement>

onBlur

FocusEventHandler<HTMLHtmlElement>

onBlurCapture

FocusEventHandler<HTMLHtmlElement>

onChange

FormEventHandler<HTMLHtmlElement>

onChangeCapture

FormEventHandler<HTMLHtmlElement>

onBeforeInput

FormEventHandler<HTMLHtmlElement>

onBeforeInputCapture

FormEventHandler<HTMLHtmlElement>

onInput

FormEventHandler<HTMLHtmlElement>

onInputCapture

FormEventHandler<HTMLHtmlElement>

onReset

FormEventHandler<HTMLHtmlElement>

onResetCapture

FormEventHandler<HTMLHtmlElement>

onSubmit

FormEventHandler<HTMLHtmlElement>

onSubmitCapture

FormEventHandler<HTMLHtmlElement>

onInvalid

FormEventHandler<HTMLHtmlElement>

onInvalidCapture

FormEventHandler<HTMLHtmlElement>

onLoad

ReactEventHandler<HTMLHtmlElement>

onLoadCapture

ReactEventHandler<HTMLHtmlElement>

onError

ReactEventHandler<HTMLHtmlElement>

onErrorCapture

ReactEventHandler<HTMLHtmlElement>

onKeyDown

KeyboardEventHandler<HTMLHtmlElement>

onKeyDownCapture

KeyboardEventHandler<HTMLHtmlElement>

onKeyPress

@deprecated Use `onKeyUp` or `onKeyDown` instead

KeyboardEventHandler<HTMLHtmlElement>

onKeyPressCapture

@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead

KeyboardEventHandler<HTMLHtmlElement>

onKeyUp

KeyboardEventHandler<HTMLHtmlElement>

onKeyUpCapture

KeyboardEventHandler<HTMLHtmlElement>

onAbort

ReactEventHandler<HTMLHtmlElement>

onAbortCapture

ReactEventHandler<HTMLHtmlElement>

onCanPlay

ReactEventHandler<HTMLHtmlElement>

onCanPlayCapture

ReactEventHandler<HTMLHtmlElement>

onCanPlayThrough

ReactEventHandler<HTMLHtmlElement>

onCanPlayThroughCapture

ReactEventHandler<HTMLHtmlElement>

onDurationChange

ReactEventHandler<HTMLHtmlElement>

onDurationChangeCapture

ReactEventHandler<HTMLHtmlElement>

onEmptied

ReactEventHandler<HTMLHtmlElement>

onEmptiedCapture

ReactEventHandler<HTMLHtmlElement>

onEncrypted

ReactEventHandler<HTMLHtmlElement>

onEncryptedCapture

ReactEventHandler<HTMLHtmlElement>

onEnded

ReactEventHandler<HTMLHtmlElement>

onEndedCapture

ReactEventHandler<HTMLHtmlElement>

onLoadedData

ReactEventHandler<HTMLHtmlElement>

onLoadedDataCapture

ReactEventHandler<HTMLHtmlElement>

onLoadedMetadata

ReactEventHandler<HTMLHtmlElement>

onLoadedMetadataCapture

ReactEventHandler<HTMLHtmlElement>

onLoadStart

ReactEventHandler<HTMLHtmlElement>

onLoadStartCapture

ReactEventHandler<HTMLHtmlElement>

onPause

ReactEventHandler<HTMLHtmlElement>

onPauseCapture

ReactEventHandler<HTMLHtmlElement>

onPlay

ReactEventHandler<HTMLHtmlElement>

onPlayCapture

ReactEventHandler<HTMLHtmlElement>

onPlaying

ReactEventHandler<HTMLHtmlElement>

onPlayingCapture

ReactEventHandler<HTMLHtmlElement>

onProgress

ReactEventHandler<HTMLHtmlElement>

onProgressCapture

ReactEventHandler<HTMLHtmlElement>

onRateChange

ReactEventHandler<HTMLHtmlElement>

onRateChangeCapture

ReactEventHandler<HTMLHtmlElement>

onResize

ReactEventHandler<HTMLHtmlElement>

onResizeCapture

ReactEventHandler<HTMLHtmlElement>

onSeeked

ReactEventHandler<HTMLHtmlElement>

onSeekedCapture

ReactEventHandler<HTMLHtmlElement>

onSeeking

ReactEventHandler<HTMLHtmlElement>

onSeekingCapture

ReactEventHandler<HTMLHtmlElement>

onStalled

ReactEventHandler<HTMLHtmlElement>

onStalledCapture

ReactEventHandler<HTMLHtmlElement>

onSuspend

ReactEventHandler<HTMLHtmlElement>

onSuspendCapture

ReactEventHandler<HTMLHtmlElement>

onTimeUpdate

ReactEventHandler<HTMLHtmlElement>

onTimeUpdateCapture

ReactEventHandler<HTMLHtmlElement>

onVolumeChange

ReactEventHandler<HTMLHtmlElement>

onVolumeChangeCapture

ReactEventHandler<HTMLHtmlElement>

onWaiting

ReactEventHandler<HTMLHtmlElement>

onWaitingCapture

ReactEventHandler<HTMLHtmlElement>

onAuxClick

MouseEventHandler<HTMLHtmlElement>

onAuxClickCapture

MouseEventHandler<HTMLHtmlElement>

onClick

MouseEventHandler<HTMLHtmlElement>

onClickCapture

MouseEventHandler<HTMLHtmlElement>

onContextMenu

MouseEventHandler<HTMLHtmlElement>

onContextMenuCapture

MouseEventHandler<HTMLHtmlElement>

onDoubleClick

MouseEventHandler<HTMLHtmlElement>

onDoubleClickCapture

MouseEventHandler<HTMLHtmlElement>

onDrag

DragEventHandler<HTMLHtmlElement>

onDragCapture

DragEventHandler<HTMLHtmlElement>

onDragEnd

DragEventHandler<HTMLHtmlElement>

onDragEndCapture

DragEventHandler<HTMLHtmlElement>

onDragEnter

DragEventHandler<HTMLHtmlElement>

onDragEnterCapture

DragEventHandler<HTMLHtmlElement>

onDragExit

DragEventHandler<HTMLHtmlElement>

onDragExitCapture

DragEventHandler<HTMLHtmlElement>

onDragLeave

DragEventHandler<HTMLHtmlElement>

onDragLeaveCapture

DragEventHandler<HTMLHtmlElement>

onDragOver

DragEventHandler<HTMLHtmlElement>

onDragOverCapture

DragEventHandler<HTMLHtmlElement>

onDragStart

DragEventHandler<HTMLHtmlElement>

onDragStartCapture

DragEventHandler<HTMLHtmlElement>

onDrop

DragEventHandler<HTMLHtmlElement>

onDropCapture

DragEventHandler<HTMLHtmlElement>

onMouseDown

MouseEventHandler<HTMLHtmlElement>

onMouseDownCapture

MouseEventHandler<HTMLHtmlElement>

onMouseEnter

MouseEventHandler<HTMLHtmlElement>

onMouseLeave

MouseEventHandler<HTMLHtmlElement>

onMouseMove

MouseEventHandler<HTMLHtmlElement>

onMouseMoveCapture

MouseEventHandler<HTMLHtmlElement>

onMouseOut

MouseEventHandler<HTMLHtmlElement>

onMouseOutCapture

MouseEventHandler<HTMLHtmlElement>

onMouseOver

MouseEventHandler<HTMLHtmlElement>

onMouseOverCapture

MouseEventHandler<HTMLHtmlElement>

onMouseUp

MouseEventHandler<HTMLHtmlElement>

onMouseUpCapture

MouseEventHandler<HTMLHtmlElement>

onSelect

ReactEventHandler<HTMLHtmlElement>

onSelectCapture

ReactEventHandler<HTMLHtmlElement>

onTouchCancel

TouchEventHandler<HTMLHtmlElement>

onTouchCancelCapture

TouchEventHandler<HTMLHtmlElement>

onTouchEnd

TouchEventHandler<HTMLHtmlElement>

onTouchEndCapture

TouchEventHandler<HTMLHtmlElement>

onTouchMove

TouchEventHandler<HTMLHtmlElement>

onTouchMoveCapture

TouchEventHandler<HTMLHtmlElement>

onTouchStart

TouchEventHandler<HTMLHtmlElement>

onTouchStartCapture

TouchEventHandler<HTMLHtmlElement>

onPointerDown

PointerEventHandler<HTMLHtmlElement>

onPointerDownCapture

PointerEventHandler<HTMLHtmlElement>

onPointerMove

PointerEventHandler<HTMLHtmlElement>

onPointerMoveCapture

PointerEventHandler<HTMLHtmlElement>

onPointerUp

PointerEventHandler<HTMLHtmlElement>

onPointerUpCapture

PointerEventHandler<HTMLHtmlElement>

onPointerCancel

PointerEventHandler<HTMLHtmlElement>

onPointerCancelCapture

PointerEventHandler<HTMLHtmlElement>

onPointerEnter

PointerEventHandler<HTMLHtmlElement>

onPointerLeave

PointerEventHandler<HTMLHtmlElement>

onPointerOver

PointerEventHandler<HTMLHtmlElement>

onPointerOverCapture

PointerEventHandler<HTMLHtmlElement>

onPointerOut

PointerEventHandler<HTMLHtmlElement>

onPointerOutCapture

PointerEventHandler<HTMLHtmlElement>

onGotPointerCapture

PointerEventHandler<HTMLHtmlElement>

onGotPointerCaptureCapture

PointerEventHandler<HTMLHtmlElement>

onLostPointerCapture

PointerEventHandler<HTMLHtmlElement>

onLostPointerCaptureCapture

PointerEventHandler<HTMLHtmlElement>

onScroll

UIEventHandler<HTMLHtmlElement>

onScrollCapture

UIEventHandler<HTMLHtmlElement>

onWheel

WheelEventHandler<HTMLHtmlElement>

onWheelCapture

WheelEventHandler<HTMLHtmlElement>

onAnimationStart

AnimationEventHandler<HTMLHtmlElement>

onAnimationStartCapture

AnimationEventHandler<HTMLHtmlElement>

onAnimationEnd

AnimationEventHandler<HTMLHtmlElement>

onAnimationEndCapture

AnimationEventHandler<HTMLHtmlElement>

onAnimationIteration

AnimationEventHandler<HTMLHtmlElement>

onAnimationIterationCapture

AnimationEventHandler<HTMLHtmlElement>

onToggle

ToggleEventHandler<HTMLHtmlElement>

onBeforeToggle

ToggleEventHandler<HTMLHtmlElement>

onTransitionCancel

TransitionEventHandler<HTMLHtmlElement>

onTransitionCancelCapture

TransitionEventHandler<HTMLHtmlElement>

onTransitionEnd

TransitionEventHandler<HTMLHtmlElement>

onTransitionEndCapture

TransitionEventHandler<HTMLHtmlElement>

onTransitionRun

TransitionEventHandler<HTMLHtmlElement>

onTransitionRunCapture

TransitionEventHandler<HTMLHtmlElement>

onTransitionStart

TransitionEventHandler<HTMLHtmlElement>

onTransitionStartCapture

TransitionEventHandler<HTMLHtmlElement>

itemID

string

itemProp

string

itemRef

string

itemScope

true

false

itemType

string