Heading Block

Line

Inward

Heading

vue

<template>
 <HeadingBlock
  type="line"
  line-position="inward"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line"
  line-position="inward"
  line-color="primary-subtle"
  line-border-width="3"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line"
  line-position="inward"
  line-color="green-500"
  line-border-width="4"
  line-width="2em"
  line-margin="0.5em"
  line-style="dotted"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Outward

Heading

vue

<template>
 <HeadingBlock
  type="line"
  line-position="outward"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line"
  line-position="outward"
  line-color="primary-subtle"
  line-border-width="3"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line"
  line-position="outward"
  line-color="green-500"
  line-border-width="4"
  line-width="2em"
  line-margin="0.5em"
  line-style="dashed"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Divider

Heading

vue

<template>
 <HeadingBlock
  type="divider"
 >
  <b-h level="3">
   Heading
  </b-h>
  <template #divider>
   <b-icon
    icon="bi:chat"
    size="lg"
   />
  </template>
 </HeadingBlock>
 <HeadingBlock
  type="divider"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
  <template #divider>
   <b-icon
    icon="bi:star-fill"
    text-color="yellow-500"
    size="lg"
   />
  </template>
 </HeadingBlock>
 <HeadingBlock
  type="divider"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
  <template #divider>
   <b-icon
    text-color="primary"
    icon="bi:circle"
    size="lg"
   />
  </template>
 </HeadingBlock>
</template>

Line

 Heading 
 Heading 
 Heading 

vue

<template>
 <HeadingBlock
  type="divider"
  line
  line-border-width="4"
 >
  <b-h level="3">
   Heading
  </b-h>
  <template #divider>
   <b-icon
    icon="bi:chat"
    size="lg"
   />
  </template>
 </HeadingBlock>
 <HeadingBlock
  type="divider"
  line
  line-border-width="4"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
  <template #divider>
   <b-icon
    icon="bi:star-fill"
    text-color="yellow-500"
    size="lg"
   />
  </template>
 </HeadingBlock>
 <HeadingBlock
  type="divider"
  line
  line-border-width="4"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
  <template #divider>
   <b-icon
    icon="bi:circle"
    text-color="primary"
    size="lg"
   />
  </template>
 </HeadingBlock>
</template>

Full Line

Single

Heading

vue

<template>
 <HeadingBlock
  type="line-fluid"
  line="single"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="single"
  line-color="primary-subtle"
  line-border-width="3"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="single"
  line-color="green-500"
  line-border-width="4"
  line-width="2em"
  line-margin="0.5em"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Dashed Single

Heading

vue

<template>
 <HeadingBlock
  type="line-fluid"
  line="single"
  line-style="dashed"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="single"
  line-style="dashed"
  line-color="primary-subtle"
  line-border-width="3"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="single"
  line-style="dashed"
  line-color="green-500"
  line-border-width="4"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Dotted Single

Heading

vue

<template>
 <HeadingBlock
  type="line-fluid"
  line="single"
  line-style="dotted"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="single"
  line-style="dotted"
  line-color="primary-subtle"
  line-border-width="3"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="single"
  line-style="dotted"
  line-color="green-500"
  line-border-width="4"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Double

Heading

vue

<template>
 <HeadingBlock
  type="line-fluid"
  line="double"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="double"
  line-color="primary-subtle"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="double"
  line-color="green-500"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Dashed Double

Heading

vue

<template>
 <HeadingBlock
  type="line-fluid"
  line="double"
  line-style="dashed"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="double"
  line-style="dashed"
  line-color="primary-subtle"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="double"
  line-style="dashed"
  line-color="green-500"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Dotted Double

Heading

vue

<template>
 <HeadingBlock
  type="line-fluid"
  line="double"
  line-style="dotted"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="double"
  line-style="dotted"
  line-color="primary-subtle"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="line-fluid"
  line="double"
  line-style="dotted"
  line-color="green-500"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Bar

Bottom

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

vue

<template>
 <HeadingBlock
  type="bar"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="bar"
  bar-color="primary-subtle"
  bar-width="4em"
  bar-border-width="4"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="bar"
  bar-color="green-500"
  bar-width="5em"
  bar-border-width="5"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
