github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-alerts.hbs (about) 1 {{#freestyle-usage "alert-standard" title="Alert"}} 2 <div class="notification is-info"> 3 <h3 class="title is-4">This is an alert</h3> 4 <p>Alerts are used for both situational and reactionary information.</p> 5 </div> 6 {{/freestyle-usage}} 7 {{#freestyle-annotation}} 8 <p>Alerts use Bulma's notification component.</p> 9 {{/freestyle-annotation}} 10 11 {{#freestyle-usage "alert-colors" title="Alert colors"}} 12 <div class="notification is-info"> 13 <h3 class="title is-4">This is an alert</h3> 14 <p>Alerts are used for both situational and reactionary information.</p> 15 </div> 16 17 <div class="notification is-success"> 18 <h3 class="title is-4">This is an alert</h3> 19 <p>Alerts are used for both situational and reactionary information.</p> 20 </div> 21 22 <div class="notification is-warning"> 23 <h3 class="title is-4">This is an alert</h3> 24 <p>Alerts are used for both situational and reactionary information.</p> 25 </div> 26 27 <div class="notification is-danger"> 28 <h3 class="title is-4">This is an alert</h3> 29 <p>Alerts are used for both situational and reactionary information.</p> 30 </div> 31 {{/freestyle-usage}} 32 {{#freestyle-annotation}} 33 <p>Alerts are always paired with an emotive color. If there is no emotive association with the content of the alert, then an alert is the wrong component to use.</p> 34 {{/freestyle-annotation}} 35 36 {{#freestyle-usage "alert-dismissal" title="Alert dismissal"}} 37 <div class="notification is-info"> 38 <div class="columns"> 39 <div class="column"> 40 <h3 class="title is-4">This is an alert</h3> 41 <p>Alerts are used for both situational and reactionary information.</p> 42 </div> 43 <div class="column is-centered is-minimum"> 44 <button class="button is-info">Okay</button> 45 </div> 46 </div> 47 </div> 48 49 <div class="notification is-success"> 50 <div class="columns"> 51 <div class="column"> 52 <h3 class="title is-4">This is an alert</h3> 53 <p>Alerts are used for both situational and reactionary information.</p> 54 </div> 55 <div class="column is-centered is-minimum"> 56 <button class="button is-success">Okay</button> 57 </div> 58 </div> 59 </div> 60 61 <div class="notification is-warning"> 62 <div class="columns"> 63 <div class="column"> 64 <h3 class="title is-4">This is an alert</h3> 65 <p>Alerts are used for both situational and reactionary information.</p> 66 </div> 67 <div class="column is-centered is-minimum"> 68 <button class="button is-warning">Okay</button> 69 </div> 70 </div> 71 </div> 72 73 <div class="notification is-danger"> 74 <div class="columns"> 75 <div class="column"> 76 <h3 class="title is-4">This is an alert</h3> 77 <p>Alerts are used for both situational and reactionary information.</p> 78 </div> 79 <div class="column is-centered is-minimum"> 80 <button class="button is-danger">Okay</button> 81 </div> 82 </div> 83 </div> 84 {{/freestyle-usage}}