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