@ons/design-system 72.2.1 → 72.4.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/components/button/_button.scss +79 -1
- package/components/description-list/_description-list.scss +2 -0
- package/components/footer/_macro.njk +1 -1
- package/components/header/_header.scss +42 -0
- package/components/header/_macro.njk +95 -0
- package/components/header/example-header-basic.njk +152 -1
- package/components/hero/_hero.scss +100 -7
- package/components/hero/_macro.njk +26 -8
- package/components/hero/_macro.spec.js +26 -2
- package/components/hero/example-hero-grey.njk +9 -8
- package/components/hero/example-hero-pale-blue.njk +24 -0
- package/components/icon/_macro.njk +33 -0
- package/css/main.css +1 -1
- package/package.json +1 -1
- package/scss/vars/_colors.scss +3 -0
|
@@ -431,7 +431,8 @@ $button-shadow-size: 3px;
|
|
|
431
431
|
}
|
|
432
432
|
|
|
433
433
|
&--mobile[aria-expanded='true'],
|
|
434
|
-
&--text-link[aria-expanded='true']
|
|
434
|
+
&--text-link[aria-expanded='true'],
|
|
435
|
+
&--menu[aria-expanded='true'] {
|
|
435
436
|
.ons-icon {
|
|
436
437
|
transform: rotate(270deg);
|
|
437
438
|
}
|
|
@@ -551,6 +552,83 @@ $button-shadow-size: 3px;
|
|
|
551
552
|
}
|
|
552
553
|
}
|
|
553
554
|
}
|
|
555
|
+
|
|
556
|
+
&--menu {
|
|
557
|
+
align-items: center;
|
|
558
|
+
display: flex;
|
|
559
|
+
padding: 1.5rem;
|
|
560
|
+
border-bottom: 4px solid rgb(0 0 0 / 0%);
|
|
561
|
+
.ons-icon {
|
|
562
|
+
transform: rotate(90deg);
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
&--menu & {
|
|
567
|
+
&__inner {
|
|
568
|
+
background: rgb(0 0 0 / 0%);
|
|
569
|
+
box-shadow: none;
|
|
570
|
+
color: var(--ons-color-text-link);
|
|
571
|
+
padding: 0;
|
|
572
|
+
.ons-icon {
|
|
573
|
+
fill: var(--ons-color-text-link);
|
|
574
|
+
height: 1rem;
|
|
575
|
+
margin-top: 0;
|
|
576
|
+
width: 1rem;
|
|
577
|
+
}
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
&--menu:focus {
|
|
582
|
+
background-color: var(--ons-color-focus);
|
|
583
|
+
border-color: var(--ons-color-black);
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
&--menu:hover {
|
|
587
|
+
border-color: var(--ons-color-text-link-hover);
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
&--menu:focus & {
|
|
591
|
+
&__inner {
|
|
592
|
+
box-shadow: none;
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
&--menu:focus:hover:not(:active, .active) {
|
|
597
|
+
.ons-btn__inner {
|
|
598
|
+
background: none;
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
&--menu:active,
|
|
603
|
+
&--menu[aria-expanded='true'] {
|
|
604
|
+
background-color: var(--ons-color-branded-tint);
|
|
605
|
+
border-color: var(--ons-color-text-link-hover);
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
&--menu:hover &,
|
|
609
|
+
&--menu:active &,
|
|
610
|
+
&--menu.active & {
|
|
611
|
+
&__inner {
|
|
612
|
+
background: none;
|
|
613
|
+
color: var(--ons-color-text-link-hover);
|
|
614
|
+
.ons-icon {
|
|
615
|
+
fill: var(--ons-color-text-link-hover);
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
&--menu:active &,
|
|
621
|
+
&--menu:active:focus &,
|
|
622
|
+
&--menu.active &,
|
|
623
|
+
&--menu.active:focus & {
|
|
624
|
+
&__inner {
|
|
625
|
+
background: none;
|
|
626
|
+
color: var(--ons-color-text-link-hover);
|
|
627
|
+
.ons-icon {
|
|
628
|
+
fill: var(--ons-color-text-link-hover);
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
}
|
|
554
632
|
}
|
|
555
633
|
|
|
556
634
|
.ons-search__btn {
|
|
@@ -207,7 +207,7 @@
|
|
|
207
207
|
</div>
|
|
208
208
|
{% if params.copyrightDeclaration %}
|
|
209
209
|
<!-- Copyright -->
|
|
210
|
-
{% set copyrightDeclaration = '© '
|
|
210
|
+
{% set copyrightDeclaration = '© ' ~ params.copyrightDeclaration.copyright ~ '<br /> ' ~ params.copyrightDeclaration.text %}
|
|
211
211
|
<div class="ons-grid ons-grid-flex ons-grid-flex--between">
|
|
212
212
|
<div class="ons-grid__col">
|
|
213
213
|
<p class="ons-u-fs-s ons-u-mb-l ons-footer__copyright">{{- copyrightDeclaration | safe -}}</p>
|
|
@@ -236,6 +236,48 @@
|
|
|
236
236
|
}
|
|
237
237
|
}
|
|
238
238
|
|
|
239
|
+
&--basic & {
|
|
240
|
+
&__grid-top {
|
|
241
|
+
padding: 0;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
&-nav-menu {
|
|
246
|
+
background-color: var(--ons-color-branded-tint);
|
|
247
|
+
width: 100%;
|
|
248
|
+
|
|
249
|
+
&__key-list {
|
|
250
|
+
border-bottom: 1px solid var(--ons-color-ocean-blue);
|
|
251
|
+
margin-bottom: 1.25rem;
|
|
252
|
+
padding-bottom: 1rem;
|
|
253
|
+
padding-left: 0;
|
|
254
|
+
row-gap: 1rem;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
&__link,
|
|
258
|
+
&__heading,
|
|
259
|
+
&__text,
|
|
260
|
+
&__description {
|
|
261
|
+
line-height: 1.714 !important;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
&__groupItem-list:not(:last-of-type) {
|
|
265
|
+
margin-bottom: 2rem !important;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.ons-grid {
|
|
269
|
+
margin-left: 0;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.ons-grid__col {
|
|
273
|
+
padding-left: 0;
|
|
274
|
+
padding-bottom: 1rem;
|
|
275
|
+
@include mq(m) {
|
|
276
|
+
padding-bottom: 0;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
239
281
|
.ons-btn {
|
|
240
282
|
top: 0 !important;
|
|
241
283
|
}
|
|
@@ -180,6 +180,29 @@
|
|
|
180
180
|
{% endif %}
|
|
181
181
|
</div>
|
|
182
182
|
{% endif %}
|
|
183
|
+
{% if params.menuLinks %}
|
|
184
|
+
<div class="ons-header__links ons-grid__col ons-u-ml-auto">
|
|
185
|
+
{% if params.menuLinks %}
|
|
186
|
+
<div class="ons-grid__col ons-col-auto">
|
|
187
|
+
{{
|
|
188
|
+
onsButton({
|
|
189
|
+
"text": params.menuLinks.toggleNavButton.text | default("Menu"),
|
|
190
|
+
"classes": "ons-u-fs-s--b ons-js-toggle-services button-nav",
|
|
191
|
+
"type": "button",
|
|
192
|
+
"variants": "menu",
|
|
193
|
+
"iconType": "chevron",
|
|
194
|
+
"iconPosition": "before",
|
|
195
|
+
"attributes": {
|
|
196
|
+
"aria-label": params.menuLinks.toggleNavButton.ariaLabel | default("Toggle menu"),
|
|
197
|
+
"aria-controls": params.menuLinks.id,
|
|
198
|
+
"aria-expanded": "false"
|
|
199
|
+
}
|
|
200
|
+
})
|
|
201
|
+
}}
|
|
202
|
+
</div>
|
|
203
|
+
{% endif %}
|
|
204
|
+
</div>
|
|
205
|
+
{% endif %}
|
|
183
206
|
</div>
|
|
184
207
|
</div>
|
|
185
208
|
{% if params.serviceLinks %}
|
|
@@ -217,6 +240,78 @@
|
|
|
217
240
|
{% endif %}
|
|
218
241
|
</nav>
|
|
219
242
|
{% endif %}
|
|
243
|
+
{% if params.menuLinks %}
|
|
244
|
+
<nav
|
|
245
|
+
class="ons-u-d-no ons-js-services-mobile-nav ons-header-nav-menu ons-u-mb-s ons-u-pt-2xl"
|
|
246
|
+
id="{{ params.menuLinks.id }}"
|
|
247
|
+
aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
|
|
248
|
+
>
|
|
249
|
+
{% if params.menuLinks.keyLinks %}
|
|
250
|
+
<div class="ons-container">
|
|
251
|
+
<ul class="ons-grid ons-header-nav-menu__key-list">
|
|
252
|
+
{% for keyLink in params.menuLinks.keyLinks %}
|
|
253
|
+
{% if keyLink.heading %}
|
|
254
|
+
<li class="ons-grid__col ons-col-4@m">
|
|
255
|
+
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
|
|
256
|
+
{% if keyLink.url %}
|
|
257
|
+
<a href="{{ keyLink.url }}" class="ons-header-nav-menu__link">{{ keyLink.heading }}</a>
|
|
258
|
+
{% else %}
|
|
259
|
+
{{ keyLink.heading }}
|
|
260
|
+
{% endif %}
|
|
261
|
+
</h2>
|
|
262
|
+
{% if keyLink.description %}
|
|
263
|
+
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description">
|
|
264
|
+
{{ keyLink.description }}
|
|
265
|
+
</p>
|
|
266
|
+
{% endif %}
|
|
267
|
+
</li>
|
|
268
|
+
{% endif %}
|
|
269
|
+
{% endfor %}
|
|
270
|
+
</ul>
|
|
271
|
+
</div>
|
|
272
|
+
{% endif %}
|
|
273
|
+
{% if params.menuLinks.columns %}
|
|
274
|
+
<div class="ons-container">
|
|
275
|
+
<ul class="ons-grid ons-list ons-list--bare">
|
|
276
|
+
{% for column in params.menuLinks.columns %}
|
|
277
|
+
<li class="ons-grid__col ons-col-4@m ons-u-mb-no">
|
|
278
|
+
{% for group in column.groups %}
|
|
279
|
+
{% if group.heading %}
|
|
280
|
+
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
|
|
281
|
+
{% if group.url %}
|
|
282
|
+
<a href="{{ group.url }}" class="ons-header-nav-menu__link">{{ group.heading }}</a>
|
|
283
|
+
{% else %}
|
|
284
|
+
{{ group.heading }}
|
|
285
|
+
{% endif %}
|
|
286
|
+
</h2>
|
|
287
|
+
{% endif %}
|
|
288
|
+
{% if group.groupItems %}
|
|
289
|
+
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
|
|
290
|
+
{% for groupItem in group.groupItems %}
|
|
291
|
+
{% if groupItem.text %}
|
|
292
|
+
<li class="ons-u-mb-no">
|
|
293
|
+
<p class="ons-u-fs-s ons-header-nav-menu_text">
|
|
294
|
+
{% if groupItem.url %}
|
|
295
|
+
<a href="{{ groupItem.url }}" class="ons-header-nav-menu__link">
|
|
296
|
+
{{ groupItem.text }}
|
|
297
|
+
</a>
|
|
298
|
+
{% else %}
|
|
299
|
+
{{ groupItem.text }}
|
|
300
|
+
{% endif %}
|
|
301
|
+
</p>
|
|
302
|
+
</li>
|
|
303
|
+
{% endif %}
|
|
304
|
+
{% endfor %}
|
|
305
|
+
</ul>
|
|
306
|
+
{% endif %}
|
|
307
|
+
{% endfor %}
|
|
308
|
+
</li>
|
|
309
|
+
{% endfor %}
|
|
310
|
+
</ul>
|
|
311
|
+
</div>
|
|
312
|
+
{% endif %}
|
|
313
|
+
</nav>
|
|
314
|
+
{% endif %}
|
|
220
315
|
</div>
|
|
221
316
|
{% if params.variants != "basic" %}
|
|
222
317
|
<div class="ons-header__main">
|
|
@@ -6,6 +6,157 @@
|
|
|
6
6
|
|
|
7
7
|
{{
|
|
8
8
|
onsHeader({
|
|
9
|
-
"variants": 'basic'
|
|
9
|
+
"variants": 'basic',
|
|
10
|
+
"menuLinks": {
|
|
11
|
+
"keyLinks": [
|
|
12
|
+
{
|
|
13
|
+
'heading': 'Taking part in a survey?',
|
|
14
|
+
'description': 'It’s never been more important.'
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
'heading': 'Release calendar',
|
|
18
|
+
'description': 'View our latest and upcoming releases.'
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
'heading': 'Explore local statistics',
|
|
22
|
+
'url': '#0',
|
|
23
|
+
'description': 'Explore statistics across the UK.'
|
|
24
|
+
}
|
|
25
|
+
],
|
|
26
|
+
"columns": [
|
|
27
|
+
{
|
|
28
|
+
"groups": [
|
|
29
|
+
{
|
|
30
|
+
"heading": "People, population and community",
|
|
31
|
+
"groupItems": [
|
|
32
|
+
{
|
|
33
|
+
"text": "Armed forces community"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"text": "Births, deaths and marriages"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"text": "Crime and justice"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"text": "Cultural identity"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"text": "Education and childcare"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"text": "Elections"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"text": "Health and social care"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"text": "Household characteristics"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"text": "Housing"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"text": "Leisure and tourism"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"text": "Personal and household finances"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"text": "Population and migration"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"text": "Well-being"
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"groups": [
|
|
77
|
+
{
|
|
78
|
+
"heading": "Business, industry and trade",
|
|
79
|
+
"groupItems": [
|
|
80
|
+
{
|
|
81
|
+
"text": "Business"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"text": "Changes to business"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"text": "Construction industry"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"text": "International trade"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"text": "IT and internet industry"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"text": "Manufacturing and production industry"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"text": "Retail industry",
|
|
100
|
+
"url": "#0"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"text": "Tourism industry"
|
|
104
|
+
}
|
|
105
|
+
]
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"heading": "Employment and labour market",
|
|
109
|
+
"url": "#0",
|
|
110
|
+
"groupItems":
|
|
111
|
+
[
|
|
112
|
+
{
|
|
113
|
+
"text": "People in work"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"text": "People not in work"
|
|
117
|
+
}
|
|
118
|
+
]
|
|
119
|
+
|
|
120
|
+
}
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"groups": [
|
|
125
|
+
{
|
|
126
|
+
"heading": "Economy",
|
|
127
|
+
"groupItems": [
|
|
128
|
+
{
|
|
129
|
+
"text": "Economic output and productivity"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"text": "Government, public sector and taxes"
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"text": "Gross Value Added (GVA)"
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"text": "Investments, pensions and trusts"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"text": "Regional accounts"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"text": "Environmental accounts"
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"text": "Gross Domestic Product (GDP)"
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"text": "Inflation and price indices"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"text": "National accounts"
|
|
154
|
+
}
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
]
|
|
160
|
+
}
|
|
10
161
|
})
|
|
11
162
|
}}
|
|
@@ -28,6 +28,26 @@
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
&--pale-blue {
|
|
32
|
+
background-color: var(--ons-color-soft-blue-grey);
|
|
33
|
+
margin-bottom: 2.5rem;
|
|
34
|
+
&::before {
|
|
35
|
+
background-color: var(--ons-color-pale-blue);
|
|
36
|
+
border-radius: 0 0 50% 50%;
|
|
37
|
+
content: '';
|
|
38
|
+
height: 100%;
|
|
39
|
+
inset: 0;
|
|
40
|
+
left: -40%;
|
|
41
|
+
position: absolute;
|
|
42
|
+
width: 150%;
|
|
43
|
+
@include mq(l) {
|
|
44
|
+
border-radius: 0 0 80% 50%;
|
|
45
|
+
left: -25%;
|
|
46
|
+
width: 130%;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
31
51
|
&--grey {
|
|
32
52
|
background-color: var(--ons-color-grey-10);
|
|
33
53
|
&::before {
|
|
@@ -44,11 +64,17 @@
|
|
|
44
64
|
width: 100%;
|
|
45
65
|
}
|
|
46
66
|
}
|
|
67
|
+
.ons-hero__title-container {
|
|
68
|
+
@include mq(l) {
|
|
69
|
+
width: 85%;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
47
72
|
}
|
|
48
73
|
&__badge {
|
|
49
|
-
@include mq(
|
|
50
|
-
|
|
51
|
-
|
|
74
|
+
@include mq(l) {
|
|
75
|
+
position: absolute;
|
|
76
|
+
right: 0;
|
|
77
|
+
top: 85px;
|
|
52
78
|
}
|
|
53
79
|
}
|
|
54
80
|
|
|
@@ -329,15 +355,82 @@
|
|
|
329
355
|
}
|
|
330
356
|
}
|
|
331
357
|
|
|
358
|
+
&--pale-blue & {
|
|
359
|
+
&__details {
|
|
360
|
+
padding-bottom: 6rem;
|
|
361
|
+
@include mq(l) {
|
|
362
|
+
padding-bottom: 4rem;
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
&__circle-1 {
|
|
367
|
+
@include mq(l) {
|
|
368
|
+
background-color: var(--ons-color-soft-blue-grey);
|
|
369
|
+
border-radius: 50%;
|
|
370
|
+
height: 440px;
|
|
371
|
+
position: absolute;
|
|
372
|
+
right: 59px;
|
|
373
|
+
top: -339px;
|
|
374
|
+
width: 440px;
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
&__circle-2 {
|
|
379
|
+
background-color: var(--ons-color-light-orange);
|
|
380
|
+
border-radius: 50%;
|
|
381
|
+
bottom: 4%;
|
|
382
|
+
height: 40px;
|
|
383
|
+
position: absolute;
|
|
384
|
+
right: 15%;
|
|
385
|
+
width: 40px;
|
|
386
|
+
@include mq(xl) {
|
|
387
|
+
bottom: 30%;
|
|
388
|
+
height: 72px;
|
|
389
|
+
right: 346px;
|
|
390
|
+
width: 72px;
|
|
391
|
+
}
|
|
392
|
+
@include mq(l, 1299px) {
|
|
393
|
+
bottom: 30%;
|
|
394
|
+
height: 72px;
|
|
395
|
+
right: 25%;
|
|
396
|
+
width: 72px;
|
|
397
|
+
}
|
|
398
|
+
@include mq(m, 979px) {
|
|
399
|
+
bottom: 8%;
|
|
400
|
+
right: 10%;
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
&__circle-3 {
|
|
405
|
+
background-color: var(--ons-color-ocean-blue);
|
|
406
|
+
border-radius: 50%;
|
|
407
|
+
bottom: 7%;
|
|
408
|
+
height: 80px;
|
|
409
|
+
position: absolute;
|
|
410
|
+
right: -26px;
|
|
411
|
+
width: 80px;
|
|
412
|
+
|
|
413
|
+
@include mq(xl) {
|
|
414
|
+
right: 43px;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
@include mq(l) {
|
|
418
|
+
height: 156px;
|
|
419
|
+
right: 2%;
|
|
420
|
+
width: 156px;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
@include mq(m) {
|
|
424
|
+
bottom: 9%;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
|
|
332
429
|
&__title-container {
|
|
333
430
|
@include mq(l) {
|
|
334
431
|
display: grid;
|
|
335
432
|
align-items: start;
|
|
336
433
|
justify-content: space-between;
|
|
337
|
-
|
|
338
|
-
&.ons-hero__title-badge {
|
|
339
|
-
grid-template-columns: 1fr auto;
|
|
340
|
-
}
|
|
341
434
|
}
|
|
342
435
|
}
|
|
343
436
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
{% from "components/icon/_macro.njk" import onsIcon %}
|
|
2
|
+
|
|
1
3
|
{% macro onsHero(params) %}
|
|
2
4
|
|
|
3
5
|
{# Set number of columns used for hero content after medium breakpoint #}
|
|
@@ -12,9 +14,15 @@
|
|
|
12
14
|
<div class="ons-hero__circle-{{ i }}"></div>
|
|
13
15
|
{% endfor %}
|
|
14
16
|
</div>
|
|
17
|
+
{% elif params.variants == 'pale-blue' %}
|
|
18
|
+
<div class="ons-hero__circles" aria-hidden="true">
|
|
19
|
+
{% for i in range(1, 4) %}
|
|
20
|
+
<div class="ons-hero__circle-{{ i }}"></div>
|
|
21
|
+
{% endfor %}
|
|
22
|
+
</div>
|
|
15
23
|
{% endif %}
|
|
16
24
|
<div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
|
|
17
|
-
<div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m
|
|
25
|
+
<div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m col-10@s@m">
|
|
18
26
|
{% if params.breadcrumbs %}
|
|
19
27
|
{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
|
|
20
28
|
{{
|
|
@@ -29,16 +37,20 @@
|
|
|
29
37
|
{% if params.topic %}
|
|
30
38
|
<h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
|
|
31
39
|
{% endif %}
|
|
32
|
-
<div class="ons-hero__title-container
|
|
40
|
+
<div class="ons-hero__title-container">
|
|
33
41
|
<header>
|
|
34
42
|
<h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
|
|
35
43
|
{% if params.subtitle %}
|
|
36
44
|
<h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
|
|
37
45
|
{% endif %}
|
|
38
46
|
</header>
|
|
47
|
+
{% if params.text %}
|
|
48
|
+
<p class="ons-hero__text">{{ params.text | safe }}</p>
|
|
49
|
+
{% endif %}
|
|
50
|
+
</div>
|
|
51
|
+
{% if params.variants == "grey" %}
|
|
39
52
|
{% if params.officialStatisticsBadge == true %}
|
|
40
|
-
|
|
41
|
-
<div class="ons-hero__badge">
|
|
53
|
+
<div class="ons-hero__badge ons-u-mb-s">
|
|
42
54
|
{{-
|
|
43
55
|
onsIcon({
|
|
44
56
|
"iconType": 'official-statistics'
|
|
@@ -46,10 +58,16 @@
|
|
|
46
58
|
-}}
|
|
47
59
|
</div>
|
|
48
60
|
{% endif %}
|
|
49
|
-
{% if params.
|
|
50
|
-
<
|
|
61
|
+
{% if params.censusLogo == true %}
|
|
62
|
+
<div class="ons-hero__census-logo">
|
|
63
|
+
{{-
|
|
64
|
+
onsIcon({
|
|
65
|
+
"iconType": 'census-logo'
|
|
66
|
+
})
|
|
67
|
+
-}}
|
|
68
|
+
</div>
|
|
51
69
|
{% endif %}
|
|
52
|
-
|
|
70
|
+
{% endif %}
|
|
53
71
|
|
|
54
72
|
{% if params.button %}
|
|
55
73
|
{% from "components/button/_macro.njk" import onsButton %}
|
|
@@ -74,7 +92,7 @@
|
|
|
74
92
|
{% from "components/description-list/_macro.njk" import onsDescriptionList %}
|
|
75
93
|
{{
|
|
76
94
|
onsDescriptionList({
|
|
77
|
-
"classes": "ons-u-mb-no",
|
|
95
|
+
"classes": "ons-u-mb-no ons-u-mt-s ons-u-mt-l@l",
|
|
78
96
|
"variant": 'inline',
|
|
79
97
|
"termCol": params.descriptionList.termCol,
|
|
80
98
|
"descriptionCol": params.descriptionList.descriptionCol,
|