+++ 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" +++
{{< 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:
{{</* 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:
{{</* hackcss-alert >}}
<strong>HTML</strong> Text
{{< /hackcss-alert */>}}
{{%/* hackcss-alert %}}**Markdown** Text{{% /hackcss-alert */%}}
{{< hackcss-alert >}} HTML Text {{< /hackcss-alert >}} {{% hackcss-alert %}}Markdown Text{{% /hackcss-alert %}}
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 */>}}
{{< hackcss-alert type="success" text="Success Text" />}}
{{< hackcss-alert type="info" >}}Info Text{{< /hackcss-alert >}}
{{% hackcss-alert type="warning" %}}Warning Text{{% /hackcss-alert %}}
{{< hackcss-alert type="error" >}}
Error Text
{{< /hackcss-alert >}}
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 */>}}
{{< 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 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 */>}}
{{< 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 link:
{{</* 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" >}} {{< external href="https://go.habd.as/nano-s" class="muted" >}} Ledger Nano S - The secure hardware wallet {{< /external >}} {{< /hackcss-alert >}}
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 */>}}
{{< 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 >}}