---
class: css
state: needs-love
---
# flash-message

CSS component for styling our flash messages

```hbs preview-template
<div class="flash-message">
  <p
    role="alert"
    class={{or this.type 'success'}}
  >
    <strong>
      {{capitalize (or this.type 'success')}}!
    </strong>
  </p>
</div>

<figure>
  <figcaption>Provide a widget to change the <code>class</code></figcaption>

  <select
    onchange={{action (mut this.type) value="target.value"}}
  >
    <option>success</option>
    <option>warning</option>
    <option>error</option>
    <option>exists</option>
  </select>

</figure>
```