Alert

Display contextual alert messages and dialogs.

HTML attributes:

class

Custom attributes:

text,

type

Quick Example

alert styling.

1{{< hackcss-alert type="info" >}}
2  {{< hackcss-button
3    type="primary" text="Toggle"
4    onclick="this.parentElement.classList.toggle('alert')"
5  />}} alert styling.
6{{< /hackcss-alert >}}

Default with plain text and hidden comment:

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

Alert Text

Inner Alert Text

Alert Text

Default with formatted text:

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

HTML Text

Markdown Text

Typed with plain and formatted text:

{{< 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 >}}

Success Text

~~Info~~ ~~Text~~

~~Warning~~ Text

Error Text

Typed with interactive Button and plain text:

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

alert styling.

Inside a Card with a Button Group and two interactive Buttons:

{{< 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 >}}

Card Title

Congratulations! Your application was approved.

Typed with HTML graphic and External link:

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

Ledger Nano S - The secure hardware wallet

Containing a Card with six Progress indicators:

{{< 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 >}}

Value-added Tax by Country