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}}