85 lines
2.9 KiB
Handlebars
85 lines
2.9 KiB
Handlebars
{{#freestyle-usage "alert-standard" title="Alert"}}
|
|
<div class="notification is-info">
|
|
<h3 class="title is-4">This is an alert</h3>
|
|
<p>Alerts are used for both situational and reactionary information.</p>
|
|
</div>
|
|
{{/freestyle-usage}}
|
|
{{#freestyle-annotation}}
|
|
<p>Alerts use Bulma's notification component.</p>
|
|
{{/freestyle-annotation}}
|
|
|
|
{{#freestyle-usage "alert-colors" title="Alert colors"}}
|
|
<div class="notification is-info">
|
|
<h3 class="title is-4">This is an alert</h3>
|
|
<p>Alerts are used for both situational and reactionary information.</p>
|
|
</div>
|
|
|
|
<div class="notification is-success">
|
|
<h3 class="title is-4">This is an alert</h3>
|
|
<p>Alerts are used for both situational and reactionary information.</p>
|
|
</div>
|
|
|
|
<div class="notification is-warning">
|
|
<h3 class="title is-4">This is an alert</h3>
|
|
<p>Alerts are used for both situational and reactionary information.</p>
|
|
</div>
|
|
|
|
<div class="notification is-danger">
|
|
<h3 class="title is-4">This is an alert</h3>
|
|
<p>Alerts are used for both situational and reactionary information.</p>
|
|
</div>
|
|
{{/freestyle-usage}}
|
|
{{#freestyle-annotation}}
|
|
<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>
|
|
{{/freestyle-annotation}}
|
|
|
|
{{#freestyle-usage "alert-dismissal" title="Alert dismissal"}}
|
|
<div class="notification is-info">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<h3 class="title is-4">This is an alert</h3>
|
|
<p>Alerts are used for both situational and reactionary information.</p>
|
|
</div>
|
|
<div class="column is-centered is-minimum">
|
|
<button class="button is-info">Okay</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification is-success">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<h3 class="title is-4">This is an alert</h3>
|
|
<p>Alerts are used for both situational and reactionary information.</p>
|
|
</div>
|
|
<div class="column is-centered is-minimum">
|
|
<button class="button is-success">Okay</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification is-warning">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<h3 class="title is-4">This is an alert</h3>
|
|
<p>Alerts are used for both situational and reactionary information.</p>
|
|
</div>
|
|
<div class="column is-centered is-minimum">
|
|
<button class="button is-warning">Okay</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification is-danger">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<h3 class="title is-4">This is an alert</h3>
|
|
<p>Alerts are used for both situational and reactionary information.</p>
|
|
</div>
|
|
<div class="column is-centered is-minimum">
|
|
<button class="button is-danger">Okay</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/freestyle-usage}}
|