Sha256: 2aa4b3870197bb97bba48ae39dd0d25efb239ff6f0d6415c466069bacea77747
Contents?: true
Size: 1.58 KB
Versions: 16
Compression:
Stored size: 1.58 KB
Contents
---
layout: post
title: "Alerts"
subtitle: "Inline alerts are useful for attracting a users attention. They default to 100% width of the parent container."
categories: components
permalink: /components/alerts/
---
<div class="pattern">
<div class="alert alert--information">
<span class="alert__copy"><strong>Important:</strong> Protocols 1, 2, and 3 are no longer supported</span>
</div>
</div>
``` html
<div class="alert alert--information">
<span class="alert__copy"><strong>Important:</strong> Protocols 1, 2, and 3 are no longer supported</span>
</div>
```
<div class="pattern">
<div class="alert alert--error">
<span class="alert__copy">Sorry, something's gone wrong. Try again in a moment</span>
</div>
</div>
``` html
<div class="alert alert--error">
<span class="alert__copy">Sorry, something's gone wrong. Try again in a moment</span>
</div>
```
<div class="pattern">
<div class="alert alert--success">
<span class="alert__copy">Great! You're now signed up to receive our newsletter!</span>
</div>
</div>
``` html
<div class="alert alert--success">
<span class="alert__copy">Great! You're now signed up to receive our newsletter!</span>
</div>
```
<div class="pattern">
<div class="alert alert--beta">
<span class="alert__copy">Our Push Notifications system is currently in beta. This means you may experience errors, and the APIs may change.</span>
</div>
</div>
``` html
<div class="alert alert--beta">
<span class="alert__copy">Our Push Notifications system is currently in beta. This means you may experience errors, and the APIs may change.</span>
</div>
```
Version data entries
16 entries across 16 versions & 2 rubygems