github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-buttons.hbs (about)

     1  {{#freestyle-collection defaultKey="standard" as |collection|}}
     2    {{#collection.variant key="standard"}}
     3      {{#freestyle-usage 'buttons-standard' title='Standard Buttons'}}
     4        <div class="block">
     5          <a class="button">Button</a>
     6          <a class="button is-white">White</a>
     7          <a class="button is-light">Light</a>
     8          <a class="button is-dark">Dark</a>
     9          <a class="button is-black">Black</a>
    10          <a class="button is-link">Link</a>
    11        </div>
    12        <div class="block">
    13          <a class="button is-primary">Primary</a>
    14          <a class="button is-info">Info</a>
    15          <a class="button is-success">Success</a>
    16          <a class="button is-warning">Warning</a>
    17          <a class="button is-danger">Danger</a>
    18        </div>
    19      {{/freestyle-usage}}
    20    {{/collection.variant}}
    21    {{#collection.variant key="outlines"}}
    22      {{#freestyle-usage 'buttons-outlines' title='Outline Buttons'}}
    23        <div class="block">
    24          <a class="button is-outlined">Outlined</a>
    25          <a class="button is-primary is-outlined">Primary</a>
    26          <a class="button is-info is-outlined">Info</a>
    27          <a class="button is-success is-outlined">Success</a>
    28          <a class="button is-warning is-outlined">Warning</a>
    29          <a class="button is-danger is-outlined is-important">Danger</a>
    30        </div>
    31      {{/freestyle-usage}}
    32    {{/collection.variant}}
    33    {{#collection.variant key="hollow"}}
    34      {{#freestyle-usage 'buttons-hollow' title='Hollow Buttons'}}
    35        <div class="block" style="background:#25BA81; padding:30px">
    36          <a class="button is-primary is-inverted is-outlined">Primary</a>
    37          <a class="button is-info is-inverted is-outlined">Info</a>
    38          <a class="button is-success is-inverted is-outlined">Success</a>
    39          <a class="button is-warning is-inverted is-outlined">Warning</a>
    40          <a class="button is-danger is-inverted is-outlined">Danger</a>
    41        </div>
    42      {{/freestyle-usage}}
    43    {{/collection.variant}}
    44    {{#collection.variant key="sizing"}}
    45      {{#freestyle-usage 'buttons-sizing' title='Button Sizes'}}
    46        <div class="block">
    47          <a class="button is-small">Small</a>
    48          <a class="button">Normal</a>
    49          <a class="button is-medium">Medium</a>
    50          <a class="button is-large">Large</a>
    51        </div>
    52      {{/freestyle-usage}}
    53    {{/collection.variant}}
    54  {{/freestyle-collection}}