Skip to content
On this page

Heading

Titles of each major section of a page in the interface.

Headings are used as the titles of each major section of a page in the interface.

Usage

Use for the title of each top-level page section. The default element of heading are h3

Basic Usage

Any title should here

preview
vue
<template>
  <p-heading>
    Any title should here
  </p-heading>
</template>

Setting The Element

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
preview
vue
<template>
  <p-heading element="h1">
    Heading 1
  </p-heading>
  <p-heading element="h2">
    Heading 2
  </p-heading>
  <p-heading element="h3">
    Heading 3
  </p-heading>
  <p-heading element="h4">
    Heading 4
  </p-heading>
  <p-heading element="h5">
    Heading 5
  </p-heading>
  <p-heading element="h6">
    Heading 6
  </p-heading>
</template>

Weight

Heading have 3 weights variant, there are normal, medium and bold. Default weight is normal.

Normal heading title

Medium heading title

Bold heading title

preview
vue
<template>
  <p-heading weight="normal">
    Normal heading title
  </p-heading>
  <p-heading weight="medium">
    Medium heading title
  </p-heading>
  <p-heading weight="bold">
    Bold heading title
  </p-heading>
</template>

Transform

Heading have 4 transforms variant, there are normalcase, lowercase, capitalize and uppercase. Default transform is normalcase.

Normalcase heading title

Lowercase heading title

Capitalize heading title

Uppercase heading title

preview
vue
<template>
  <p-heading transform="normalcase">
    Normalcase heading title
  </p-heading>
  <p-heading transform="lowercase">
    Lowercase heading title
  </p-heading>
  <p-heading transform="capitalize">
    Capitalize heading title
  </p-heading>
  <p-heading transform="uppercase">
    Uppercase heading title
  </p-heading>
</template>

API

Props

PropsTypeDefaultDescription
elementStringh3Heading element, valid value is h1 to h6
weightStringnormalWeight of subheading, valid value is normal, medium and bold
transformStringnormalcaseTransform of subheading, valid value is normalcase, lowercase, capitalize and uppercase

Slots

NameDescription
defaultContent to place in heading

Events

NameArgumentsDescription
There no event here

See Also

Released under the MIT License.