blob: 752b8b852f5ee9dd3556b75dc1707a2fb468211e [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001<!-- Uses a transparent header that draws on top of the layout's background -->
2<style>
3.demo-layout-transparent {
4 background: url('../assets/demos/transparent.jpg') center / cover;
5}
6.demo-layout-transparent .mdl-layout__header,
7.demo-layout-transparent .mdl-layout__drawer-button {
8 /* This background is dark, so we set text to white. Use 87% black instead if
9 your background is light. */
10 color: white;
11}
12</style>
13
14<div class="demo-layout-transparent mdl-layout mdl-js-layout">
15 <header class="mdl-layout__header mdl-layout__header--transparent">
16 <div class="mdl-layout__header-row">
17 <!-- Title -->
18 <span class="mdl-layout-title">Title</span>
19 <!-- Add spacer, to align navigation to the right -->
20 <div class="mdl-layout-spacer"></div>
21 <!-- Navigation -->
22 <nav class="mdl-navigation">
23 <a class="mdl-navigation__link" href="">Link</a>
24 <a class="mdl-navigation__link" href="">Link</a>
25 <a class="mdl-navigation__link" href="">Link</a>
26 <a class="mdl-navigation__link" href="">Link</a>
27 </nav>
28 </div>
29 </header>
30 <div class="mdl-layout__drawer">
31 <span class="mdl-layout-title">Title</span>
32 <nav class="mdl-navigation">
33 <a class="mdl-navigation__link" href="">Link</a>
34 <a class="mdl-navigation__link" href="">Link</a>
35 <a class="mdl-navigation__link" href="">Link</a>
36 <a class="mdl-navigation__link" href="">Link</a>
37 </nav>
38 </div>
39 <main class="mdl-layout__content">
40 </main>
41</div>