spoko-design-system 1.6.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/index.ts +2 -0
- package/package.json +7 -5
- package/src/components/Headline.vue +76 -71
- package/src/components/PrCode.vue +14 -52
- package/src/components/Product/ProductEngine.vue +240 -0
- package/src/components/Product/ProductEngines.vue +116 -0
- package/src/config.ts +1 -0
- package/src/layouts/MainLayout.astro +5 -0
- package/src/pages/components/headline.mdx +268 -68
- package/src/pages/components/product-engine.mdx +370 -0
- package/src/scripts/tooltips.ts +46 -0
- package/src/styles/tippy-theme.css +131 -0
- package/uno-config/index.ts +3 -1
- package/uno-config/theme/shortcuts/jumbotron.ts +1 -1
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
import type { PropType } from 'vue';
|
|
4
|
+
import ProductEngine from './ProductEngine.vue';
|
|
5
|
+
|
|
6
|
+
/*
|
|
7
|
+
ProductEngines wrapper component
|
|
8
|
+
Displays a list of engine codes with tooltips
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
interface Engine {
|
|
12
|
+
id?: number;
|
|
13
|
+
code: string;
|
|
14
|
+
name?: string;
|
|
15
|
+
info?: string | null;
|
|
16
|
+
serie?: {
|
|
17
|
+
value: string;
|
|
18
|
+
label: string;
|
|
19
|
+
} | number;
|
|
20
|
+
type?: {
|
|
21
|
+
value: string;
|
|
22
|
+
translated: string;
|
|
23
|
+
label: string;
|
|
24
|
+
};
|
|
25
|
+
power?: {
|
|
26
|
+
kw: number;
|
|
27
|
+
ps: number;
|
|
28
|
+
ps_label: string;
|
|
29
|
+
label: string;
|
|
30
|
+
};
|
|
31
|
+
date?: {
|
|
32
|
+
value: string;
|
|
33
|
+
label: string;
|
|
34
|
+
};
|
|
35
|
+
displacement?: {
|
|
36
|
+
value: number;
|
|
37
|
+
label: string;
|
|
38
|
+
};
|
|
39
|
+
compression_ratio?: {
|
|
40
|
+
value: string | null;
|
|
41
|
+
label: string;
|
|
42
|
+
};
|
|
43
|
+
valves?: {
|
|
44
|
+
value: number | null;
|
|
45
|
+
label: string;
|
|
46
|
+
};
|
|
47
|
+
euro?: {
|
|
48
|
+
value: number;
|
|
49
|
+
label: string;
|
|
50
|
+
} | number;
|
|
51
|
+
pivot?: any;
|
|
52
|
+
|
|
53
|
+
// Backward compatibility
|
|
54
|
+
kw?: number;
|
|
55
|
+
ps?: number;
|
|
56
|
+
cc?: number;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
const props = defineProps({
|
|
60
|
+
engines: {
|
|
61
|
+
type: Array as PropType<Engine[]>,
|
|
62
|
+
default: () => [],
|
|
63
|
+
required: true,
|
|
64
|
+
},
|
|
65
|
+
isPdp: {
|
|
66
|
+
type: Boolean,
|
|
67
|
+
default: false,
|
|
68
|
+
required: false,
|
|
69
|
+
},
|
|
70
|
+
translations: {
|
|
71
|
+
type: Object as PropType<{
|
|
72
|
+
power?: string;
|
|
73
|
+
cc?: string;
|
|
74
|
+
compressionRatio?: string;
|
|
75
|
+
valves?: string;
|
|
76
|
+
euro?: string;
|
|
77
|
+
horsepowerUnit?: string;
|
|
78
|
+
}>,
|
|
79
|
+
default: () => ({
|
|
80
|
+
power: 'Power',
|
|
81
|
+
cc: 'CC',
|
|
82
|
+
compressionRatio: 'C. Ratio',
|
|
83
|
+
valves: 'Valves',
|
|
84
|
+
euro: 'Euro',
|
|
85
|
+
horsepowerUnit: 'PS',
|
|
86
|
+
}),
|
|
87
|
+
required: false,
|
|
88
|
+
},
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
// Sort engines by code
|
|
92
|
+
const sortedEngines = computed(() => {
|
|
93
|
+
if (!props.engines || !props.engines.length) return [];
|
|
94
|
+
return [...props.engines].sort((a, b) => {
|
|
95
|
+
return (a.code || '').localeCompare(b.code || '');
|
|
96
|
+
});
|
|
97
|
+
});
|
|
98
|
+
</script>
|
|
99
|
+
|
|
100
|
+
<template>
|
|
101
|
+
<div v-if="sortedEngines.length" class="engines-list inline-flex flex-wrap items-center gap-x-0.5">
|
|
102
|
+
<ProductEngine
|
|
103
|
+
v-for="(engine, index) in sortedEngines"
|
|
104
|
+
:key="engine.id || index"
|
|
105
|
+
:engine="engine"
|
|
106
|
+
:show-comma="index !== sortedEngines.length - 1"
|
|
107
|
+
:translations="translations"
|
|
108
|
+
/>
|
|
109
|
+
</div>
|
|
110
|
+
</template>
|
|
111
|
+
|
|
112
|
+
<style scoped>
|
|
113
|
+
.engines-list {
|
|
114
|
+
@apply leading-none;
|
|
115
|
+
}
|
|
116
|
+
</style>
|
package/src/config.ts
CHANGED
|
@@ -41,6 +41,7 @@ export const SIDEBAR = [
|
|
|
41
41
|
{ text: 'Modal', link: '/components/modal/' },
|
|
42
42
|
{ text: 'PostHeader', link: '/components/post-header/' },
|
|
43
43
|
{ text: 'PR-Code', link: '/components/pr-code/' },
|
|
44
|
+
{ text: 'Product Engine', link: '/components/product-engine/' },
|
|
44
45
|
{ text: 'Product Number', link: '/components/product-number/' },
|
|
45
46
|
{ text: 'Product Tile', link: '/components/product-tile/' },
|
|
46
47
|
{ text: 'Quote', link: '/components/quote/' },
|
|
@@ -20,6 +20,11 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
|
|
|
20
20
|
});
|
|
21
21
|
</script>
|
|
22
22
|
|
|
23
|
+
<script>
|
|
24
|
+
// Global Tooltips - Tippy.js
|
|
25
|
+
import '../scripts/tooltips.ts';
|
|
26
|
+
</script>
|
|
27
|
+
|
|
23
28
|
<html
|
|
24
29
|
dir={content.dir ?? 'ltr'}
|
|
25
30
|
lang={content.lang ?? 'en-us'}
|
|
@@ -24,113 +24,313 @@ Thanks to this, I can make a header that always looks the same, regardless of wh
|
|
|
24
24
|
import Headline from 'spoko-design-system/src/components/Headline.vue';
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
###
|
|
28
|
-
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
27
|
+
### Props
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
interface HeadlineProps {
|
|
31
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
|
|
32
|
+
// default: 'span'
|
|
33
|
+
|
|
34
|
+
class?: string;
|
|
35
|
+
// default: ''
|
|
36
|
+
// Use any UnoCSS/Tailwind classes including responsive variants
|
|
37
|
+
// Examples: 'text-4xl', 'text-2xl md:text-4xl lg:text-6xl'
|
|
38
|
+
|
|
39
|
+
fontFamily?: 'head' | 'text' | 'novamono' | 'mono';
|
|
40
|
+
// default: 'head'
|
|
41
|
+
|
|
42
|
+
fontWeight?: 'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin';
|
|
43
|
+
// default: 'regular'
|
|
44
|
+
|
|
45
|
+
underline?: boolean | 'center';
|
|
46
|
+
// default: false
|
|
47
|
+
// true: left-aligned underline, 'center': centered underline
|
|
48
|
+
|
|
49
|
+
defaultSize?: string;
|
|
50
|
+
// default: 'text-inherit'
|
|
51
|
+
// Used when no class prop is provided
|
|
52
|
+
|
|
53
|
+
noFlexLayout?: boolean;
|
|
54
|
+
// default: false
|
|
55
|
+
// Disables the default flex layout behavior
|
|
56
|
+
|
|
57
|
+
noMargin?: boolean;
|
|
58
|
+
// default: false
|
|
59
|
+
// Disables default mb-2.5 margin
|
|
60
|
+
|
|
61
|
+
noLeading?: boolean;
|
|
62
|
+
// default: false
|
|
63
|
+
// Disables default leading-none line height
|
|
39
64
|
}
|
|
65
|
+
```
|
|
40
66
|
|
|
67
|
+
### HTML Attributes Support
|
|
68
|
+
|
|
69
|
+
The component supports all standard HTML attributes via `v-bind="$attrs"`:
|
|
70
|
+
|
|
71
|
+
```vue
|
|
72
|
+
<Headline
|
|
73
|
+
as="h1"
|
|
74
|
+
class="text-4xl"
|
|
75
|
+
id="main-title"
|
|
76
|
+
data-section="hero"
|
|
77
|
+
aria-label="Main headline"
|
|
78
|
+
>
|
|
79
|
+
Accessible Headline
|
|
80
|
+
</Headline>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### CSS Custom Properties
|
|
84
|
+
|
|
85
|
+
Customize underline colors using CSS variables:
|
|
86
|
+
|
|
87
|
+
```css
|
|
88
|
+
/* Override underline colors globally */
|
|
89
|
+
:root {
|
|
90
|
+
--headline-underline-accent: #0066cc; /* Main underline color */
|
|
91
|
+
--headline-underline-base: #999999; /* Thin line color */
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Or scope to specific headlines */
|
|
95
|
+
.custom-headline {
|
|
96
|
+
--headline-underline-accent: #ff6600;
|
|
97
|
+
--headline-underline-base: #cccccc;
|
|
98
|
+
}
|
|
41
99
|
```
|
|
42
100
|
|
|
43
101
|
|
|
44
102
|
## Examples
|
|
45
103
|
|
|
104
|
+
### Basic Usage
|
|
105
|
+
|
|
46
106
|
<div class="component-preview flex-wrap flex-col justify-start !items-start">
|
|
47
107
|
<ul class="list-decimal list-outside">
|
|
48
|
-
<li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline></li>
|
|
49
|
-
<li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline></li>
|
|
50
|
-
<li class="px-4 pb-4"><Headline as="
|
|
51
|
-
<li class="px-4 pb-4"><Headline as="
|
|
52
|
-
<li class="px-4 pb-4"><Headline as="
|
|
53
|
-
<li class="px-4 pb-4"><Headline as="
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<li class="px-4 pb-4"><Headline as="
|
|
62
|
-
<li class="px-4 pb-4"><Headline as="
|
|
108
|
+
<li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="regular" class="text-xl">Regular Headline</Headline></li>
|
|
109
|
+
<li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light" class="text-lg">Light Headline</Headline></li>
|
|
110
|
+
<li class="px-4 pb-4"><Headline as="h3" font-family="head" font-weight="bold" class="text-2xl">Bold Headline</Headline></li>
|
|
111
|
+
<li class="px-4 pb-4"><Headline as="h4" font-family="head" font-weight="light-bold" class="text-base">Light Bold Headline</Headline></li>
|
|
112
|
+
<li class="px-4 pb-4"><Headline as="h5" font-family="head" font-weight="light-thin" class="text-sm">Light Thin Headline</Headline></li>
|
|
113
|
+
<li class="px-4 pb-4"><Headline as="p" font-family="text" class="text-base">Default Text (inherits size)</Headline></li>
|
|
114
|
+
</ul>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
### Responsive Typography
|
|
118
|
+
|
|
119
|
+
<div class="component-preview flex-wrap flex-col justify-start !items-start">
|
|
120
|
+
<ul class="list-decimal list-outside">
|
|
121
|
+
<li class="px-4 pb-4"><Headline as="h1" class="text-2xl md:text-4xl lg:text-6xl">Responsive Hero</Headline></li>
|
|
122
|
+
<li class="px-4 pb-4"><Headline as="h2" font-weight="bold" class="text-xl md:text-3xl lg:text-5xl">Bold Responsive</Headline></li>
|
|
123
|
+
<li class="px-4 pb-4"><Headline as="h3" class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">Multi-breakpoint</Headline></li>
|
|
124
|
+
<li class="px-4 pb-4"><Headline as="h2" font-weight="light-bold" class="text-lg md:text-2xl lg:text-4xl 3xl:text-6xl">Extra large screens</Headline></li>
|
|
125
|
+
</ul>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
### Font Families & Weights
|
|
129
|
+
|
|
130
|
+
<div class="component-preview flex-wrap flex-col justify-start !items-start">
|
|
131
|
+
<ul class="list-decimal list-outside">
|
|
132
|
+
<li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light" class="text-base">Light Text</Headline></li>
|
|
133
|
+
<li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="bold" class="text-base">Bold Text</Headline></li>
|
|
134
|
+
<li class="px-4 pb-4"><Headline as="code" font-family="novamono" class="text-sm">Nova Mono Code</Headline></li>
|
|
135
|
+
<li class="px-4 pb-4"><Headline as="code" font-family="mono" class="text-sm">Mono Code</Headline></li>
|
|
136
|
+
</ul>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
### With Underline
|
|
140
|
+
|
|
141
|
+
<div class="component-preview flex-wrap flex-col justify-start !items-start">
|
|
142
|
+
<ul class="list-decimal list-outside">
|
|
143
|
+
<li class="px-4 pb-4"><Headline as="h2" font-weight="light-thin" class="text-3xl" underline>Underlined Headline</Headline></li>
|
|
144
|
+
<li class="px-4 pb-4"><Headline as="h2" font-weight="bold" class="text-2xl md:text-4xl" underline="center">Centered Underline</Headline></li>
|
|
145
|
+
</ul>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
### With Icons
|
|
149
|
+
|
|
150
|
+
<div class="component-preview flex-wrap flex-col justify-start !items-start">
|
|
151
|
+
<ul class="list-decimal list-outside">
|
|
152
|
+
<li class="px-4 pb-4"><Headline as="h3" font-weight="bold" class="text-2xl">
|
|
63
153
|
<Icon name="ph:cat-thin" class="inline-block mr-4" />
|
|
64
154
|
Headline with Icon
|
|
65
155
|
</Headline></li>
|
|
66
|
-
<li class="px-4 pb-4"><Headline as="h1"
|
|
67
|
-
<li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="light-bold" text-size="4xl" underline>
|
|
156
|
+
<li class="px-4 pb-4"><Headline as="h1" font-weight="light-bold" class="text-xl md:text-3xl lg:text-5xl" underline>
|
|
68
157
|
<Icon name="ph:cat-thin" class="inline-block mr-4" />
|
|
69
|
-
|
|
158
|
+
Responsive with Icon & Underline
|
|
70
159
|
</Headline></li>
|
|
71
160
|
</ul>
|
|
72
161
|
</div>
|
|
73
162
|
|
|
74
|
-
|
|
75
|
-
/* 1 */
|
|
76
|
-
<Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline>
|
|
163
|
+
## Code Examples
|
|
77
164
|
|
|
78
|
-
|
|
79
|
-
|
|
165
|
+
### Basic Usage
|
|
166
|
+
```vue
|
|
167
|
+
<!-- Simple headline with defaults (inherits font size) -->
|
|
168
|
+
<Headline as="h1">Default Headline</Headline>
|
|
80
169
|
|
|
81
|
-
|
|
82
|
-
<Headline as="
|
|
170
|
+
<!-- With explicit size -->
|
|
171
|
+
<Headline as="h1" class="text-xl">Regular Headline</Headline>
|
|
83
172
|
|
|
84
|
-
|
|
85
|
-
<Headline as="
|
|
173
|
+
<!-- Font family and weight -->
|
|
174
|
+
<Headline as="h2" font-weight="light" class="text-lg">Light Headline</Headline>
|
|
175
|
+
<Headline as="h3" font-weight="bold" class="text-2xl">Bold Headline</Headline>
|
|
176
|
+
```
|
|
86
177
|
|
|
87
|
-
|
|
88
|
-
|
|
178
|
+
### Responsive Typography
|
|
179
|
+
```vue
|
|
180
|
+
<!-- Hero headline - small on mobile, large on desktop -->
|
|
181
|
+
<Headline as="h1" class="text-2xl md:text-4xl lg:text-6xl">
|
|
182
|
+
Responsive Hero
|
|
183
|
+
</Headline>
|
|
89
184
|
|
|
90
|
-
|
|
91
|
-
<Headline as="
|
|
185
|
+
<!-- Progressive scaling across all breakpoints -->
|
|
186
|
+
<Headline as="h2" class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
|
|
187
|
+
Multi-breakpoint Headline
|
|
188
|
+
</Headline>
|
|
92
189
|
|
|
93
|
-
|
|
94
|
-
<Headline as="
|
|
190
|
+
<!-- Extra large screens support -->
|
|
191
|
+
<Headline as="h2" font-weight="light-bold" class="text-lg md:text-2xl lg:text-4xl 3xl:text-6xl">
|
|
192
|
+
Scales up to 3xl breakpoint
|
|
193
|
+
</Headline>
|
|
194
|
+
```
|
|
95
195
|
|
|
96
|
-
|
|
97
|
-
|
|
196
|
+
### Font Families
|
|
197
|
+
```vue
|
|
198
|
+
<!-- Heading font (default) -->
|
|
199
|
+
<Headline as="h1" font-weight="regular" class="text-xl">
|
|
200
|
+
Regular Headline
|
|
201
|
+
</Headline>
|
|
98
202
|
|
|
99
|
-
|
|
100
|
-
<Headline as="p" font-family="text" font-weight="light-
|
|
203
|
+
<!-- Text font for body content -->
|
|
204
|
+
<Headline as="p" font-family="text" font-weight="light" class="text-base">
|
|
205
|
+
Light Text Content
|
|
206
|
+
</Headline>
|
|
101
207
|
|
|
102
|
-
|
|
103
|
-
<Headline as="
|
|
208
|
+
<!-- Monospace fonts -->
|
|
209
|
+
<Headline as="code" font-family="novamono" class="text-sm">
|
|
210
|
+
Nova Mono Code
|
|
211
|
+
</Headline>
|
|
104
212
|
|
|
105
|
-
|
|
106
|
-
|
|
213
|
+
<Headline as="code" font-family="mono" class="text-sm">
|
|
214
|
+
Mono Code
|
|
215
|
+
</Headline>
|
|
216
|
+
```
|
|
107
217
|
|
|
108
|
-
|
|
109
|
-
|
|
218
|
+
### With Underline
|
|
219
|
+
```vue
|
|
220
|
+
<!-- Left-aligned underline -->
|
|
221
|
+
<Headline as="h2" class="text-3xl" underline>
|
|
222
|
+
Underlined Headline
|
|
223
|
+
</Headline>
|
|
110
224
|
|
|
111
|
-
|
|
112
|
-
<Headline as="
|
|
225
|
+
<!-- Centered underline with responsive sizing -->
|
|
226
|
+
<Headline as="h2" font-weight="bold" class="text-2xl md:text-4xl" underline="center">
|
|
227
|
+
Centered Underline
|
|
228
|
+
</Headline>
|
|
229
|
+
```
|
|
113
230
|
|
|
114
|
-
|
|
115
|
-
|
|
231
|
+
### With Icons
|
|
232
|
+
```vue
|
|
233
|
+
<!-- Icon with responsive sizing -->
|
|
234
|
+
<Headline as="h1" font-weight="light-bold" class="text-xl md:text-3xl lg:text-5xl" underline>
|
|
235
|
+
<Icon name="ph:cat-thin" class="inline-block mr-4" />
|
|
236
|
+
Complete Example
|
|
237
|
+
</Headline>
|
|
116
238
|
|
|
117
|
-
|
|
118
|
-
<Headline as="h3" font-
|
|
119
|
-
<Icon name="ph:cat-thin" class="inline-block mr-4
|
|
239
|
+
<!-- Simple icon headline -->
|
|
240
|
+
<Headline as="h3" font-weight="bold" class="text-2xl">
|
|
241
|
+
<Icon name="ph:cat-thin" class="inline-block mr-4" />
|
|
120
242
|
Headline with Icon
|
|
121
243
|
</Headline>
|
|
244
|
+
```
|
|
122
245
|
|
|
123
|
-
|
|
124
|
-
|
|
246
|
+
### Custom Styling
|
|
247
|
+
```vue
|
|
248
|
+
<!-- Combine with any UnoCSS/Tailwind utilities -->
|
|
249
|
+
<Headline as="h1" class="text-4xl md:text-6xl text-blue-600 dark:text-blue-400">
|
|
250
|
+
Colored Headline
|
|
251
|
+
</Headline>
|
|
125
252
|
|
|
126
|
-
|
|
127
|
-
<Headline
|
|
128
|
-
|
|
129
|
-
|
|
253
|
+
<!-- Responsive colors and sizes -->
|
|
254
|
+
<Headline
|
|
255
|
+
as="h2"
|
|
256
|
+
font-weight="bold"
|
|
257
|
+
class="text-2xl md:text-4xl text-slate-700 md:text-blue-600"
|
|
258
|
+
>
|
|
259
|
+
Responsive Color & Size
|
|
260
|
+
</Headline>
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
### Advanced Features
|
|
264
|
+
|
|
265
|
+
#### Remove Default Spacing
|
|
266
|
+
```vue
|
|
267
|
+
<!-- No bottom margin -->
|
|
268
|
+
<Headline as="h1" class="text-4xl" no-margin>
|
|
269
|
+
Headline without margin
|
|
270
|
+
</Headline>
|
|
271
|
+
|
|
272
|
+
<!-- No line height adjustment -->
|
|
273
|
+
<Headline as="h2" class="text-2xl" no-leading>
|
|
274
|
+
Headline with normal line height
|
|
130
275
|
</Headline>
|
|
131
276
|
|
|
277
|
+
<!-- Remove both -->
|
|
278
|
+
<Headline as="h3" class="text-xl" no-margin no-leading>
|
|
279
|
+
Fully custom spacing
|
|
280
|
+
</Headline>
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
#### Disable Flex Layout
|
|
284
|
+
```vue
|
|
285
|
+
<!-- By default, headlines without underline use flex layout for icon alignment -->
|
|
286
|
+
<!-- Disable it with noFlexLayout -->
|
|
287
|
+
<Headline as="h2" class="text-2xl" no-flex-layout>
|
|
288
|
+
Block-level headline
|
|
289
|
+
</Headline>
|
|
290
|
+
```
|
|
132
291
|
|
|
292
|
+
#### Custom Underline Colors
|
|
293
|
+
```vue
|
|
294
|
+
<!-- In your component or style tag -->
|
|
295
|
+
<style>
|
|
296
|
+
.custom-underline-headline {
|
|
297
|
+
--headline-underline-accent: #ff6600;
|
|
298
|
+
--headline-underline-base: #cccccc;
|
|
299
|
+
}
|
|
300
|
+
</style>
|
|
301
|
+
|
|
302
|
+
<Headline
|
|
303
|
+
as="h1"
|
|
304
|
+
class="text-4xl custom-underline-headline"
|
|
305
|
+
underline
|
|
306
|
+
>
|
|
307
|
+
Custom colored underline
|
|
308
|
+
</Headline>
|
|
309
|
+
```
|
|
133
310
|
|
|
311
|
+
#### Accessibility Features
|
|
312
|
+
```vue
|
|
313
|
+
<!-- Add ARIA attributes for screen readers -->
|
|
314
|
+
<Headline
|
|
315
|
+
as="h1"
|
|
316
|
+
class="text-4xl"
|
|
317
|
+
id="page-title"
|
|
318
|
+
role="heading"
|
|
319
|
+
aria-level="1"
|
|
320
|
+
aria-label="Welcome to our website"
|
|
321
|
+
>
|
|
322
|
+
Welcome
|
|
323
|
+
</Headline>
|
|
324
|
+
|
|
325
|
+
<!-- Add data attributes for tracking or testing -->
|
|
326
|
+
<Headline
|
|
327
|
+
as="h2"
|
|
328
|
+
class="text-2xl"
|
|
329
|
+
data-testid="section-heading"
|
|
330
|
+
data-analytics="hero-title"
|
|
331
|
+
>
|
|
332
|
+
Section Title
|
|
333
|
+
</Headline>
|
|
134
334
|
```
|
|
135
335
|
|
|
136
336
|
|