Toasts - Components - Spectre.css CSS Framework
Author: Yan Zhu
Description: Toasts are used to show alert or information to users. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Toasts#

Toasts are used to show alert or information to users.

###### Toast Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Add a container element with the `toast` class. You can add any text within the container, and even icons. You may also add a close button with the `btn-clear` class if you need.

    <div class="toast">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

Toast success

Toast warning

Toast error

And you can add the `toast-primary`, `toast-success`, `toast-warning` or `toast-error` class for additional toast colors.

    <div class="toast toast-primary">
      <button class="btn btn-clear float-right"></button>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.