Resonance Style & Themable Components

Toast Example 

<h4>
    Basic Toast Example
</h4>
<!-- Basic toast example (remove fade show to hide toast initially) -->
<div class='toast fade show' role='alert' aria-live='assertive' aria-atomic='true'>
    <div class='toast-header'>
        <div class='d-inline-block align-middle bg-primary rounded-1 me-2' style='width: 1.25rem; height: 1.25rem;'> </div>
        <h6 class='fs-sm mb-0 me-auto'>
            Bootstrap
        </h6>
        <small class='fw-medium text-muted'>
            11 mins ago
        </small>
        <button type='button' class='btn-close ms-2 mb-1' data-bs-dismiss='toast' aria-label='Close'></button>
    </div>
    <div class='toast-body'>
        Hello, world! This is a toast message.
    </div>
</div>

<h4>
    Color Variations
</h4>

<div class='container'>
    <div class='row'>
        <div class='col-3 mb-3'>
            <div class='toast fade show' role='alert' aria-live='assertive' aria-atomic='true'>

                <div class='toast-header bg-primary text-white'>
                    <i class='ai-bell me-2'></i>
                    <span class='fw-medium me-auto'>
                        primary toast
                    </span>
                    <button type='button' class='btn-close btn-close-white ms-2 mb-1' data-bs-dismiss='toast' aria-label='Close'></button>
                </div>
                <div class='toast-body text-primary'>
                    Hello, world! This is a toast message.
                </div>
            </div>
        </div>
        <div class='col-3 mb-3'>
            <div class='toast fade show' role='alert' aria-live='assertive' aria-atomic='true'>

                <div class='toast-header bg-secondary'>
                    <i class='ai-bell me-2'></i>
                    <span class='fw-medium me-auto'>
                        secondary toast
                    </span>
                    <button type='button' class='btn-close btn-close-white ms-2 mb-1' data-bs-dismiss='toast' aria-label='Close'></button>
                </div>
                <div class='toast-body'>
                    Hello, world! This is a toast message.
                </div>
            </div>
        </div>
        <div class='col-3 mb-3'>
            <div class='toast fade show' role='alert' aria-live='assertive' aria-atomic='true'>

                <div class='toast-header bg-success text-white'>
                    <i class='ai-bell me-2'></i>
                    <span class='fw-medium me-auto'>
                        success toast
                    </span>
                    <button type='button' class='btn-close btn-close-white ms-2 mb-1' data-bs-dismiss='toast' aria-label='Close'></button>
                </div>
                <div class='toast-body text-success'>
                    Hello, world! This is a toast message.
                </div>
            </div>
        </div>
        <div class='col-3 mb-3'>
            <div class='toast fade show' role='alert' aria-live='assertive' aria-atomic='true'>

                <div class='toast-header bg-danger text-white'>
                    <i class='ai-bell me-2'></i>
                    <span class='fw-medium me-auto'>
                        danger toast
                    </span>
                    <button type='button' class='btn-close btn-close-white ms-2 mb-1' data-bs-dismiss='toast' aria-label='Close'></button>
                </div>
                <div class='toast-body text-danger'>
                    Hello, world! This is a toast message.
                </div>
            </div>
        </div>
        <div class='col-3 mb-3'>
            <div class='toast fade show' role='alert' aria-live='assertive' aria-atomic='true'>

                <div class='toast-header bg-warning text-white'>
                    <i class='ai-bell me-2'></i>
                    <span class='fw-medium me-auto'>
                        warning toast
                    </span>
                    <button type='button' class='btn-close btn-close-white ms-2 mb-1' data-bs-dismiss='toast' aria-label='Close'></button>
                </div>
                <div class='toast-body text-warning'>
                    Hello, world! This is a toast message.
                </div>
            </div>
        </div>
        <div class='col-3 mb-3'>
            <div class='toast fade show' role='alert' aria-live='assertive' aria-atomic='true'>

                <div class='toast-header bg-info text-white'>
                    <i class='ai-bell me-2'></i>
                    <span class='fw-medium me-auto'>
                        info toast
                    </span>
                    <button type='button' class='btn-close btn-close-white ms-2 mb-1' data-bs-dismiss='toast' aria-label='Close'></button>
                </div>
                <div class='toast-body text-info'>
                    Hello, world! This is a toast message.
                </div>
            </div>
        </div>
        <div class='col-3 mb-3'>
            <div class='toast fade show' role='alert' aria-live='assertive' aria-atomic='true'>

                <div class='toast-header bg-dark text-white'>
                    <i class='ai-bell me-2'></i>
                    <span class='fw-medium me-auto'>
                        dark toast
                    </span>
                    <button type='button' class='btn-close btn-close-white ms-2 mb-1' data-bs-dismiss='toast' aria-label='Close'></button>
                </div>
                <div class='toast-body text-dark'>
                    Hello, world! This is a toast message.
                </div>
            </div>
        </div>
    </div>
</div>
 
<h4>
  Basic Toast Example
</h4>
<!-- Basic toast example (remove fade show to hide toast initially) -->
<div
  class='toast fade show'
  role='alert'
  aria-live='assertive'
  aria-atomic='true'
>
  <div class='toast-header'>
    <div
      class='d-inline-block align-middle bg-primary rounded-1 me-2'
      style='width: 1.25rem; height: 1.25rem;'
    > </div>
    <h6 class='fs-sm mb-0 me-auto'>
      Bootstrap
    </h6>
    <small class='fw-medium text-muted'>
      11 mins ago
    </small>
    <button
      type='button'
      class='btn-close ms-2 mb-1'
      data-bs-dismiss='toast'
      aria-label='Close'
    ></button>
  </div>
  <div class='toast-body'>
    Hello, world! This is a toast message.
  </div>
</div>

<h4>
  Color Variations
</h4>

<div class='container'>
  <div class='row'>
    {{#each listItems}}
      <div class='col-3 mb-3'>
        <div
          class='toast fade show'
          role='alert'
          aria-live='assertive'
          aria-atomic='true'
        >

          <div 
            {{#if inverted}}
            class='toast-header bg-{{name}}'
            {{else}}
            class='toast-header bg-{{name}} text-white'
            {{/if}}
          >
            <i class='ai-bell me-2'></i>
            <span class='fw-medium me-auto'>
              {{name}} toast
            </span>
            <button
              type='button'
              class='btn-close btn-close-white ms-2 mb-1'
              data-bs-dismiss='toast'
              aria-label='Close'
            ></button>
          </div>
          <div 
            {{#if inverted}}
              class='toast-body'
            {{else}}
              class='toast-body text-{{name}}'
            {{/if}}
          >
            Hello, world! This is a toast message.
          </div>
        </div>
      </div>
    {{/each}}
  </div>
</div>
 
{
  "listItems": [
    {
      "id": 1,
      "name": "primary"
    },
    {
      "id": 2,
      "name": "secondary",
      "inverted": true
    },
    {
      "id": 3,
      "name": "success"
    },
    {
      "id": 4,
      "name": "danger"
    },
    {
      "id": 5,
      "name": "warning"
    },
    {
      "id": 6,
      "name": "info"
    },
    {
      "id": 8,
      "name": "dark"
    }
  ]
}

No notes defined.