You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A versatile headline component that makes your content stand out with style. Perfect for page headers, section titles, and anywhere you need to grab attention.
|`title`|`string`| - | The main headline text (required) |
10
+
|`description`|`string`| - | Supporting text that appears below the title (required) |
11
+
|`label`|`string`|`undefined`| Optional label displayed above the title |
12
+
|`h1`|`boolean`|`true`| Whether to render as h1 (larger) or h2 (smaller) |
13
+
|`align`|`'center' \| 'left'`|`'center'`| Alignment of the headline content |
14
+
15
+
> [!NOTE]
16
+
> The component can automatically use frontmatter values as fallbacks. If `title` or `description` are not provided as props, it will use the page's frontmatter `title` and `description` values.
17
+
18
+
> [!TIP]
19
+
> Remember to [register `NqHeadline`](/vitepress-theme/#register-the-components) in your app.
20
+
21
+
## Examples
22
+
23
+
### Basic Headline
24
+
25
+
<ComponentPreviewlang="vue">
26
+
27
+
<NqHeadline
28
+
title="Welcome to Nimiq"
29
+
description="The browser-based blockchain designed for simplicity and accessibility."
30
+
/>
31
+
32
+
</ComponentPreview>
33
+
34
+
### With Label
35
+
36
+
<ComponentPreviewlang="vue">
37
+
38
+
<NqHeadline
39
+
label="Getting Started"
40
+
title="Build Your First App"
41
+
description="Learn how to create amazing applications with Nimiq in just a few minutes."
42
+
/>
43
+
44
+
</ComponentPreview>
45
+
46
+
### Left Aligned
47
+
48
+
<ComponentPreviewlang="vue">
49
+
50
+
<NqHeadline
51
+
align="left"
52
+
title="Documentation"
53
+
description="Comprehensive guides and API references to help you build with Nimiq."
54
+
/>
55
+
56
+
</ComponentPreview>
57
+
58
+
### As H2 (Smaller)
59
+
60
+
<ComponentPreviewlang="vue">
61
+
62
+
<NqHeadline
63
+
:h1="false"
64
+
title="Nimiq Ecosystem"
65
+
description="Explore the complete suite of tools and applications built on Nimiq."
66
+
/>
67
+
68
+
</ComponentPreview>
69
+
70
+
### Complete Example
71
+
72
+
<ComponentPreviewlang="vue">
73
+
74
+
<NqHeadline
75
+
label="Feature Spotlight"
76
+
title="Browser-Based Mining"
77
+
description="Experience the world's first browser-based blockchain that requires no downloads or installations."
78
+
align="left"
79
+
/>
80
+
81
+
</ComponentPreview>
82
+
83
+
### Using Frontmatter Fallback
84
+
85
+
You can also use the component without explicit props and it will automatically use the page's frontmatter values:
86
+
87
+
```vue
88
+
<!-- This will use the page's frontmatter title and description -->
89
+
<NqHeadline label="Page Header" />
90
+
```
91
+
92
+
```yaml
93
+
---
94
+
title: Getting Started with Nimiq
95
+
description: Learn how to build amazing blockchain applications
For most projects, the theme automatically detects the correct path structure. However, if you need to override this behavior, you can use the `sourceCodePathPrefix` option:
167
+
168
+
**For monorepo projects where VitePress runs from docs/ but files are in repo/docs/:**
169
+
170
+
```yaml
171
+
---
172
+
sourceCodePathPrefix: docs
173
+
---
174
+
```
175
+
176
+
**For standalone projects where VitePress runs from the root:**
177
+
178
+
```yaml
179
+
---
180
+
sourceCodePathPrefix: ''
181
+
---
182
+
```
183
+
184
+
**For custom directory structures:**
185
+
186
+
```yaml
187
+
---
188
+
sourceCodePathPrefix: documentation
189
+
---
190
+
```
191
+
192
+
If not specified, the theme will auto-detect the correct prefix based on the repository URL and common patterns. This ensures compatibility with both monorepo and standalone project structures.
193
+
163
194
## Controlling the Secondary Sidebar
164
195
165
196
The secondary sidebar contains both the outline (table of contents) and optional widget area. You can control them independently:
0 commit comments