hr-design-system-handlebars 1.9.5 → 1.10.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 +25 -0
- package/dist/assets/index.css +3 -3
- package/dist/views/components/grid/grid.hbs +8 -152
- package/dist/views/components/grid/grid_group.hbs +3 -1
- package/dist/views/components/grid/grid_group_100_item_100.hbs +14 -0
- package/dist/views/components/grid/grid_group_100_item_100_with_background.hbs +17 -0
- package/dist/views/components/grid/grid_group_100_item_25.hbs +28 -0
- package/dist/views/components/grid/grid_group_100_item_33.hbs +18 -0
- package/dist/views/components/grid/grid_group_100_item_50.hbs +15 -0
- package/dist/views/components/grid/grid_group_100_tabbed_25.hbs +30 -0
- package/dist/views/components/grid/grid_group_100_tabbed_33.hbs +22 -0
- package/dist/views/components/grid/grid_group_100_tabbed_50.hbs +19 -0
- package/dist/views/components/grid/grid_group_33_item_100.hbs +17 -0
- package/dist/views/components/grid/grid_group_50_item_100.hbs +15 -0
- package/dist/views/components/grid/grid_group_66_item_100.hbs +15 -0
- package/package.json +1 -1
- package/src/stories/views/components/geoTag/geoTag.stories.mdx +1 -1
- package/src/stories/views/components/grid/grid.hbs +8 -152
- package/src/stories/views/components/grid/grid.stories.mdx +251 -9
- package/src/stories/views/components/grid/grid_group.hbs +3 -1
- package/src/stories/views/components/grid/grid_group_100_item_100.hbs +14 -0
- package/src/stories/views/components/grid/grid_group_100_item_100_with_background.hbs +17 -0
- package/src/stories/views/components/grid/grid_group_100_item_25.hbs +28 -0
- package/src/stories/views/components/grid/grid_group_100_item_33.hbs +18 -0
- package/src/stories/views/components/grid/grid_group_100_item_50.hbs +15 -0
- package/src/stories/views/components/grid/grid_group_100_tabbed_25.hbs +30 -0
- package/src/stories/views/components/grid/grid_group_100_tabbed_33.hbs +22 -0
- package/src/stories/views/components/grid/grid_group_100_tabbed_50.hbs +19 -0
- package/src/stories/views/components/grid/grid_group_33_item_100.hbs +17 -0
- package/src/stories/views/components/grid/grid_group_50_item_100.hbs +15 -0
- package/src/stories/views/components/grid/grid_group_66_item_100.hbs +15 -0
- package/src/stories/views/components/teaser/components/teaser_heading.stories.mdx +91 -16
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
import { ArgsTable, Meta, Story, Canvas, Preview } from "@storybook/addon-docs";
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import grid_group_100_item_100 from "./grid_group_100_item_100.hbs";
|
|
4
|
+
import grid_group_100_item_100_with_background from "./grid_group_100_item_100_with_background.hbs";
|
|
5
|
+
import grid_group_100_item_50 from "./grid_group_100_item_50.hbs";
|
|
6
|
+
import grid_group_100_item_33 from "./grid_group_100_item_33.hbs";
|
|
7
|
+
import grid_group_100_item_25 from "./grid_group_100_item_25.hbs";
|
|
8
|
+
import grid_group_66_item_100 from "./grid_group_66_item_100.hbs";
|
|
9
|
+
import grid_group_50_item_100 from "./grid_group_50_item_100.hbs";
|
|
10
|
+
import grid_group_33_item_100 from "./grid_group_33_item_100.hbs";
|
|
11
|
+
import grid_group_100_tabbed_50 from "./grid_group_100_tabbed_50.hbs";
|
|
12
|
+
import grid_group_100_tabbed_33 from "./grid_group_100_tabbed_33.hbs";
|
|
13
|
+
import grid_group_100_tabbed_25 from "./grid_group_100_tabbed_25.hbs";
|
|
14
|
+
|
|
4
15
|
|
|
5
16
|
<Meta
|
|
6
17
|
title="Komponenten/grid"
|
|
@@ -9,25 +20,256 @@ import grid from "./grid.hbs";
|
|
|
9
20
|
}}
|
|
10
21
|
/>
|
|
11
22
|
|
|
12
|
-
export const
|
|
23
|
+
export const Template01 = ({ text, ...args }) => {
|
|
24
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
25
|
+
// return `<div>${label}</div>`;
|
|
26
|
+
return grid_group_100_item_100({ text, ...args });
|
|
27
|
+
};
|
|
28
|
+
export const Template02 = ({ text, ...args }) => {
|
|
29
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
30
|
+
// return `<div>${label}</div>`;
|
|
31
|
+
return grid_group_100_item_100_with_background({ text, ...args });
|
|
32
|
+
};
|
|
33
|
+
export const Template03 = ({ text, ...args }) => {
|
|
34
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
35
|
+
// return `<div>${label}</div>`;
|
|
36
|
+
return grid_group_100_item_50({ text, ...args });
|
|
37
|
+
};
|
|
38
|
+
export const Template04 = ({ text, ...args }) => {
|
|
39
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
40
|
+
// return `<div>${label}</div>`;
|
|
41
|
+
return grid_group_100_item_33({ text, ...args });
|
|
42
|
+
};
|
|
43
|
+
export const Template05 = ({ text, ...args }) => {
|
|
44
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
45
|
+
// return `<div>${label}</div>`;
|
|
46
|
+
return grid_group_100_item_25({ text, ...args });
|
|
47
|
+
};
|
|
48
|
+
export const Template06 = ({ text, ...args }) => {
|
|
49
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
50
|
+
// return `<div>${label}</div>`;
|
|
51
|
+
return grid_group_66_item_100({ text, ...args });
|
|
52
|
+
};
|
|
53
|
+
export const Template07 = ({ text, ...args }) => {
|
|
54
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
55
|
+
// return `<div>${label}</div>`;
|
|
56
|
+
return grid_group_50_item_100({ text, ...args });
|
|
57
|
+
};
|
|
58
|
+
export const Template08 = ({ text, ...args }) => {
|
|
59
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
60
|
+
// return `<div>${label}</div>`;
|
|
61
|
+
return grid_group_33_item_100({ text, ...args });
|
|
62
|
+
};
|
|
63
|
+
export const Template09 = ({ text, ...args }) => {
|
|
64
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
65
|
+
// return `<div>${label}</div>`;
|
|
66
|
+
return grid_group_100_tabbed_50({ text, ...args });
|
|
67
|
+
};
|
|
68
|
+
export const Template10 = ({ text, ...args }) => {
|
|
69
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
70
|
+
// return `<div>${label}</div>`;
|
|
71
|
+
return grid_group_100_tabbed_33({ text, ...args });
|
|
72
|
+
};
|
|
73
|
+
export const Template11 = ({ text, ...args }) => {
|
|
13
74
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
14
75
|
// return `<div>${label}</div>`;
|
|
15
|
-
return
|
|
76
|
+
return grid_group_100_tabbed_25({ text, ...args });
|
|
16
77
|
};
|
|
17
78
|
|
|
18
|
-
#
|
|
79
|
+
# Grid
|
|
80
|
+
|
|
81
|
+
Das sog. "Grid" (engl.: Netz) bildet das Layout-Raster für eine Übersichtsseite und
|
|
82
|
+
beschreibt die Einteilung einer Seite in horizontale - Zeilen - und vertikale - Spalten - Einheiten.
|
|
83
|
+
Neben der Anordnung dr Elemente wird dabei auch explizit deren Dimensionierung vorgenommen.
|
|
84
|
+
|
|
85
|
+
# Grundaufbau
|
|
86
|
+
Um ein Grid für ein Template zu erzeugen muß zunächst das ein umschließendes Wrapper-Markup gebaut werden:
|
|
87
|
+
```html
|
|
88
|
+
<div class="grid grid-page">
|
|
89
|
+
<div class="{{> components/grid/grid_group_wrapper_classes }}">
|
|
90
|
+
...
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
```
|
|
94
|
+
# Gruppe (grid-group)
|
|
95
|
+
Im Wrapper wird eine sog. "Gruppe" erzeugt. Sie entspricht im Raster einer Zeile.
|
|
96
|
+
Bei der Größe (_size) sind auch kleinere Werte als "100" (siehe "Grid-Aufbau invers") zulässig. Finden jedoch keinen Anwendungsfall.
|
|
97
|
+
|
|
98
|
+
Zusätzlich kann der Gruppe eine Hintergrund-Farbe vergeben werden.
|
|
99
|
+
|
|
100
|
+
## Einbindung
|
|
101
|
+
Die Komponente wird in Form eines Handlebar Partials eingebunden.
|
|
102
|
+
|
|
103
|
+
```html
|
|
104
|
+
{{#>components/grid/grid_group _size="100"}}
|
|
105
|
+
```
|
|
106
|
+
Mit folgenden Parametern kann die Komponente konfiguriert werden.
|
|
107
|
+
|
|
108
|
+
| Parameter | Typ | Mögliche Werte | Erläuterung |
|
|
109
|
+
| :--------- | :------- | :--------------------- | :----------------------------------------------- |
|
|
110
|
+
| **\_size** | `Zahl`| Teilbare Vielfache | Entpsrechung des prozentualen Wertes (100% = 100)
|
|
111
|
+
| **\__backgroundColor**|`Zahl`|1,2,3... | Definierte Farbwerte die der Zahl beigeordnet sind | Die Beschriftung des Labels. |
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
# Objekt (grid-item)
|
|
115
|
+
In einer Gruppe werden ein oder mehrerer sog. "Objekte" - Items - angelegt. Sie entsprechen im Raster einer oder mehrerer Spalten.
|
|
116
|
+
Bei der Größe (_size) wird hier keine prozentuale Entsprechung, wie bei der Gruppe angegeben, sondern dem Tailwind-Schema 12/12 = 100%,
|
|
117
|
+
was einer ```_size = 12``` entspricht.
|
|
118
|
+
Um 50% (6/12) zu realisieren gibt man bei ```_size = 6``` ein usf.
|
|
119
|
+
|
|
120
|
+
## Einbindung
|
|
121
|
+
Die Komponente wird in Form eines Handlebar Partials eingebunden.
|
|
122
|
+
|
|
123
|
+
```html
|
|
124
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
125
|
+
```
|
|
126
|
+
Mit folgenden Parametern kann die Komponente konfiguriert werden.
|
|
127
|
+
|
|
128
|
+
| Parameter | Typ | Mögliche Werte | Erläuterung |
|
|
129
|
+
| :--------- | :------- | :--------------------- | :----------------------------------------------- |
|
|
130
|
+
| **\_size** | `Zahl`| Teilbare Vielfache | Entsprechung nach Tailwind-Schema 12/12 = 100%
|
|
131
|
+
|
|
132
|
+
# Anwendungsbeispiele
|
|
133
|
+
|
|
134
|
+
### Grid 100%
|
|
135
|
+
<Preview>
|
|
136
|
+
<Story
|
|
137
|
+
name="Grid 100%"
|
|
138
|
+
args={{
|
|
139
|
+
|
|
140
|
+
}}
|
|
141
|
+
>
|
|
142
|
+
{Template01.bind({})}
|
|
143
|
+
</Story>
|
|
144
|
+
</Preview>
|
|
145
|
+
|
|
146
|
+
### Grid 100% mit Hintergrund
|
|
147
|
+
<Preview>
|
|
148
|
+
<Story
|
|
149
|
+
name="Grid 100% mit Hintergrund"
|
|
150
|
+
args={{
|
|
151
|
+
|
|
152
|
+
}}
|
|
153
|
+
>
|
|
154
|
+
{Template02.bind({})}
|
|
155
|
+
</Story>
|
|
156
|
+
</Preview>
|
|
157
|
+
|
|
158
|
+
### Grid 50%
|
|
159
|
+
<Preview>
|
|
160
|
+
<Story
|
|
161
|
+
name="Grid 50%"
|
|
162
|
+
args={{
|
|
163
|
+
|
|
164
|
+
}}
|
|
165
|
+
>
|
|
166
|
+
{Template03.bind({})}
|
|
167
|
+
</Story>
|
|
168
|
+
</Preview>
|
|
169
|
+
|
|
170
|
+
### Grid 33%
|
|
171
|
+
<Preview>
|
|
172
|
+
<Story
|
|
173
|
+
name="Grid 33%"
|
|
174
|
+
args={{
|
|
175
|
+
|
|
176
|
+
}}
|
|
177
|
+
>
|
|
178
|
+
{Template04.bind({})}
|
|
179
|
+
</Story>
|
|
180
|
+
</Preview>
|
|
181
|
+
|
|
182
|
+
### Grid 25%
|
|
183
|
+
<Preview>
|
|
184
|
+
<Story
|
|
185
|
+
name="Grid 25%"
|
|
186
|
+
args={{
|
|
187
|
+
|
|
188
|
+
}}
|
|
189
|
+
>
|
|
190
|
+
{Template05.bind({})}
|
|
191
|
+
</Story>
|
|
192
|
+
</Preview>
|
|
193
|
+
|
|
194
|
+
### Grid Tabbed 50%
|
|
195
|
+
<Preview>
|
|
196
|
+
<Story
|
|
197
|
+
name="Grid Tabbed 50%"
|
|
198
|
+
args={{
|
|
199
|
+
|
|
200
|
+
}}
|
|
201
|
+
>
|
|
202
|
+
{Template09.bind({})}
|
|
203
|
+
</Story>
|
|
204
|
+
</Preview>
|
|
205
|
+
|
|
206
|
+
### Grid Tabbed 33%
|
|
207
|
+
<Preview>
|
|
208
|
+
<Story
|
|
209
|
+
name="Grid Tabbed 33%"
|
|
210
|
+
args={{
|
|
211
|
+
|
|
212
|
+
}}
|
|
213
|
+
>
|
|
214
|
+
{Template10.bind({})}
|
|
215
|
+
</Story>
|
|
216
|
+
</Preview>
|
|
217
|
+
|
|
218
|
+
### Grid Tabbed 25%
|
|
219
|
+
<Preview>
|
|
220
|
+
<Story
|
|
221
|
+
name="Grid Tabbed 25%"
|
|
222
|
+
args={{
|
|
223
|
+
|
|
224
|
+
}}
|
|
225
|
+
>
|
|
226
|
+
{Template11.bind({})}
|
|
227
|
+
</Story>
|
|
228
|
+
</Preview>
|
|
19
229
|
|
|
20
|
-
|
|
230
|
+
# Grid Aufbau invers
|
|
231
|
+
Reguläre spannt sich die Gruppe zu 100% auf und die Größe der Objekte sind teilbare Vielfache davon:
|
|
232
|
+
100 / 2 Objekte = 50 % pro Objekt oder 66% + 33,3%
|
|
233
|
+
100 / 3 Objekte = 33,3 % pro Objekt
|
|
234
|
+
100 / 4 Objekte = 25 % pro Objekt
|
|
235
|
+
Mit inversem Aufbau ist gemeint, das die Gruppe die Größe vorgibt und die Objekte immer 100% haben:
|
|
236
|
+
66 % / 2 Objekte = 100 % pro Objekt
|
|
21
237
|
|
|
22
|
-
|
|
238
|
+
### Grid 66%
|
|
239
|
+
<Preview>
|
|
23
240
|
<Story
|
|
24
|
-
name="
|
|
241
|
+
name="66%"
|
|
25
242
|
args={{
|
|
26
243
|
|
|
27
244
|
}}
|
|
28
245
|
>
|
|
29
|
-
{
|
|
246
|
+
{Template06.bind({})}
|
|
30
247
|
</Story>
|
|
31
248
|
</Preview>
|
|
32
249
|
|
|
33
|
-
|
|
250
|
+
### Grid 50%
|
|
251
|
+
<Preview>
|
|
252
|
+
<Story
|
|
253
|
+
name="50%"
|
|
254
|
+
args={{
|
|
255
|
+
|
|
256
|
+
}}
|
|
257
|
+
>
|
|
258
|
+
{Template07.bind({})}
|
|
259
|
+
</Story>
|
|
260
|
+
</Preview>
|
|
261
|
+
|
|
262
|
+
### Grid 33%
|
|
263
|
+
<Preview>
|
|
264
|
+
<Story
|
|
265
|
+
name="33%"
|
|
266
|
+
args={{
|
|
267
|
+
|
|
268
|
+
}}
|
|
269
|
+
>
|
|
270
|
+
{Template08.bind({})}
|
|
271
|
+
</Story>
|
|
272
|
+
</Preview>
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
<ArgsTable story="Grid" />
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
{{~#if _backgroundColor}}
|
|
2
2
|
{{#>components/grid/grid_group_highlight _backgroundColor=this.backgroundColor }}
|
|
3
3
|
{{> @partial-block }}
|
|
4
|
+
|
|
4
5
|
{{/components/grid/grid_group_highlight }}
|
|
5
6
|
{{else}}
|
|
6
7
|
{{#>components/grid/grid_group_standard _groupSize=this.teaserSize }}
|
|
7
8
|
{{> @partial-block }}
|
|
9
|
+
|
|
8
10
|
{{/components/grid/grid_group_standard }}
|
|
9
|
-
{{/if}}
|
|
11
|
+
{{/if}}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<div class="grid grid-page">
|
|
2
|
+
<div class="{{> components/grid/grid_group_wrapper_classes }}">
|
|
3
|
+
{{#>components/grid/grid_group _size="100"}}
|
|
4
|
+
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
|
|
5
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
6
|
+
<a href="#">
|
|
7
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
8
|
+
12/12 = 100%
|
|
9
|
+
</div>
|
|
10
|
+
</a>
|
|
11
|
+
{{/components/grid/grid_item}}
|
|
12
|
+
{{/components/grid/grid_group}}
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div class="grid grid-page">
|
|
2
|
+
<div class="{{> components/grid/grid_group_wrapper_classes }}">
|
|
3
|
+
{{#>components/grid/grid_group _backgroundColor="2" _size="100"}}
|
|
4
|
+
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% mit blauen Hintergrund bis Rand</h2>
|
|
5
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
6
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
7
|
+
6/12 = 50%
|
|
8
|
+
</div>
|
|
9
|
+
{{/components/grid/grid_item}}
|
|
10
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
11
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
12
|
+
6/12 = 50%
|
|
13
|
+
</div>
|
|
14
|
+
{{/components/grid/grid_item}}
|
|
15
|
+
{{/components/grid/grid_group}}
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{{#>components/grid/grid_group _size="100"}}
|
|
2
|
+
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
|
|
3
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
4
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
5
|
+
3/12 = 25%
|
|
6
|
+
</div>
|
|
7
|
+
{{/components/grid/grid_item}}
|
|
8
|
+
|
|
9
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
10
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
11
|
+
3/12 = 25%
|
|
12
|
+
</div>
|
|
13
|
+
{{/components/grid/grid_item}}
|
|
14
|
+
|
|
15
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
16
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
17
|
+
3/12 = 25%
|
|
18
|
+
</div>
|
|
19
|
+
{{/components/grid/grid_item}}
|
|
20
|
+
|
|
21
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
22
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
23
|
+
3/12 = 25%
|
|
24
|
+
</div>
|
|
25
|
+
{{/components/grid/grid_item}}
|
|
26
|
+
{{/components/grid/grid_group}}
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
|
|
2
|
+
{{#>components/grid/grid_group _size="100"}}
|
|
3
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
4
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
5
|
+
4/12 = 33%
|
|
6
|
+
</div>
|
|
7
|
+
{{/components/grid/grid_item}}
|
|
8
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
9
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
10
|
+
4/12 = 33%
|
|
11
|
+
</div>
|
|
12
|
+
{{/components/grid/grid_item}}
|
|
13
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
14
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
15
|
+
4/12 = 33%
|
|
16
|
+
</div>
|
|
17
|
+
{{/components/grid/grid_item}}
|
|
18
|
+
{{/components/grid/grid_group}}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{{#>components/grid/grid_group _size="100"}}
|
|
2
|
+
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
|
|
3
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
4
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
5
|
+
6/12 = 50%
|
|
6
|
+
</div>
|
|
7
|
+
{{/components/grid/grid_item}}
|
|
8
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
9
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
10
|
+
6/12 = 50%
|
|
11
|
+
</div>
|
|
12
|
+
{{/components/grid/grid_item}}
|
|
13
|
+
{{/components/grid/grid_group}}
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<div class="grid grid-page">
|
|
2
|
+
<div class="{{> components/grid/grid_group_wrapper_classes }}">
|
|
3
|
+
{{#>components/grid/grid_group_tabbed }}
|
|
4
|
+
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% Tabbed</h2>
|
|
5
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
6
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
7
|
+
3/12 = 25%
|
|
8
|
+
</div>
|
|
9
|
+
{{/components/grid/grid_item}}
|
|
10
|
+
|
|
11
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
12
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
13
|
+
3/12 = 25%
|
|
14
|
+
</div>
|
|
15
|
+
{{/components/grid/grid_item}}
|
|
16
|
+
|
|
17
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
18
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
19
|
+
3/12 = 25%
|
|
20
|
+
</div>
|
|
21
|
+
{{/components/grid/grid_item}}
|
|
22
|
+
|
|
23
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
24
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
25
|
+
3/12 = 25%
|
|
26
|
+
</div>
|
|
27
|
+
{{/components/grid/grid_item}}
|
|
28
|
+
{{/components/grid/grid_group_tabbed}}
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<div class="grid grid-page">
|
|
2
|
+
<div class="{{> components/grid/grid_group_wrapper_classes }}">
|
|
3
|
+
{{#>components/grid/grid_group_tabbed}}
|
|
4
|
+
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
|
|
5
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
6
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
7
|
+
4/12 = 33%
|
|
8
|
+
</div>
|
|
9
|
+
{{/components/grid/grid_item}}
|
|
10
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
11
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
12
|
+
4/12 = 33%
|
|
13
|
+
</div>
|
|
14
|
+
{{/components/grid/grid_item}}
|
|
15
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
16
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
17
|
+
4/12 = 33%
|
|
18
|
+
</div>
|
|
19
|
+
{{/components/grid/grid_item}}
|
|
20
|
+
{{/components/grid/grid_group_tabbed}}
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<div class="grid grid-page">
|
|
2
|
+
<div class="{{> components/grid/grid_group_wrapper_classes }}">
|
|
3
|
+
{{#>components/grid/grid_group_tabbed }}
|
|
4
|
+
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 50% Tabbed</h2>
|
|
5
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
6
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
7
|
+
6/12 = 50%
|
|
8
|
+
</div>
|
|
9
|
+
{{/components/grid/grid_item}}
|
|
10
|
+
|
|
11
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
12
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
13
|
+
6/12 = 50%
|
|
14
|
+
</div>
|
|
15
|
+
{{/components/grid/grid_item}}
|
|
16
|
+
{{/components/grid/grid_group_tabbed}}
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div class="grid grid-page">
|
|
2
|
+
<div class="{{> components/grid/grid_group_wrapper_classes }}">
|
|
3
|
+
{{#>components/grid/grid_group _size="33"}}
|
|
4
|
+
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 33%</h2>
|
|
5
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
6
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
7
|
+
4/12 = 33%
|
|
8
|
+
</div>
|
|
9
|
+
{{/components/grid/grid_item}}
|
|
10
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
11
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
12
|
+
4/12 = 33%
|
|
13
|
+
</div>
|
|
14
|
+
{{/components/grid/grid_item}}
|
|
15
|
+
{{/components/grid/grid_group}}
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<div class="grid grid-page">
|
|
2
|
+
<div class="{{> components/grid/grid_group_wrapper_classes }}">
|
|
3
|
+
{{#>components/grid/grid_group _size="50"}}
|
|
4
|
+
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
|
|
5
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
6
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
7
|
+
6/12 = 50%
|
|
8
|
+
</div>
|
|
9
|
+
{{/components/grid/grid_item}}
|
|
10
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
11
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
12
|
+
6/12 = 50%
|
|
13
|
+
</div>
|
|
14
|
+
{{/components/grid/grid_item}}
|
|
15
|
+
{{/components/grid/grid_group}}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<div class="grid grid-page">
|
|
2
|
+
<div class="{{> components/grid/grid_group_wrapper_classes }}">
|
|
3
|
+
{{#>components/grid/grid_group _size="66"}}
|
|
4
|
+
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>
|
|
5
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
6
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
7
|
+
8/12 = 66%
|
|
8
|
+
</div>
|
|
9
|
+
{{/components/grid/grid_item}}
|
|
10
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
11
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
12
|
+
8/12 = 66%
|
|
13
|
+
</div>
|
|
14
|
+
{{/components/grid/grid_item}}
|
|
15
|
+
{{/components/grid/grid_group}}
|