--- extends: _layouts.markdown title: "Alerts" --- # Alerts We don't ship alert components because every app has it's own visual style and they are so easy to build out of utilities. Here's a bunch of examples: ### Traditional @component('_partials.code-sample', ['lang' => 'html'])
Holy smokes! Something seriously bad happened.
@endcomponent --- ### Left Accent Border @component('_partials.code-sample', ['lang' => 'html'])

Be Warned

Something not ideal might be happening.

@endcomponent --- ### Titled @component('_partials.code-sample', ['lang' => 'html'])
Danger

Something not ideal might be happening.

@endcomponent --- ### Solid @component('_partials.code-sample', ['lang' => 'html'])

Something happened that you should know about.

@endcomponent --- ### Top Accent Border @component('_partials.code-sample', ['lang' => 'html'])

Our privacy policy has changed

Make sure you know how these changes affect you.

@endcomponent --- ### Banner @component('_partials.code-sample', ['lang' => 'html'])

Informational message

Some additional text to explain said message.

@endcomponent