<commit_before>---
layout: documentation
title: Alerts
description: Documentation and examplesd for alerts.
group: components
redirect_from:
  - /documentation/components/
---


## Simple alert

{% capture example %}
<p class="alert">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
{% endcapture %}
{% include example.html content=example %}


## Alert with link

Exist two different ways to get links on alerts, simple link and with a special color.

{% capture example %}
<p class="alert">
  You need to go this <a href="#">link</a>.
</p>
{% endcapture %}
{% include example.html content=example %}

Using the class `alert-link` on anchor element.

{% capture example %}
<p class="alert">
  You need to go this <a href="#" class="alert-link">link</a>.<commit_msg>Alerts documentation updated<commit_after>---
layout: documentation
title: Alerts
description: Documentation and examplesd for alerts.
group: components
redirect_from:
  - /documentation/components/
---


| Name  | Type  | Value |
| ----- | ----- | ----- |
`$alert-padding` | <small>padding</small> | `1rem` |
`$alert-radius` | <small>radius</small> | `$radius` |
`$alert-background-level` | <small>unitless</small> | `-10` |
`$alert-border-level` | <small>unitless</small> | `-9` |
`$alert-color-level` | <small>unitless</small> | `6` |
`$alert-color-base` | <small>color</small> | <span class="small-box" style="background:#dee2e6"></span> `$gray-300` |
`$alert-background` | <small>color</small> | <span class="small-box" style="background:#f8f9fa"></span> `theme-color-level($alert-color-base, $alert-background-level)` |
`$alert-border` | <small>color</small> | <span class="small-box" style="background:#f6f7f8"></span> `theme-color-level($alert-color-base, $alert-border-level)` |
`$alert-color` | <small>color</small> | <span class="small-box" style="background:#737678"></span> `theme-color-level($alert-color-base, $alert-color-level)` |


## Simple alert

{% capture example %}
<p class="alert">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
{% endcapture %}
{% include example.html content=example %}


## Alert with link

Exist two different ways to get links on alerts, simple link and with a special color.

{% capture example %}
<p class="alert">
  You need to go this <a href="#">link</a>.
</p>
{% endcapture %}
{% include example.html content=example %}

Using the class `alert-link` on anchor element.

{% capture example %}
<p class="alert">
  You need to go this <a href="#" class="alert-link">link</a>.
{'fraction_non_alphanumeric': 0.18343898573692552, 'fraction_numerical': 0.00832012678288431, 'mean_word_length': 4.636160714285714, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6593572', 'n_tokens_mistral': 869, 'n_tokens_neox': 811, 'n_words': 222}