Templates
Beschleunigen Sie die Umsetzung Ihres Projekts mit Vorlagen, zusammengesetzt aus beste-henden Komponenten des Styleguides. Häufig verwendete Seiten werden hier zur Verfügung gestellt.
Webdienste
Komponenten:
- Webdienst-Header
- Inhaltsbereich mit Titel und Lead-Text
- Webdienst-Footer
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta magni incidunt quos ex! Veniam accusamus ad harum suscipit ipsa, voluptas ipsum eligendi quisquam quis aspernatur iure. Nisi sequi esse eveniet.
1
2 // Webdienste Basic Template
3 ...
4 <nav class="paas navbar navbar-light navbar-expand-lg navbar-main">
5 <div class="navbar-container container flex align-content-center mb-lg-3">
6 <a href="/" class="navbar-brand">
7 <img
8 src=""
9 alt=""
10 height=""
11 width=""
12 />
13 </a>
14
15 <button
16 class="navbar-toggler position-absolute end-0"
17 type="button"
18 data-bs-toggle="collapse"
19 data-bs-target="#navbarTogglerDemo03"
20 aria-controls="navbarNav"
21 aria-expanded="false"
22 aria-label="Toggle navigation"
23 >
24 <span class="navbar-toggler-icon"></span> Menü
25 </button>
26
27 <div class="d-lg-flex align-items-center d-none mr-3 meta-nav-wrapper">
28 <ul class="nav lang-nav">
29 <li>
30 <a class="active" href="#">
31 DE
32 </a>
33 </li>
34 <li>
35 <a href="#">EN</a>
36 </li>
37 </ul>
38 <button
39 class="btn btn-secondary d-none d-lg-block search-button"
40 data-search-icon=""
41 type="button"
42 >
43 <svg height="20" viewBox="0 0 19 20" width="19">
44 <g
45 fill="none"
46 fill-rule="evenodd"
47 stroke="currentColor"
48 transform="translate(1 1)"
49 >
50 <path
51 d="M16.5 17.5l-4-4"
52 stroke-linecap="round"
53 stroke-wdth="3"
54 ></path>
55 <circle cx="7" cy="7" r="7" strokeWidth="2"></circle>
56 </g>
57 </svg>
58 <span class="sr-only sr-only-focusable">Suchen</span>
59 </button>
60 </div>
61 </div>
62
63 <!-- PAAS TITLEBAR -->
64 <div class="navbar-banner bg-secondary py-1 w-100">
65 <p class="container font-bigger leading-semi">
66 PROJECT TITLE
67 </p>
68 </div>
69
70 <div class="paas container">
71 <nav class="navbar navbar-light navbar-expand-lg navbar-main">
72 <div
73 class="collapse navbar-collapse pb-3 pb-lg-0"
74 id="navbarTogglerDemo03"
75 >
76 <ul class="navbar-nav">
77 <li class="nav-item">
78 <a class="nav-link active" href="#">
79 First level 1
80 </a>
81 </li>
82 <li class="nav-item">
83 <a class="nav-link" href="#">
84 First level 2
85 </a>
86 </li>
87 <li class="nav-item dropdown">
88 <a
89 class="nav-link dropdown-toggle"
90 href="#"
91 data-bs-toggle="dropdown"
92 >
93 First level 3
94 </a>
95 <ul class="dropdown-menu">
96 <li class="nav-item">
97 <a class="dropdown-item" href="#">
98 Second level 1
99 </a>
100 </li>
101 <li class="nav-item dropdown">
102 <a
103 class="nav-link dropdown-toggle"
104 href="#"
105 data-bs-toggle="dropdown"
106 >
107 Second level 2
108 </a>
109 <ul class="submenu dropdown-menu">
110 <li>
111 <a class="dropdown-item" href="">
112 Third level 1
113 </a>
114 </li>
115 <li>
116 <a class="dropdown-item" href="">
117 Third level 2
118 </a>
119 </li>
120 <li class="nav-item dropdown">
121 <a
122 class="nav-link dropdown-toggle"
123 href=""
124 data-bs-toggle="dropdown"
125 >
126 Third level 3
127 </a>
128 <ul class="submenu dropdown-menu">
129 <li>
130 <a class="dropdown-item" href="">
131 Fourth level 1
132 </a>
133 </li>
134 <li>
135 <a class="dropdown-item" href="">
136 Fourth level 2
137 </a>
138 </li>
139 </ul>
140 </li>
141 <li>
142 <a class="dropdown-item" href="">
143 Second level 4
144 </a>
145 </li>
146 <li>
147 <a class="dropdown-item" href="">
148 Second level 5
149 </a>
150 </li>
151 </ul>
152 </li>
153 <li>
154 <a class="dropdown-item" href="#">
155 Dropdown item 3
156 </a>
157 </li>
158 <li>
159 <a class="dropdown-item" href="#">
160 Dropdown item 4
161 </a>
162 </li>
163 </ul>
164 </li>
165 <li class="nav-item">
166 <a class="nav-link" href="#">
167 First level 1
168 </a>
169 </li>
170 <li class="nav-item">
171 <a class="nav-link" href="#">
172 First level 2
173 </a>
174 </li>
175 <li class="nav-item dropdown">
176 <a
177 class="nav-link dropdown-toggle"
178 href="#"
179 data-bs-toggle="dropdown"
180 >
181 Dropdown right
182 </a>
183 <ul class="dropdown-menu dropdown-menu-right">
184 <li>
185 <a class="dropdown-item" href="#">
186 Dropdown item 1
187 </a>
188 </li>
189 <li>
190 <a class="dropdown-item" href="#">
191 Dropdown item 2
192 </a>
193 </li>
194 <li class="nav-item dropdown">
195 <a
196 class="nav-link dropdown-toggle"
197 href="#"
198 data-bs-toggle="dropdown"
199 >
200 Dropdown item 3
201 </a>
202 <ul class="submenu submenu-left dropdown-menu">
203 <li>
204 <a class="dropdown-item" href="">
205 Submenu item 1
206 </a>
207 </li>
208 <li>
209 <a class="dropdown-item" href="">
210 Submenu item 2
211 </a>
212 </li>
213 <li>
214 <a class="dropdown-item" href="">
215 Submenu item 3
216 </a>
217 </li>
218 <li>
219 <a class="dropdown-item" href="">
220 Submenu item 4
221 </a>
222 </li>
223 </ul>
224 </li>
225 <li>
226 <a class="dropdown-item" href="#">
227 Dropdown item 4
228 </a>
229 </li>
230 </ul>
231 </li>
232 </ul>
233 <div class="d-lg-none">
234 <form
235 method="get"
236 class="form-control-lg search-form"
237 action="https://www.fhnw.ch/plattformen/dokumentation-webdienste/"
238 data-search-form=""
239 >
240 <div class="search-box-wrapper">
241 <label htmlFor="63ef28553013c" class="sr-only">
242 Geben Sie Ihren Suchbegriff ein
243 </label>
244 <input
245 type="text"
246 class="field"
247 name="s"
248 id="63ef28553013c"
249 aria-label="Geben Sie Ihren Suchbegriff ein"
250 placeholder="Geben Sie Ihren Suchbegriff ein"
251 data-search-input=""
252 autoComplete="off"
253 />
254 <svg
255 xmlns="http://www.w3.org/2000/svg"
256 width="64"
257 height="64"
258 viewBox="0 0 484.5 484.5"
259 class="enter-icon"
260 data-search-enter-icon="enter-icon"
261 >
262 <path d="M433.5 114.75v102H96.9l91.8-91.8-35.7-35.7-153 153 153 153 35.7-35.7-91.8-91.8h387.6v-153z"></path>
263 </svg>
264 </div>
265 </form>
266 </div>
267 </div>
268 </nav>
269 </div>
270 </nav>
271
272 <footer id="footer">
273 <div class="container">
274 <div class="row">
275 <div class="col-xs-12 col-sm-6 col-md-4">
276 <h4>Kontakt</h4>
277 <p>
278 Fachhochschule Nordwestschweiz FHNW
279 <br />
280 Institute
281 <br />
282 Division
283 <br />
284 Street<br />
285 Zip Location
286 </p>
287 <p>
288 E-Mail: <a href="mailto:#">E-Mail</a>
289 </p>
290
291 <!-- Social Media Icons -->
292 ...
293 </div>
294 <div class="col-xs-12 col-sm-12 col-md-4 order-first order-md-0">
295 <h4>Über diese Website</h4>
296 <p>
297 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae vel esse obcaecati minus!
298 Aperiam quibusdam, voluptatem est recusandae neque veritatis sunt.
299 Corporis quibusdam ad vitae consequuntur nemo, atque error iste.
300 </p>
301 </div>
302 <div class="col-xs-12 col-sm-6 col-md-4">
303 <h4>Quicklinks</h4>
304 <p>
305 <a href="#">
306 Link
307 </a>
308 <br />
309 <a href="#">Link</a>
310 <br />
311 <a href="#">
312 Link
313 </a>
314 <br />
315 <a href="#">Quicklinks</a>
316 </p>
317 </div>
318 </div>
319 </div>
320 <div class="container tools__footer">
321 <div class="row">
322 <div class="d-flex justify-content-center">
323 <p>
324 <a href="https://www.fhnw.ch" target="_blank">
325 www.fhnw.ch
326 </a>
327 <span class="d-inline-block mx-1 mx-md-2">|</span>
328 <a href="#">Impressum</a>
329 <span class="d-inline-block mx-1 mx-md-2">|</span>
330 <a href="#">Datenschutz</a>
331 </p>
332 </div>
333 </div>
334 </div>
335 </footer>
336 ...
337Tools & Service
Komponenten:
- Tools-Header
- Inhaltsbereich mit Titel und Lead-Text
- Tools-Footer
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta magni incidunt quos ex! Veniam accusamus ad harum suscipit ipsa, voluptas ipsum eligendi quisquam quis aspernatur iure. Nisi sequi esse eveniet.
1
2 // Tools & Services Basic Template
3 ...
4 <!-- START NAVIGATION -->
5 <nav
6 className="navbar navbar-expand-lg navbar-light"
7 role="navigation"
8 >
9 <a className="navbar-brand">
10 <img
11 src=""
12 alt="FHNW - Fachhochschule Nordwestschweiz"
13 height=""
14 width=""
15 />
16 </a>
17
18 <button
19 className="navbar-toggler"
20 type="button"
21 data-bs-toggle="collapse"
22 data-bs-target="navbarId"
23 aria-controls=""
24 aria-expanded="false"
25 aria-label="Toggle navigation"
26 >
27 <span className="navbar-toggler-icon"></span> Menü
28 </button>
29
30 <!-- MAIN NAVIGATION -->
31 <div className="collapse navbar-collapse" id="navbarId">
32 <ul className="navbar-nav mr-auto mt-2 mt-md-0">
33 <li className="nav-item">
34 <a className="nav-link" aria-current="page">
35 Home
36 </a>
37 </li>
38 <li className="nav-item dropdown">
39 <a
40 className="nav-link dropdown-toggle"
41 href="#"
42 id="navbarCorporate"
43 role="button"
44 data-bs-toggle="dropdown"
45 aria-expanded="false"
46 >
47 Single Dropdown
48 </a>
49
50 <ul className="dropdown-menu" aria-labelledby="navbarCorporate">
51 <li>
52 <a className="dropdown-item" title="Webdienste">
53 Subitem I
54 </a>
55 </li>
56 <li>
57 <a className="dropdown-item" title="Tools und Services">
58 Subitem II
59 </a>
60 </li>
61 <li>
62 <hr className="dropdown-divider" />
63 </li>
64 </ul>
65 </li>
66 <li className="nav-item dropdown has-megamenu">
67 <a
68 className="nav-link dropdown-toggle"
69 href="#"
70 data-bs-toggle="dropdown"
71 >
72 Megamenu
73 </a>
74 <div className="dropdown-menu megamenu" role="menu">
75 <MegaMenuDemo title="Metatitle" />
76 </div>
77 </li>
78 <li>
79 <a className="nav-link ">Topic II</a>
80 </li>
81 </ul>
82 </div>
83
84 <!-- LANGUAGE SWITCHER -->
85 <div className="collapse navbar-collapse d-flex justify-content-end d-none">
86 <div className="language-menu border-primary border-end px-4">
87 <ul className="navbar-nav mr-auto mt-2 mt-md-0 gap-2">
88 <li className="nav-item">
89 <a
90 href=""
91 className="btn btn-outline-secondary btn-sm bg-primary text-white px-2"
92 aria-current="page"
93 data-bs-toggle="tooltip"
94 data-bs-placement="bottom"
95 title="Demonstration purposes only"
96 >
97 DE
98 </a>
99 </li>
100 <li className="nav-item">
101 <a
102 href=""
103 className="btn btn-outline-secondary bg-transparent btn-sm px-2"
104 aria-current="page"
105 data-bs-toggle="tooltip"
106 data-bs-placement="bottom"
107 title="Demonstration purposes only"
108 >
109 EN
110 </a>
111 </li>
112 </ul>
113 </div>
114
115 <!-- USER DROPDOWN -->
116 <ul className="navbar-nav mr-auto mt-2 mt-md-0 px-3">
117 <li className="nav-item dropdown">
118 <a href="#" className="nav-link dropdown-toggle d-flex align-items-center" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
119 <img src="" className="rounded-circle" height="22" alt="Avatar" loading="lazy"/>
120 </a>
121 <ul className="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown3">
122 <li>
123 <a href="" target="_blank" className="dropdown-item" title="">My Profile</a>
124 </li>
125 <li>
126 <a href="" target="_blank" className="dropdown-item" title="Settings">Settings</a>
127 </li>
128 <li>
129 <a href="" target="_blank" className="dropdown-item" title="Logout">Logout</a>
130 </li>
131 </ul>
132 </li>
133 </ul>
134 </div>
135 </nav>
136 <!-- CONTENT -->
137 <div class="container">
138 <div class="row">
139 <div class="col-12">
140 <h1>Title</h1>
141 </div>
142 </div>
143 </div>
144
145
146 <!-- WEBDIENST FOOTER -->
147 <footer id="footer">
148 <div class="container">
149 <div class="row">
150 <div class="col-xs-12 col-sm-6 col-md-4">
151 <h4>Kontakt</h4>
152 <p>
153 Fachhochschule Nordwestschweiz FHNW
154 <br />
155 Corporate IT
156 <br />
157 Multimedia & Communications
158 <br />
159 Bahnhofstrasse 6<br />
160 5210 Windisch
161 </p>
162 <p>
163 E-Mail: <a href="mailto:webmaster@fhnw.ch">webmaster@fhnw.ch</a>
164 </p>
165
166 <SocialMediaIcons />
167 </div>
168 <div class="col-xs-12 col-sm-12 col-md-4 order-first order-md-0">
169 <h4>Über diese Website</h4>
170 <p>
171 Der Web-Styleguide der FHNW bildet das verbindliche
172 Standard-Design der FHNW-Webdienste ab und erlaubt, dieses auf
173 Basis eines Bootstrap5-Frameworks in der Webentwicklung zu
174 nutzen.
175 </p>
176 </div>
177 <div class="col-xs-12 col-sm-6 col-md-4">
178 <h4>Quicklinks</h4>
179 <p>
180 <a href="https://webteam.pages.fhnw.ch/fhnw-styleguide-v4/cd/webdienste/">
181 Webdienste
182 </a>
183 <br />
184 <a href="/cd/tools-und-services/">Tools und Services</a>
185 <br />
186 <a href="https://webteam.pages.fhnw.ch/fhnw-styleguide-v4/maintenance/">
187 Maintenance Template
188 </a>
189 <br />
190 <a href="#">Quicklinks</a>
191 </p>
192 </div>
193 </div>
194 </div>
195 <div class="container tools__footer">
196 <div class="row">
197 <div class="d-flex justify-content-center">
198 <p>
199 <a href="https://www.fhnw.ch" target="_blank">
200 www.fhnw.ch
201 </a>
202 <span class="d-inline-block mx-1 mx-md-2">|</span>
203 <a href="#">Impressum</a>
204 <span class="d-inline-block mx-1 mx-md-2">|</span>
205 <a href="#">Datenschutz</a>
206 </p>
207 </div>
208 </div>
209 </div>
210 </footer>
211 ...
212Login Form
1
2 // Login form
3 ...
4 <nav class="navbar navbar-expand-lg" role="navigation">
5 <a href="/" class="navbar-brand">
6 <img
7 src=""
8 alt="FHNW - Fachhochschule Nordwestschweiz"
9 height=""
10 width=""
11 />
12 <span class="navbar-title">Projekttitel</span>
13 </a>
14 <span class="navbar-title d-sm-none">Projekttitel</span>
15 </nav>
16 <div class="container">
17 <div class="row">
18 <div class="col-12 col-md-7 mx-auto">
19 <form>
20 <h2>Login</h2>
21 <div class="form-floating">
22 <input
23 type="email"
24 class="form-control"
25 id="floatingInput"
26 placeholder="name@example.com"
27 />
28 <label for="floatingInput">Email address</label>
29 </div>
30 <div class="form-floating mt-3">
31 <input
32 type="password"
33 class="form-control"
34 id="floatingPassword"
35 placeholder="Password"
36 />
37 <label for="floatingPassword">Password</label>
38 </div>
39 <div class="form-check text-start my-3">
40 <input
41 class="form-check-input"
42 type="checkbox"
43 value="remember-me"
44 id="flexCheckDefault"
45 />
46 <label class="form-check-label" for="flexCheckDefault">
47 Remember me
48 </label>
49 </div>
50 <div class="d-flex justify-content-start gap-2 mt-5">
51 <button class="btn btn-secondary" type="submit">
52 Sign in
53 </button>
54 <button class="btn btn-light" type="reset">
55 Reset
56 </button>
57 </div>
58 </form>
59 </div>
60 </div>
61 </div>
62 <footer id="footer">
63 <div class="container tools__footer pt-4">
64 <div class="row">
65 <div class="d-flex justify-content-center">
66 <p>
67 <a href="https://www.fhnw.ch" target="_blank">
68 www.fhnw.ch
69 </a>
70 <span class="d-inline-block mx-1 mx-md-2">|</span>
71 <a href="#">Impressum</a>
72 <span class="d-inline-block mx-1 mx-md-2">|</span>
73 <a href="#">Datenschutz</a>
74 </p>
75 </div>
76 </div>
77 </div>
78 </footer>
79 ...
80