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