Heading Block

Displays the page title and summary in the current language

Line

Inward

Heading

Heading

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

Heading

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

Heading

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

Heading

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

Heading

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

Heading

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

Heading

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

Heading

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

Heading

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

Heading

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

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

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>

See Also

Block

Background

Fixed block

Stack group

Vertical rule

Responsive rule

Reboot horizontal rules