Alert
Contextual feedback messages with a set of variations to suite messages
with some type of intention. For the most basic alert use
the pam-Alert attribute with a <h1> as title and <p> as message element.
Title
Alert message
Title
Alert message
Title
Alert message
Title
Alert message
Title
Alert message
Title
Alert message
Title
Alert message
Markup
<div pam-Alert="[modifier]">
<h1>Title</h1>
<p>Alert message</p>
</div>Outlined
This variation of alerts has a more emphasized styling and is a alternative way to draw attention to information.
Title
outlined message
Markup
<div pam-Alert="outlined">
<h1>Title</h1>
<p>outlined message</p>
</div>Simple
A simple alert has most of it properties normalized, such as border-radius and border. Can be used as a alert in designs for small screen and devices.
Title
outlined message
Markup
<div pam-Alert="simple">
<h1>Title</h1>
<p>outlined message</p>
</div>Link
pam-Alert-Link is a sub-object that adds contextual colors for links.
This alert has a awesome link!
Markup
<div pam-Alert>
<p>This alert has a <a pam-Alert-Link href="#">awesome link!</a></p>
</div>Close
pam-Alert="closeable" Adds styling for closeable alert by expanding
the right padding and make place for the close icon position.
Eyy! This alert can be terminated, awesome!
Markup
<div pam-Alert="closeable">
<p><strong>Eyy!</strong> This alert can be terminated, awesome!</p>
<div pam-Close="right">×</div>
</div>Fully loaded
Combine alert sub-objects, throw in a color modifier and add a transaprent divider to create a fully loaded alert!
Markup
<div pam-Alert="info closeable">
<h1>Title</h1>
<div pam-Close>×</div>
<p><strong>Oh yeah</strong>, all alert features closeable, header and link.</p>
<div pam-Divider="transparent"></div>
<p>Well, <a pam-Alert-Link href="#">that´s just crazy!</a></p>
</div>Hooks
.hook-alert
.hook-alert-error
.hook-alert-info
.hook-alert-link
.hook-alert-outlined
.hook-alert-primary
.hook-alert-secondary
.hook-alert-simple
.hook-alert-success
.hook-alert-warning
Variables
These are all the component specific variables that can be used for customization.
| Name | Value |
|---|---|
| @alert-background | @skin-background |
| @alert-border-color | darken(@alert-background, 5%) |
| @alert-border-left-width | @space-base |
| @alert-border-radius | @border-radius |
| @alert-border-width | 1px |
| @alert-border | 0 solid @alert-border-color |
| @alert-color | @skin-on-background |
| @alert-line-height | @line-height-normal |
| @alert-margin-vertical | @space-16 |
| @alert-padding | @space-16 |
| @alert-text-font-size | @font-size-large |
| @alert-title-font-size | @font-size-larger |
| @alert-primary-background | lighten(@skin-primary, 30%) |
| @alert-primary-border | darken(@alert-primary-background, 5%) |
| @alert-primary-color | darken(@alert-primary-background, 50%) |
| @alert-secondary-background | lighten(@skin-secondary, 30%) |
| @alert-secondary-border | darken(@alert-secondary-background, 5%) |
| @alert-secondary-color | darken(@alert-secondary-background, 50%) |
| @alert-info-background | lighten(@skin-info, 30%) |
| @alert-info-border | darken(@alert-info-background, 5%) |
| @alert-info-color | darken(@alert-info-background, 50%) |
| @alert-success-background | lighten(@skin-success, 30%) |
| @alert-success-border | darken(@alert-success-background, 5%) |
| @alert-success-color | darken(@alert-success-background, 50%) |
| @alert-warning-background | lighten(@skin-warn, 30%) |
| @alert-warning-border | darken(@alert-warning-background, 5%) |
| @alert-warning-color | darken(@alert-warning-background, 50%) |
| @alert-error-background | lighten(@skin-error, 30%) |
| @alert-error-border | darken(@alert-error-background, 5%) |
| @alert-error-color | darken(@alert-error-background, 50%) |
| @alert-outlined-background | @skin-primary-bg |
| @alert-link-font-weight | @font-weight-medium |
| @alert-large-padding | @space-20 |