Alert

Pack name: seed-alert

Alert component pack for Seed

Contents

Install

npm install seed-alert --save

Dependencies


Example

Here's what's going on

Here's some more detail about what's going on

<div class="c-alert">
  <h3>Here's what's going on</h3>
  <p>Here's some more detail about what's going on</p>
</div>

Inner text color

To ensure the inner text color matches the alert color scheme, you can add the class .c-alert__text. This is useful to help override base text colors for headings (h1-h6) or lists (ul).

Here's what's going on

Here's some more detail about what's going on

<div class="c-alert">
  <h3>Here's what's going on</h3>
  <p class="c-alert__text">
    Here's some more detail about what's going on
  </p>
</div>

States

Error

Here's what's going on

Here's some more detail about what's going on

<div class="c-alert is-error">
  <h3>Here's what's going on</h3>
  <p>Here's some more detail about what's going on</p>
</div>

Info

Here's what's going on

Here's some more detail about what's going on

<div class="c-alert is-info">
  <h3>Here's what's going on</h3>
  <p>Here's some more detail about what's going on</p>
</div>

Success

Here's what's going on

Here's some more detail about what's going on

<div class="c-alert is-success">
  <h3>Here's what's going on</h3>
  <p>Here's some more detail about what's going on</p>
</div>

Warning

Here's what's going on

Here's some more detail about what's going on

<div class="c-alert is-warning">
  <h3>Here's what's going on</h3>
  <p>Here's some more detail about what's going on</p>
</div>