</template>

Top

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

vue

<template>
 <HeadingBlock
  type="bar"
  bar-position="top"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="bar"
  bar-position="top"
  bar-color="primary-subtle"
  bar-width="4em"
  bar-border-width="4"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="bar"
  bar-position="top"
  bar-color="green-500"
  bar-width="5em"
  bar-border-width="5"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
</template>

Dual Bar

Heading

vue

<template>
 <HeadingBlock
  type="dual-bar"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="dual-bar"
  bar-color="primary-subtle"
  bar-border-width="6"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="dual-bar"
  bar-color="green-500"
  bar-border-width="8"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Side Bar

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

vue

<template>
 <HeadingBlock
  type="side-bar"
  bar-border-width="5"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="side-bar"
  bar-color="primary-subtle"
  bar-border-width="8"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
</template>

Maker

Square Top

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

vue

<template>
 <HeadingBlock
  type="maker"
  maker="square"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="maker"
  maker="square"
  maker-color="primary-subtle"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="maker"
  maker="square"
  maker-color="green-500"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
</template>

Circle Top

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

vue

<template>
 <HeadingBlock
  type="maker"
  maker="circle"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="maker"
  maker="circle"
  maker-color="primary-subtle"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="maker"
  maker="circle"
  maker-color="green-500"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
</template>

Square Side

Heading

vue

<template>
 <HeadingBlock
  type="maker"
  maker="square"
  maker-position="side"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="maker"
  maker="square"
  maker-position="side"
  maker-color="green-500"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Circle Side

Heading

vue

<template>
 <HeadingBlock
  type="maker"
  maker="circle"
  maker-position="side"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
 <HeadingBlock
  type="maker"
  maker="circle"
  maker-position="side"
  maker-color="green-500"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
 </HeadingBlock>
</template>

Square Bottom

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

vue

<template>
 <HeadingBlock
  type="maker"
  maker="square"
  maker-position="bottom"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="maker"
  maker="square"
  maker-position="bottom"
  maker-color="primary-subtle"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="maker"
  maker="square"
  maker-position="bottom"
  maker-color="green-500"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
</template>

Circle Bottom

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

vue

<template>
 <HeadingBlock
  type="maker"
  maker="circle"
  maker-position="bottom"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="maker"
  maker="circle"
  maker-position="bottom"
  maker-color="primary-subtle"
  text-alignment="center"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="maker"
  maker="circle"
  maker-position="bottom"
  maker-color="green-500"
  text-alignment="end"
 >
  <b-h level="3">
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
</template>

Box

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

Heading

This is a subheading that provides more detailed information about the main heading.

vue

<template>
 <HeadingBlock
  type="box"
 >
  <b-h
   level="3"
   padding="t-3"
  >
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="box"
  box-border-color="primary-subtle"
  box-height="6em"
  text-alignment="center"
 >
  <b-h
   level="3"
   padding="t-3"
  >
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <HeadingBlock
  type="box"
  box-border-width="4"
  box-border-color="green-200"
  box-height="7em"
  text-alignment="end"
 >
  <b-h
   level="3"
   padding="t-3"
  >
   Heading
  </b-h>
  <b-p>
   This is a subheading that provides more detailed information about the main heading.
  </b-p>
 </HeadingBlock>
 <hr />
</template>

Bootstrap

Heading Block

Line

Inward

Heading

Heading

Heading

Outward

Heading

Heading

Heading

Divider

Heading

Heading

Heading

Line

Heading

Heading

Heading

Full Line

Single

Heading

Heading

Heading

Dashed Single

Heading

Heading

Heading

Dotted Single

Heading

Heading

Heading

Double

Heading

Heading

Heading

Dashed Double

Heading

Heading

Heading

Dotted Double

Heading

Heading

Heading

Bar

Bottom

Heading

Heading

Heading

Top

Heading

Heading

Heading

Dual Bar

Heading

Heading

Heading

Side Bar

Heading

Heading

Maker

Square Top

Heading

Heading

Heading

Circle Top

Heading

Heading

Heading

Square Side

Heading

Heading

Circle Side

Heading

Heading

Square Bottom

Heading

Heading

Heading

Circle Bottom