UNPKG

2.04 kBtext/x-handlebars-templateView Raw
1<!--
2 Copyright IBM Corp. 2016, 2018
3
4 This source code is licensed under the Apache-2.0 license found in the
5 LICENSE file in the root directory of this source tree.
6-->
7
8{{#if @root.featureFlags.grid}}
9<div class="{{@root.prefix}}--grid">
10 {{#each @root.rows as |row|}}
11 <div class="{{@root.prefix}}--row">
12 <div class="bx--col bx--col--auto">
13 <p>{{row.title}}</p>
14 </div>
15 </div>
16 <div class="{{@root.prefix}}--row">
17 {{#each row.columns}}
18 <div class="{{@root.prefix}}--col-{{row.breakpoint}}-1">
19 <div class="outside">
20 <div class="inside">1</div>
21 </div>
22 </div>
23 {{/each}}
24 </div>
25 {{/each}}
26</div>
27{{else}}
28<div class="{{@root.prefix}}--grid">
29 <div class="{{@root.prefix}}--row">
30 <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 indigo">
31 <div class="{{@root.prefix}}--row">
32 <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6">
33 <div class="col-example">
34 <p>Content space for {{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6</p>
35 </div>
36 </div>
37 <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 green">
38 <p>Full space for {{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 (columns naturally have padding on them, adding a background color to
39 the column directly will effect the entire column, as opposed to using a child element in the example to the
40 left). </p>
41 </div>
42 </div>
43
44 <p>Columns also expand to match the vertical size of the rest of the row (see red column)</p>
45 </div>
46 <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 red">
47 <p>Background color over entire column, not just content space</p>
48 </div>
49 <div class="{{@root.prefix}}--row">
50 <div class="{{@root.prefix}}--offset-xs-2 {{@root.prefix}}--col-xs-10">This content is offset. Offset adds a left-margin for x columns.</div>
51 </div>
52 </div>
53</div>
54{{/if}}
55
\No newline at end of file