Heading Components
Page header components used across the Wave app. Includes the legacy Heading.vue (100+ usages) and the newer SkrHeading.vue (98 files).
Heading — Basic
components/Heading.vue — Page header with title, subtitle, hints, and action slot. Grid layout with title/subtitle on the left and an optional action slot on the right.
| Prop | Type | Description |
|---|---|---|
title | String | Main heading text (renders as h1) |
subtitle | String | Subtitle below the title |
hintTitle | String | Bold hint label |
hintText | String | Hint description text |
center | Boolean | Center-align the heading |
padded | Boolean | Add lateral padding (used in profile pages) |
truncated | Boolean | Truncate long titles with ellipsis |
defaultPadding | Boolean | Add bottom padding (default: true) |
Page Title
This is a subtitle that describes the page content.
Heading — With Hint
Heading with hintTitle and hintText props for additional context.
With Hint
Subtitle text here.
Important:
This is a helpful hint for the user.
Heading — With Action Button
The default slot places content (usually a button) in the top-right grid cell.
With Action Button
This heading has a button in the slot.
Heading — Centered
Using the center prop for centered layouts (e.g. signup, error pages).
Centered Heading
Centered layout variant.
SkrHeading
components/SkrHeading.vue — Typography heading component with 3 levels. Used in 98 files. Renders as semantic HTML (h1/h2/h3) or a styled div.
| Prop | Type | Description |
|---|---|---|
level | '1' | '2' | '3' | Heading size level (required) |
semantic | Boolean | Render as h1/h2/h3 instead of div |
dataCy | String | Test selector attribute |
SkrHeading — Levels
The three heading levels with their default font sizes.
Profile Settings
SkrHeading — Semantic vs Div
With semantic, the component renders proper heading elements (<h1>, <h2>, <h3>). Without it, renders as a styled <div>. Both look identical — the difference is in the HTML output for accessibility.
Dashboard
HTML: <h1 class="heading1">Dashboard</h1>
HTML: <div class="heading1">Dashboard</div>
SkrHeading — Usage Patterns
Common patterns found across the codebase.
Members
Signing Complete
Welcome to Skribble
We'll be right back
Delete Account
This action cannot be undone.