PaperCSS

the less formal CSS framework

Get PaperCSS Documentation About Github

Alerts

Simple alerts

Alert-primary

Alert-secondary

Alert-success

Alert-warning

Alert-danger

Code:

<div class="row flex-spaces">
  <div class="alert alert-primary">Alert-primary</div>
  <div class="alert alert-secondary">Alert-secondary</div>
  <div class="alert alert-success">Alert-success</div>
  <div class="alert alert-warning">Alert-warning</div>
  <div class="alert alert-danger">Alert-danger</div>
</div>

Dismissible alerts

Alert-primary X

Alert-secondary X

Alert-success X

Alert-warning X

Alert-danger X

Code:

<div class="row flex-spaces">
  <input class="alert-state" id="alert-1" type="checkbox">
  <div class="alert alert-primary dismissible">
    Alert-primary
    <label class="btn-close" for="alert-1">X</label>
  </div>
  <input class="alert-state" id="alert-2" type="checkbox">
  <div class="alert alert-secondary dismissible">
    Alert-secondary
    <label class="btn-close" for="alert-2">X</label>
  </div>
  <input class="alert-state" id="alert-3" type="checkbox">
  <div class="alert alert-success dismissible">
    Alert-success
    <label class="btn-close" for="alert-3">X</label>
  </div>
  <input class="alert-state" id="alert-4" type="checkbox">
  <div class="alert alert-warning dismissible">
    Alert-warning
    <label class="btn-close" for="alert-4">X</label>
  </div>
  <input class="alert-state" id="alert-5" type="checkbox">
  <div class="alert alert-danger dismissible">
    Alert-danger
    <label class="btn-close" for="alert-5">X</label>
  </div>
</div>