-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample-sidenav-spacing.html
109 lines (76 loc) · 7 KB
/
example-sidenav-spacing.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
---
layout: content
title: Anchor menu spacing example
breadcrumb1:
url1:
breadcrumb2:
url2:
longdesc:
---
<div class="main-section">
<div class="c-wrapper c-wrapper-bg-transparent container-fluid">
<div class="row">
<div class="anchor-col col-12 col-sm-4 col-md-3 col-lg-2 col-xl-3">
<div class="anchor-menu">
<div class="sticky-container">
<div class="sticky-div">
<h5 class="sticky-list-head">On this page</h5>
<ul>
<li><a>Breakpoints and bootstrap classes</a></li>
<li><a>Another section</a></li>
<li><a>This is a much longer section title</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-8 col-md-9 col-lg-9 col-xl-7">
<div id="sidenav-example">
<div name="breakpoints-and-bootstrap-classess" class="anchor-section"><a href="#" id="breakpoints-and-bootstrap-classes"></a>
<div class="body-copy">
<h2>Breakpoints and bootstrap classes</h2>
<hr>
<div class="body-copy-content">
<h3>Anchor menu</h3>
<ul>
<li>Extra small (< 576px): 12 columns wide</li>
<li>Small (⋝ 576px): 4 columns wide</li>
<li>Medium (⋝ 768px): 3 columns wide</li>
<li>Large (⋝ 992px): 2 columns wide</li>
<li>Extra large (⋝ 1200px): 3 columns wide</li>
</ul>
<p>Bootstrap classes: <strong>class="anchor-col col-12 col-sm-4 col-md-3 col-lg-2 col-xl-3"</strong></p>
<h3>Body content</h3>
<ul>
<li>Extra small (< 576px): 12 columns wide</li>
<li>Small (⋝ 576px): 8 columns wide</li>
<li>Medium (⋝ 768px): 9 columns wide</li>
<li>Large (⋝ 992px): 9 columns wide</li>
<li>Extra large (⋝1200px): 7 columns wide</li>
</ul>
<p>Bootstrap classes: <strong>class="col-12 col-sm-8 col-md-9 col-lg-9 col-xl-7"</strong></p>
</div>
</div>
</div>
<div name="another-section" class="anchor-section"><a href="#" id="another-section"></a>
<div class="body-copy">
<h2>Another section</h2>
<hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis lectus at libero fringilla placerat. Nunc et diam ut magna pulvinar aliquam. Integer et rutrum erat. Vestibulum diam est, vehicula in bibendum pretium, ultrices quis massa. Phasellus sed accumsan lectus, pulvinar consequat ligula. In in dui maximus, ornare tellus tempor, gravida eros. Proin dictum placerat ligula, eget elementum metus ultrices eget. In a aliquet quam. Aenean eget ligula nec massa ullamcorper consectetur. Pellentesque at odio finibus, tristique turpis a, gravida nunc. Sed vel ligula nisi.</p>
<p>Vestibulum quis semper lorem, in condimentum erat. Praesent nec orci a arcu congue egestas nec eu metus. Maecenas blandit ipsum sed enim congue, scelerisque consectetur nisi convallis. Donec quis hendrerit mi, ut hendrerit felis. Donec nulla nibh, volutpat nec iaculis non, maximus nec ante. Proin purus enim, vehicula condimentum laoreet a, placerat nec risus. Sed vitae pellentesque ligula. Nam augue risus, posuere vel neque nec, eleifend sagittis ex. Proin eros metus, finibus et dictum eget, ullamcorper ut diam.</p>
</div>
</div>
<div name="this-is-a-much-longer-section-title" class="anchor-section"><a href="#" id="this-is-a-much-longer-section-title"></a>
<div class="body-copy">
<h2>This is a much longer section title</h2>
<hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis lectus at libero fringilla placerat. Nunc et diam ut magna pulvinar aliquam. Integer et rutrum erat. Vestibulum diam est, vehicula in bibendum pretium, ultrices quis massa. Phasellus sed accumsan lectus, pulvinar consequat ligula. In in dui maximus, ornare tellus tempor, gravida eros. Proin dictum placerat ligula, eget elementum metus ultrices eget. In a aliquet quam. Aenean eget ligula nec massa ullamcorper consectetur. Pellentesque at odio finibus, tristique turpis a, gravida nunc. Sed vel ligula nisi.</p>
<p>Vestibulum maximus lacus vitae accumsan eleifend. Mauris lorem dui, varius nec eleifend quis, molestie aliquam arcu. Pellentesque sit amet nibh aliquet, blandit mauris a, laoreet tortor. Suspendisse pharetra vulputate fringilla. Fusce congue semper nibh in volutpat. Sed malesuada massa at viverra dictum. Phasellus ornare dignissim purus et blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent id nunc risus. Maecenas facilisis sollicitudin lacus.</p>
<p>Vestibulum quis semper lorem, in condimentum erat. Praesent nec orci a arcu congue egestas nec eu metus. Maecenas blandit ipsum sed enim congue, scelerisque consectetur nisi convallis. Donec quis hendrerit mi, ut hendrerit felis. Donec nulla nibh, volutpat nec iaculis non, maximus nec ante. Proin purus enim, vehicula condimentum laoreet a, placerat nec risus. Sed vitae pellentesque ligula. Nam augue risus, posuere vel neque nec, eleifend sagittis ex. Proin eros metus, finibus et dictum eget, ullamcorper ut diam.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>