Adding a Page Alert

Page alerts can be added to your markdown using the following shortcode:

  {{< alert text="This is the default alert. It consists of a default theme colour and icon." />}}
  

The above code results in the following alert:

Alert with Context

Add context to an alert via the context parameter:

  {{< alert context="info" text="This is an alert with an <strong>info</strong> context. It consists of the info theme colour and icon." />}}
  

Here’s what is rendered:

Additional alert contexts include success, danger, warning, primary, light and dark:

Alert with Custom Emoji Icon

The default icon for an alert context can be substituted with an emoji using the icon parameter:

  {{< alert icon="🍅" context="info" text="This is an <strong>info</strong> context alert with a tomato emoji replacing the default icon. The info theme colour remains unchanged." />}}
  

Alert with No Icon

Setting the icon parameter to an empty space, icon=" ", will render an alert with no icon:

  {{< alert icon=" " context="info" text="This <strong>info</strong> context alert has no icon." />}}
  

Render Markdown & HTML inside an Alert

Use a paired shortcode with the % delimiter2 to render Markdown and HTML inside an alert:

  {{% alert icon="🛒" context="success" %}}
This ***paired shortcode*** alert contains a **markdown** list and header:

#### My Shopping List:
1. Tomatoes
2. Bananas
3. Pineapples

and a sentence <em>styled</em> using <strong>HTML</strong> tags such as \<strong\> and \<em\>
{{% /alert %}}
  

Last updated 26 Jul 2024, 13:46 +0800 . history