-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathpost-header.test.html
140 lines (130 loc) · 5.9 KB
/
post-header.test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="../../node_modules/@swisspost/design-system-styles/post-tokens-external.css"
/>
<link rel="stylesheet" href="../../node_modules/@swisspost/design-system-styles/elements.css" />
<link
rel="stylesheet"
href="../../node_modules/@swisspost/design-system-styles/components/header/index.css"
/>
<script src="../../dist/post-components/post-components.esm.js" type="module"></script>
</head>
<body>
<post-header>
<!-- Logo -->
<post-logo slot="post-logo">Homepage</post-logo>
<!-- Meta navigation -->
<ul class="list-inline" slot="meta-navigation">
<li><a href="">Jobs</a></li>
<li><a href="">Über uns</a></li>
</ul>
<!-- Menu button for mobile -->
<post-togglebutton slot="post-togglebutton">
<span class="visually-hidden-sm">Menu</span>
<post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
<post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>
</post-togglebutton>
<!-- Language switch -->
<post-language-switch
caption="Change the language"
description="The currently selected language is English."
name="language-switch-example"
slot="post-language-switch"
>
<post-language-option active="false" code="de" name="Deutsch">DE</post-language-option>
<post-language-option active="false" code="fr" name="French">FR</post-language-option>
<post-language-option active="false" code="it" name="Italiano">IT</post-language-option>
<post-language-option active="true" code="en" name="English">EN</post-language-option>
</post-language-switch>
<!-- Application title (optional) -->
<h1 slot="title">Application title</h1>
<!-- Custom content (optional) -->
<ul class="list-inline">
<li>
<a href="#">
<span class="visually-hidden-sm">Search</span>
<post-icon aria-hidden="true" name="search"></post-icon>
</a>
</li>
<li>
<a href="#">
<span class="visually-hidden-sm">Login</span>
<post-icon aria-hidden="true" name="login"></post-icon>
</a>
</li>
</ul>
<!-- Main navigation -->
<post-mainnavigation caption="Hauptnavigation">
<button type="button" slot="back-button" class="btn btn-sm btn-tertiary">
<post-icon aria-hidden="true" name="arrowright"></post-icon> Back
</button>
<post-list title-hidden="">
<h2>Main Navigation</h2>
<!-- Link only level 1 -->
<post-list-item><a href="/briefe">Briefe</a></post-list-item>
<post-list-item><a href="/pakete">Pakete</a></post-list-item>
<!-- Level 1 with megadropdown -->
<post-list-item>
<post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
<post-megadropdown id="briefe">
<button slot="back-button" class="btn btn-tertiary btn-sm">
<post-icon name="arrowright"></post-icon>
Back
</button>
<post-closebutton slot="close-button">Schliessen</post-closebutton>
<h2 slot="megadropdown-title">Briefe title</h2>
<post-list>
<h3>Briefe senden</h3>
<post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
<post-list>
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
</post-megadropdown>
</post-list-item>
<post-list-item>
<post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
<post-megadropdown id="pakete">
<button slot="back-button" class="btn btn-tertiary btn-sm">
<post-icon name="arrowright"></post-icon>
Back
</button>
<post-closebutton slot="close-button">Schliessen</post-closebutton>
<h2 slot="megadropdown-title">Pakete title</h2>
<post-list>
<h3>Pakete senden</h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
<post-list>
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
</post-megadropdown>
</post-list-item>
</post-list>
</post-mainnavigation>
</post-header>
<main>
<h1>Page Content</h1>
</main>
</body>
</html>