github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-inline-definitions.hbs (about) 1 {{#freestyle-usage "inline-definitions" title="Inline Definitions"}} 2 <div class="boxed-section is-small"> 3 <div class="boxed-section-body inline-definitions"> 4 <span class="label">Some Label</span> 5 <span class="pair"> 6 <span class="term">Term Name</span> 7 <span>Term Value</span> 8 </span> 9 <span class="pair"> 10 <span class="term">Running?</span> 11 <span>Yes</span> 12 </span> 13 <span class="pair"> 14 <span class="term">Last Updated</span> 15 <span>{{format-ts (now)}}</span> 16 </span> 17 </div> 18 </div> 19 {{/freestyle-usage}} 20 {{#freestyle-annotation}} 21 A way to tightly display key/value information. Typically seen at the top of pages. 22 {{/freestyle-annotation}} 23 24 {{#freestyle-usage "inline-definitions-variants" title="Inline Definitions Variants"}} 25 <div class="boxed-section is-small is-success"> 26 <div class="boxed-section-body inline-definitions"> 27 <span class="label">Success Label</span> 28 <span class="pair"> 29 <span class="term">Term Name</span> 30 <span>Term Value</span> 31 </span> 32 <span class="pair"> 33 <span class="term">Last Updated</span> 34 <span>{{format-ts (now)}}</span> 35 </span> 36 </div> 37 </div> 38 <div class="boxed-section is-small is-warning"> 39 <div class="boxed-section-body inline-definitions"> 40 <span class="label">Warning Label</span> 41 <span class="pair"> 42 <span class="term">Term Name</span> 43 <span>Term Value</span> 44 </span> 45 <span class="pair"> 46 <span class="term">Last Updated</span> 47 <span>{{format-ts (now)}}</span> 48 </span> 49 </div> 50 </div> 51 <div class="boxed-section is-small is-danger"> 52 <div class="boxed-section-body inline-definitions"> 53 <span class="label">Danger Label</span> 54 <span class="pair"> 55 <span class="term">Term Name</span> 56 <span>Term Value</span> 57 </span> 58 <span class="pair"> 59 <span class="term">Last Updated</span> 60 <span>{{format-ts (now)}}</span> 61 </span> 62 </div> 63 </div> 64 <div class="boxed-section is-small is-info"> 65 <div class="boxed-section-body inline-definitions"> 66 <span class="label">Info Label</span> 67 <span class="pair"> 68 <span class="term">Term Name</span> 69 <span>Term Value</span> 70 </span> 71 <span class="pair"> 72 <span class="term">Last Updated</span> 73 <span>{{format-ts (now)}}</span> 74 </span> 75 </div> 76 </div> 77 {{/freestyle-usage}} 78 {{#freestyle-annotation}} 79 Inline definitions are meant to pair well with emotive color variations. 80 {{/freestyle-annotation}}