Resonance Style & Themable Components

Alert Example 

<!-- Primary alert -->
<div class='alert alert-primary' role='alert'>
    <i class='fas fa-bells fa-1x fa-fw float-left'></i>
    A simple primary alert.
</div>
<div class='alert alert-secondary' role='alert'>
    <i class='fas fa-octagon-xmark fa-1x fa-fw float-left'></i>
    A simple secondary alert.
</div>
<div class='alert alert-success' role='alert'>
    <i class='fas fa-check fa-1x fa-fw float-left'></i>
    A simple success alert.
</div>
<div class='alert alert-danger' role='alert'>
    <i class='fas fa-exclamation-triangle fa-1x fa-fw float-left'></i>
    A simple danger alert.
</div>
<div class='alert alert-warning' role='alert'>
    <i class='fas fa-exclamation fa-1x fa-fw float-left'></i>
    A simple warning alert.
</div>
<div class='alert alert-info' role='alert'>
    <i class='fas fa-info-circle fa-1x fa-fw float-left'></i>
    A simple info alert.
</div>
<div class='alert alert-light' role='alert'>
    <i class='fas fa- fa-1x fa-fw float-left'></i>
    A simple light alert.
</div>
<div class='alert alert-dark' role='alert'>
    <i class='fas fa- fa-1x fa-fw float-left'></i>
    A simple dark alert.
</div>
 
<!-- Primary alert -->
{{#each listItems}}
  <div class='alert alert-{{name}}' role='alert'>
    <i class='fas fa-{{icon}} fa-1x fa-fw float-left'></i>
    A simple {{name}} alert.
  </div>
{{/each}}
 
{
  "listItems": [
    {
      "id": 1,
      "name": "primary",
      "icon": "bells"
    },
    {
      "id": 2,
      "name": "secondary",
      "icon": "octagon-xmark"
    },
    {
      "id": 3,
      "name": "success",
      "icon": "check"
    },
    {
      "id": 4,
      "name": "danger",
      "icon": "exclamation-triangle"
    },
    {
      "id": 5,
      "name": "warning",
      "icon": "exclamation"
    },
    {
      "id": 6,
      "name": "info",
      "icon": "info-circle"
    },
    {
      "id": 7,
      "name": "light"
    },
    {
      "id": 8,
      "name": "dark"
    }
  ]
}

No notes defined.