Hierarchy Title

HierarchyTitle.vue

<template>
  <div class="hierarchy-title">
    <PeachyHierarchyTitle>
      <template #title>A H2 heading</template>

      <PeachyHierarchyTitle>
        <template #title>A H3 heading</template>
      </PeachyHierarchyTitle>

      <PeachyHierarchyTitle>
        <template #title>A H3 heading</template>
      </PeachyHierarchyTitle>
    </PeachyHierarchyTitle>

    <PeachyHierarchyTitle>
      <template #title>A H2 heading</template>

      <PeachyHierarchyTitle>
        <template #title>A H3 heading</template>

        <PeachyHierarchyTitle>
          <template #title>A H4 heading</template>
        </PeachyHierarchyTitle>
      </PeachyHierarchyTitle>
    </PeachyHierarchyTitle>
  </div>
</template>

hierarchy-title.css

.hierarchy-title {
  text-align: center;
}

h2.peachy-hierarchy-title,
h3.peachy-hierarchy-title,
h4.peachy-hierarchy-title {
  line-height: 100%;
  font-weight: var(--fw-bold);
}

h2.peachy-hierarchy-title {
  font-size: 120%;
}

h2.peachy-hierarchy-title:not(:first-child) {
  padding-top: 1rem;
}

h3.peachy-hierarchy-title {
  font-size: 90%;
}

h4.peachy-hierarchy-title {
  font-size: 80%;
}

Anatomy

<template>
  <PeachyHierarchyTitle>
    <template #title />

    <!-- Content and subtitles -->
  </PeachyHierarchyTitle>
</template>

<script lang="ts" setup>
  import { PeachyHierarchyTitle } from "typeach";
</script>

The first layer starts at h2. You can set the is prop where h1 is needed.

Props & Emits

Props

Name	Default	Type	Description
is		HeadingTag?	Allows you to override the current level.
asParent	false	boolean?	Allow the title to take the level of the parent title.
as		boolean?	Adds a data attribute for styling purposes.

type HeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

Styling

CSS Selectors

Follows our CSS classes convention.

State selectors

Selector	Description
HeadingTag "p"	For the actual level of the heading, for "p" see Accessibility.
[data-as="<HeadingTag>"]	Based on the as attribute to allow styling separate from the logical level of the heading.

type HeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

Accessibility

• Titles nested past h6 will become p tags.