Skip to content
On this page

Caption

Small additional title.

Usage

Basic Usage

Any caption should here preview
vue
<template>
  <p-caption>
    Any caption should here
  </p-caption>
</template>

Size

Caption have 2 sizes variant, there are xs and tn. Default size is xs.

Small caption should here Tiny caption should here preview
vue
<template>
  <p-caption size="xs">
    Small caption should here
  </p-caption>
  <p-caption size="tn">
    Tiny caption should here
  </p-caption>
</template>

Weight

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

Normal caption should here Medium caption should here Bold caption should here preview
vue
<template>
  <p-caption weight="normal">
    Normal caption should here
  </p-caption>
  <p-caption weight="medium">
    Medium caption should here
  </p-caption>
  <p-caption weight="bold">
    Bold caption should here
  </p-caption>
</template>

Transform

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

Normalcase caption should here Lowercase caption should here Capitalize caption should here Uppercase caption should here preview
vue
<template>
  <p-caption transform="normalcase">
    Normalcase caption should here
  </p-caption>
  <p-caption transform="lowercase">
    Lowercase caption should here
  </p-caption>
  <p-caption transform="capitalize">
    Capitalize caption should here
  </p-caption>
  <p-caption transform="uppercase">
    Uppercase caption should here
  </p-caption>
</template>

API

Props

PropsTypeDefaultDescription
sizeStringxsSize of caption, valid value is xs and tn
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 caption

Events

NameArgumentsDescription
There no event here

Released under the MIT License.