github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-boxed-section.hbs (about) 1 {{#freestyle-collection defaultKey="Normal" as |collection|}} 2 {{#collection.variant key="Normal"}} 3 {{#freestyle-usage "boxed-section-normal-normal" title="Normal Boxed Section"}} 4 <div class="boxed-section"> 5 <div class="boxed-section-head"> 6 Normal Boxed Section 7 </div> 8 <div class="boxed-section-body"> 9 <div class="mock-content"> 10 <div class="mock-image"></div> 11 <div class="mock-copy"></div> 12 <div class="mock-copy"></div> 13 </div> 14 </div> 15 </div> 16 {{/freestyle-usage}} 17 {{/collection.variant}} 18 {{#collection.variant key="Info"}} 19 {{#freestyle-usage "boxed-section-normal-info" title="Info Boxed Section"}} 20 <div class="boxed-section is-info"> 21 <div class="boxed-section-head"> 22 Normal Boxed Section 23 </div> 24 <div class="boxed-section-body"> 25 <div class="mock-content"> 26 <div class="mock-image"></div> 27 <div class="mock-copy"></div> 28 <div class="mock-copy"></div> 29 </div> 30 </div> 31 </div> 32 {{/freestyle-usage}} 33 {{/collection.variant}} 34 {{#collection.variant key="Warning"}} 35 {{#freestyle-usage "boxed-section-normal-warning" title="Warning Boxed Section"}} 36 <div class="boxed-section is-warning"> 37 <div class="boxed-section-head"> 38 Normal Boxed Section 39 </div> 40 <div class="boxed-section-body"> 41 <div class="mock-content"> 42 <div class="mock-image"></div> 43 <div class="mock-copy"></div> 44 <div class="mock-copy"></div> 45 </div> 46 </div> 47 </div> 48 {{/freestyle-usage}} 49 {{/collection.variant}} 50 {{#collection.variant key="Danger"}} 51 {{#freestyle-usage "boxed-section-normal-danger" title="Danger Boxed Section"}} 52 <div class="boxed-section is-danger"> 53 <div class="boxed-section-head"> 54 Normal Boxed Section 55 </div> 56 <div class="boxed-section-body"> 57 <div class="mock-content"> 58 <div class="mock-image"></div> 59 <div class="mock-copy"></div> 60 <div class="mock-copy"></div> 61 </div> 62 </div> 63 </div> 64 {{/freestyle-usage}} 65 {{/collection.variant}} 66 {{/freestyle-collection}} 67 68 {{#freestyle-collection defaultKey="Normal" as |collection|}} 69 {{#each variants as |variant|}} 70 {{#collection.variant key=variant.key}} 71 {{#freestyle-usage "boxed-section-right-hand-normal" title=(concat variant.title "Normal Boxed Section With Right Hand Details")}} 72 <div class="boxed-section {{variant.slug}}"> 73 <div class="boxed-section-head"> 74 Boxed Section With Right Hand Details 75 <span class="pull-right">{{now interval=1000}}</span> 76 </div> 77 <div class="boxed-section-body"> 78 <div class="mock-content"> 79 <div class="mock-image"></div> 80 <div class="mock-copy"></div> 81 <div class="mock-copy"></div> 82 </div> 83 </div> 84 </div> 85 {{/freestyle-usage}} 86 {{/collection.variant}} 87 {{/each}} 88 {{/freestyle-collection}} 89 90 {{#freestyle-collection defaultKey="Normal" as |collection|}} 91 {{#each variants as |variant|}} 92 {{#collection.variant key=variant.key}} 93 {{#freestyle-usage "boxed-section-left-badge-normal" title=(concat variant.title " Normal Boxed Section With Title Decoration")}} 94 <div class="boxed-section {{variant.slug}}"> 95 <div class="boxed-section-head"> 96 Boxed Section With Title Decoration 97 <span class="badge is-white">7</span> 98 </div> 99 <div class="boxed-section-body"> 100 <div class="mock-content"> 101 <div class="mock-image"></div> 102 <div class="mock-copy"></div> 103 <div class="mock-copy"></div> 104 </div> 105 </div> 106 </div> 107 {{/freestyle-usage}} 108 {{/collection.variant}} 109 {{/each}} 110 {{/freestyle-collection}} 111 112 {{#freestyle-collection defaultKey="Normal" as |collection|}} 113 {{#each variants as |variant|}} 114 {{#collection.variant key=variant.key}} 115 {{#freestyle-usage "boxed-section-with-foot-normal" title=(concat variant.title " Boxed Section With Foot")}} 116 <div class="boxed-section {{variant.slug}}"> 117 <div class="boxed-section-head"> 118 Boxed Section With Large Header 119 </div> 120 <div class="boxed-section-body with-foot"> 121 <div class="mock-content"> 122 <div class="mock-image"></div> 123 <div class="mock-copy"></div> 124 <div class="mock-copy"></div> 125 </div> 126 </div> 127 <div class="boxed-section-foot"> 128 <span>Left-aligned message</span> 129 <a href="#" class="pull-right">Toggle or other action</a> 130 </div> 131 </div> 132 {{/freestyle-usage}} 133 {{/collection.variant}} 134 {{/each}} 135 {{/freestyle-collection}} 136 137 {{#freestyle-collection defaultKey="Normal" as |collection|}} 138 {{#each variants as |variant|}} 139 {{#collection.variant key=variant.key}} 140 {{#freestyle-usage "boxed-section-with-large-header" title=(concat variant.title " Boxed Section With Large Header")}} 141 <div class="boxed-section {{variant.slug}}"> 142 <div class="boxed-section-head"> 143 <div class="boxed-section-row"> 144 Boxed Section With Large Header 145 <span class="badge is-white is-subtle bumper-left">Status</span> 146 </div> 147 <div class="boxed-section-row"> 148 <span class="tag is-outlined">A tag that goes on a second line because it's rather long</span> 149 </div> 150 </div> 151 <div class="boxed-section-body"> 152 <div class="mock-content"> 153 <div class="mock-image"></div> 154 <div class="mock-copy"></div> 155 <div class="mock-copy"></div> 156 </div> 157 </div> 158 </div> 159 {{/freestyle-usage}} 160 {{/collection.variant}} 161 {{/each}} 162 {{/freestyle-collection}} 163 164 {{#freestyle-collection defaultKey="Normal" as |collection|}} 165 {{#each variants as |variant|}} 166 {{#collection.variant key=variant.key}} 167 {{#freestyle-usage "boxed-section-with-dark-body" title=(concat variant.title " Boxed Section With Dark Body")}} 168 <div class="boxed-section {{variant.slug}}"> 169 <div class="boxed-section-head"> 170 Boxed Section With Dark Body 171 </div> 172 <div class="boxed-section-body is-dark"> 173 <div class="mock-content"> 174 <div class="mock-image"></div> 175 <div class="mock-copy"></div> 176 <div class="mock-copy"></div> 177 </div> 178 </div> 179 </div> 180 {{/freestyle-usage}} 181 {{/collection.variant}} 182 {{/each}} 183 {{/freestyle-collection}}