1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | <div class="bx--grid">
|
9 |
|
10 | <div class="bx--tile-container" style="width: 100%">
|
11 | <div class="bx--row">
|
12 | <div class="bx--col bx--col-md-12">
|
13 | <div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
|
14 | <button class="bx--tile__chevron">
|
15 | <svg width="12" height="7" viewBox="0 0 12 7">
|
16 | <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
|
17 | </svg>
|
18 | </button>
|
19 | <div class="bx--tile-content">
|
20 | <span data-tile-atf class="bx--tile-content__above-the-fold" style="height: 200px">
|
21 |
|
22 | <h2>Above the fold content here</h2>
|
23 | </span>
|
24 | <span class="bx--tile-content__below-the-fold" style="height: 400px">
|
25 |
|
26 | <h2>Below the fold content here</h2>
|
27 | </span>
|
28 | </div>
|
29 | </div>
|
30 | </div>
|
31 | </div>
|
32 | <div class="bx--row">
|
33 | <div class="bx--col bx--col-sm-6 bx--col-xs-6">
|
34 | <label for="tile-id-1" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
|
35 | <input tabindex="-1" id="tile-id-1" class="bx--tile-input" data-tile-input value="tile" type="checkbox" name="tiles" title="tile"
|
36 | />
|
37 | <div class="bx--tile__checkmark">
|
38 | <svg width="16" height="16" viewBox="0 0 16 16">
|
39 | <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
|
40 | fill-rule="evenodd" />
|
41 | </svg>
|
42 | </div>
|
43 | <div class="bx--tile-content">
|
44 |
|
45 | </div>
|
46 | </label>
|
47 | </div>
|
48 | <div class="bx--col bx--col-sm-6 bx--col-xs-6">
|
49 | <label for="tile-id-2" aria-label="tile-2" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
|
50 | <input tabindex="-1" id="tile-id-2" class="bx--tile-input" data-tile-input value="tile-2" type="checkbox" name="tiles" title="tile-2"
|
51 | />
|
52 | <div class="bx--tile__checkmark">
|
53 | <svg width="16" height="16" viewBox="0 0 16 16">
|
54 | <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
|
55 | fill-rule="evenodd" />
|
56 | </svg>
|
57 | </div>
|
58 | <div class="bx--tile-content">
|
59 |
|
60 | </div>
|
61 | </label>
|
62 | </div>
|
63 | </div>
|
64 | <div class="bx--row">
|
65 | <div class="bx--col bx--col-md-4 bx--col-sm-4">
|
66 | <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
|
67 | </div>
|
68 | <div class="bx--col bx--col-md-4 bx--col-sm-4">
|
69 | <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
|
70 | </div>
|
71 | <div class="bx--col bx--col-md-4 bx--col-sm-4">
|
72 | <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
|
73 | </div>
|
74 | </div>
|
75 | <div class="bx--row">
|
76 | <div class="bx--col bx--col-md-3 bx--col-sm-12">
|
77 | <div class="bx--tile"></div>
|
78 | </div>
|
79 | <div class="bx--col bx--col-md-3 bx--col-sm-12">
|
80 | <div class="bx--tile"></div>
|
81 | </div>
|
82 | <div class="bx--col bx--col-md-3 bx--col-sm-12">
|
83 | <div class="bx--tile"></div>
|
84 | </div>
|
85 | <div class="bx--col bx--col-md-3 bx--col-sm-12">
|
86 | <div class="bx--tile"></div>
|
87 | </div>
|
88 | </div>
|
89 | <div class="bx--row">
|
90 | <div class="bx--col bx--col-lg-2 bx--col-md-12">
|
91 | <div class="bx--tile"></div>
|
92 | </div>
|
93 | <div class="bx--col bx--col-lg-2 bx--col-md-12">
|
94 | <div class="bx--tile"></div>
|
95 | </div>
|
96 | <div class="bx--col bx--col-lg-2 bx--col-md-12">
|
97 | <div class="bx--tile"></div>
|
98 | </div>
|
99 | <div class="bx--col bx--col-lg-2 bx--col-md-12">
|
100 | <div class="bx--tile"></div>
|
101 | </div>
|
102 | <div class="bx--col bx--col-lg-2 bx--col-md-12">
|
103 | <div class="bx--tile"></div>
|
104 | </div>
|
105 | <div class="bx--col bx--col-lg-2 bx--col-md-12">
|
106 | <div class="bx--tile"></div>
|
107 | </div>
|
108 | </div>
|
109 | <div class="bx--row">
|
110 | <div class="bx--col bx--col-md-8 bx--col-sm-8">
|
111 | <div class="bx--tile"></div>
|
112 | </div>
|
113 | <div class="bx--col bx--col-md-4 bx--col-sm-4">
|
114 | <div class="bx--tile"></div>
|
115 | </div>
|
116 | </div>
|
117 | </div>
|
118 |
|
119 | </div>
|