Alert

Contents

Example

Here's what's going on

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

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

Breakdown of classes

.c-alert
Outer container, which inherits the component style from seed-alert.

.c-alert__content
Inner container that uses flexbox to align alert content together.

.c-alert__block
Main alert content goes here.


Content

Main Content

The alert component can accomodate a wide variety of text-based content.

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading

Title

Paragraph. Link.

Paragraph only.

Title

Paragraph. Link.

  • List item
  • List item
  • List item

Floating content

The .c-alert__content class allows for content such as icons, badges, and buttons to float and align correctly with the textual content contained in .c-alert__block.

To add floating content, insert your element either before or after the .c-alert__block element.

Note: Icons and badges automatically inherit the thematic color of the alert.

Left

Here's what's going on

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

Badge

Here's what's going on

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

<div class="c-alert">
  <div class="c-alert__content">
    <i class="icon-alert"></i>
    <div class="c-alert__block">
      ...
    </div>
  </div>
</div>

<div class="c-alert">
  <div class="c-alert__content">
    <span class="c-badge">Badge</span>
    <div class="c-alert__block">
      ...
    </div>
  </div>
</div>

Right

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

<div class="c-alert">
  <div class="c-alert__content">
    <i class="icon-alert"></i>
    <div class="c-alert__block">
      ...
    </div>
    <button class="btn">Button</button>
  </div>
</div>

Left and right

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

<div class="c-alert">
  <div class="c-alert__content">
    <i class="icon-alert"></i>
    <div class="c-alert__block">
      ...
    </div>
    <button class="btn">Button</button>
  </div>
</div>

States

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

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

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

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

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

<div class="c-alert">
  ...
</div>

<div class="c-alert is-error">
  ...
</div>

<div class="c-alert is-info">
  ...
</div>

<div class="c-alert is-success">
  ...
</div>

<div class="c-alert is-warning">
  ...
</div>

Seed Packs