fr1nge.xyz/themes/after-dark/docs/content/shortcode/alert.md

+++
title = "Alert"
description = "Display contextual alert messages and dialogs."
categories = ["experience"]
tags = ["alert", "dialog", "message", "advertisement"]
html_attributes = ['class']
custom_attributes = ["type", "text"]
snippets_used = ["alert", "card", "external", "button", "button group", "progress"]
disable_csp = true
[[copyright]]
  owner = "Josh Habdas"
  date = "2019"
  license = "agpl-3.0-or-later"
+++

<style>.margin-reset { margin: 0; }</style>
{{< hackcss-card header="Quick Example" >}}
  {{< hackcss-alert type="info" class="margin-reset" >}}
    {{< hackcss-button
      type="primary" text="Toggle"
      onclick="this.parentElement.classList.toggle('alert')"
    />}} alert styling.
  {{< /hackcss-alert >}}
{{< highlight html "linenos=inline" >}}
{{</* hackcss-alert type="info" >}}
  {{< hackcss-button
    type="primary" text="Toggle"
    onclick="this.parentElement.classList.toggle('alert')"
  />}} alert styling.
{{< /hackcss-alert */>}}
{{< /highlight >}}
{{< /hackcss-card >}}

Default with plain text and hidden comment:

```html
{{</* hackcss-alert text="Alert Text" /*/>}}
{{</* hackcss-alert >}}Inner Alert Text{{< /hackcss-alert */>}}
{{</* hackcss-alert text="Alert Text" >}}Hidden Comment{{< /hackcss-alert */>}}
```

{{< hackcss-alert text="Alert Text" />}}
{{< hackcss-alert >}}Inner Alert Text{{< /hackcss-alert >}}
{{< hackcss-alert text="Alert Text" >}}Hidden Comment{{< /hackcss-alert >}}

Default with formatted text:

```html
{{</* hackcss-alert >}}
  <strong>HTML</strong> Text
{{< /hackcss-alert */>}}
{{%/* hackcss-alert %}}**Markdown** Text{{% /hackcss-alert */%}}
```

{{< hackcss-alert >}}
  <strong>HTML</strong> Text
{{< /hackcss-alert >}}
{{% hackcss-alert %}}**Markdown** Text{{% /hackcss-alert %}}

Typed with plain and formatted text:

```html
{{</* hackcss-alert type="success" text="Success Text" /*/>}}
{{</* hackcss-alert type="info" >}}<s>Info</s> ~~Text~~{{< /hackcss-alert */>}}
{{%/* hackcss-alert type="warning" %}}~~Warning~~ Text{{% /hackcss-alert */%}}
{{</* hackcss-alert type="error" >}}
  <strong>Error</strong> Text
{{< /hackcss-alert */>}}
```

{{< hackcss-alert type="success" text="Success Text" />}}
{{< hackcss-alert type="info" >}}<s>Info</s> ~~Text~~{{< /hackcss-alert >}}
{{% hackcss-alert type="warning" %}}~~Warning~~ Text{{% /hackcss-alert %}}
{{< hackcss-alert type="error" >}}
  <strong>Error</strong> Text
{{< /hackcss-alert >}}

Typed with interactive [Button](../button) and plain text:

```html
{{</* hackcss-alert type="info" >}}
  {{< hackcss-button
    type="info" isghost="true" text="Toggle"
    onclick="this.parentElement.classList.toggle('alert')"
  />}} alert styling.
{{< /hackcss-alert */>}}
```

{{< hackcss-alert type="info" >}}
  {{< hackcss-button
    type="info" isghost="true" text="Toggle"
    onclick="this.parentElement.classList.toggle('alert')"
  />}} alert styling.
{{< /hackcss-alert >}}

Inside a [Card](../card) with a [Button Group](../button-group) and two interactive [Buttons](../button):

```html
{{</* hackcss-card header="Card Title" >}}
  {{< hackcss-alert type="success" text="Congratulations! Your application was approved." />}}
  {{< hackcss-buttongroup >}}
    {{< hackcss-button text="Hide" type="primary" onclick="this.closest('.card').querySelector('.alert').hidden=true" />}}
    {{< hackcss-button text="Show" onclick="this.closest('.card').querySelector('.alert').hidden=false" />}}
  {{< /hackcss-buttongroup >}}
{{< /hackcss-card */>}}
```

{{< hackcss-card header="Card Title" >}}
  {{< hackcss-alert type="success" text="Congratulations! Your application was approved." />}}
  {{< hackcss-buttongroup >}}
    {{< hackcss-button text="Hide" type="primary" onclick="this.closest('.card').querySelector('.alert').hidden=true" />}}
    {{< hackcss-button text="Show" onclick="this.closest('.card').querySelector('.alert').hidden=false" />}}
  {{< /hackcss-buttongroup >}}
{{< /hackcss-card >}}

Typed with HTML graphic and [External](../external) link:

```html
{{</* hackcss-alert type="success" >}}
  <img alt="Advertisement" src="/images/products/nano-s.jpg">
  {{< external href="https://go.habd.as/nano-s" class="muted" >}}
    <small>Ledger Nano S - The secure hardware wallet</small>
  {{< /external >}}
{{< /hackcss-alert */>}}
```

{{< hackcss-alert type="success" >}}
  <img alt="Advertisement" src="data:image/png;base64,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
  {{< external href="https://go.habd.as/nano-s" class="muted" >}}
    <small>Ledger Nano S - The secure hardware wallet</small>
  {{< /external >}}
{{< /hackcss-alert >}}

Containing a [Card](../card) with six [Progress](../progress) indicators:

```html
{{</* hackcss-alert >}}
  {{< hackcss-card header="Value-added Tax by Country" >}}
    {{< hackcss-progress value="16" showpercent="true" filltext="China – 增值税" >}}
    {{< hackcss-progress value="20" showpercent="true" filltext="France – TVA" >}}
    {{< hackcss-progress value="10" showpercent="true" filltext="Indonesia – PPN" >}}
    {{< hackcss-progress value="8" showpercent="true" filltext="Japan – 消費税" >}}
    {{< hackcss-progress value="15" showpercent="true" filltext="New Zealand – GST" >}}
    {{< hackcss-progress value="20" showpercent="true" filltext="United Kingdom – VAT" >}}
  {{< /hackcss-card >}}
{{< /hackcss-alert */>}}
```

{{< hackcss-alert >}}
  {{< hackcss-card header="Value-added Tax by Country" >}}
    {{< hackcss-progress value="16" showpercent="true" filltext="China – 增值税" >}}
    {{< hackcss-progress value="20" showpercent="true" filltext="France – TVA" >}}
    {{< hackcss-progress value="10" showpercent="true" filltext="Indonesia – PPN" >}}
    {{< hackcss-progress value="8" showpercent="true" filltext="Japan – 消費税" >}}
    {{< hackcss-progress value="15" showpercent="true" filltext="New Zealand – GST" >}}
    {{< hackcss-progress value="20" showpercent="true" filltext="United Kingdom – VAT" >}}
  {{< /hackcss-card >}}
{{< /hackcss-alert >}}