81 lines
2.6 KiB
Handlebars
81 lines
2.6 KiB
Handlebars
{{#freestyle-usage "inline-definitions" title="Inline Definitions"}}
|
|
<div class="boxed-section is-small">
|
|
<div class="boxed-section-body inline-definitions">
|
|
<span class="label">Some Label</span>
|
|
<span class="pair">
|
|
<span class="term">Term Name</span>
|
|
<span>Term Value</span>
|
|
</span>
|
|
<span class="pair">
|
|
<span class="term">Running?</span>
|
|
<span>Yes</span>
|
|
</span>
|
|
<span class="pair">
|
|
<span class="term">Last Updated</span>
|
|
<span>{{moment-format (now)}}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{{/freestyle-usage}}
|
|
{{#freestyle-annotation}}
|
|
A way to tightly display key/value information. Typically seen at the top of pages.
|
|
{{/freestyle-annotation}}
|
|
|
|
{{#freestyle-usage "inline-definitions-variants" title="Inline Definitions Variants"}}
|
|
<div class="boxed-section is-small is-success">
|
|
<div class="boxed-section-body inline-definitions">
|
|
<span class="label">Success Label</span>
|
|
<span class="pair">
|
|
<span class="term">Term Name</span>
|
|
<span>Term Value</span>
|
|
</span>
|
|
<span class="pair">
|
|
<span class="term">Last Updated</span>
|
|
<span>{{moment-format (now)}}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="boxed-section is-small is-warning">
|
|
<div class="boxed-section-body inline-definitions">
|
|
<span class="label">Warning Label</span>
|
|
<span class="pair">
|
|
<span class="term">Term Name</span>
|
|
<span>Term Value</span>
|
|
</span>
|
|
<span class="pair">
|
|
<span class="term">Last Updated</span>
|
|
<span>{{moment-format (now)}}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="boxed-section is-small is-danger">
|
|
<div class="boxed-section-body inline-definitions">
|
|
<span class="label">Danger Label</span>
|
|
<span class="pair">
|
|
<span class="term">Term Name</span>
|
|
<span>Term Value</span>
|
|
</span>
|
|
<span class="pair">
|
|
<span class="term">Last Updated</span>
|
|
<span>{{moment-format (now)}}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="boxed-section is-small is-info">
|
|
<div class="boxed-section-body inline-definitions">
|
|
<span class="label">Info Label</span>
|
|
<span class="pair">
|
|
<span class="term">Term Name</span>
|
|
<span>Term Value</span>
|
|
</span>
|
|
<span class="pair">
|
|
<span class="term">Last Updated</span>
|
|
<span>{{moment-format (now)}}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{{/freestyle-usage}}
|
|
{{#freestyle-annotation}}
|
|
Inline definitions are meant to pair well with emotive color variations.
|
|
{{/freestyle-annotation}}
|