Pleasance Styleguide

Alert: Default 

<div class="alert alert-secondary d-flex align-items-center" role="alert">
    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:">
        <use xlink:href="#info" />
    </svg>
    <div>
        <p>
            An example alert.
        </p>

    </div>
</div>
 
<div class="alert alert-{{ type }} d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#{{ icon_name }}"/></svg>
  <div>
    {{ copy | raw }}
  </div>
</div>
 
{
  "type": "secondary",
  "icon_name": "info",
  "copy": "<p>\n  An example alert.\n</p>\n"
}
  • Content: 
    .alert {
  p {
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/components/01-elements/alert/alert.scss
  • Size: 71 Bytes

No notes defined.