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 attribute]">
<h1>Title</h1>
<p>Alert message</p>
</div>Callout
This variation of alerts has a more emphasized styling and is a alternative way to draw attention to information.
Title
Callout message
Title
Callout message
Title
Callout message
Title
Callout message
Title
Callout message
Title
Callout message
Title
Callout message
Markup
<div pam-Alert="callout [modifier attribute]">
<h1>Title</h1>
<p>Callout 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-callout
.hook-alert-callout-danger
.hook-alert-callout-info
.hook-alert-callout-primary
.hook-alert-callout-secondary
.hook-alert-callout-success
.hook-alert-callout-warning
.hook-alert-danger
.hook-alert-info
.hook-alert-link
.hook-alert-primary
.hook-alert-secondary
.hook-alert-success
.hook-alert-warning