Alerts

Alerts are used to show important information or notifications to users.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link

<div class="ch-alert ch-alert--info">
  ...
</div>

<div class="ch-alert ch-alert--warning">
  ...
</div>

<div class="ch-alert ch-alert--success">
  ...
</div>

<div class="ch-alert ch-alert--danger">
  ...
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="ch-alert ch-alert--info ch-alert--icon">
  ...
</div>

<div class="ch-alert ch-alert--warning ch-alert--icon">
  ...
</div>

<div class="ch-alert ch-alert--success ch-alert--icon">
  ...
</div>

<div class="ch-alert ch-alert--danger ch-alert--icon">
  ...
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="ch-alert ch-alert--info ch-alert--wide">
  ...
</div>

<div class="ch-alert ch-alert--warning ch-alert--wide">
  ...
</div>

<div class="ch-alert ch-alert--success ch-alert--wide">
  ...
</div>

<div class="ch-alert ch-alert--danger ch-alert--wide">
  ...
</div>

You can use ch-full-bleed to easily break out of a container.

Chassis v5.4.0

Getting Started

Elements

Forms

Components

Utilities

Examples

Alerts