# Features ### Shortcode and Block Support Whether using the classic or block editor, you can use AlertsDLX to output beautiful alert boxes. {% content-ref url="/pages/G99GnVEpGgcOyZiLJ6cv" %} [Shortcode Usage](/alertsdlx/shortcode-usage.md) {% endcontent-ref %} ### Four Alert Blocks - and many styles to choose from The plugin comes with blocks inspired by three UI component libraries: * Bootstrap * Chakra * Material * Shoelace Each has their own unique style and variations, which can be configured on the block itself or in the sidebar options.

### Styles make the block customizable Each block has several theme styles to choose from. For example, the Bootstrap alert block has a handful of available style options.

Bootstrap Alert Block with Several Style Options

Please view the example below how multiple blocks can look depending on the style chosen.

### Style Variants In addition to different styles, each block has its own variants.

Chakra Alert Block With Warning Style and Solid Variant

Here's an example of a centered variant of the Warning style.

Chakra UI Centered Variant (Warning style)

### Icon Selector AlertsDLX comes with a custom icon selector that allows for easy insertion of different icons. Simply click on the icon and you'll be able to select a new one.

The Icon Selector Makes Selecting an Icon Easy

In addition to icons, you can also insert your own SVGs instead of the pre-selected icons.

{% hint style="info" %} **Inspired by GenerateBlocks**: The icon selector and SVG compatibility was inspired by the [GenerateBlocks](https://wordpress.org/plugins/generateblocks/) plugin. {% endhint %} AlertsDLX has icons from the following sources. * [Google Fonts Material Icons](https://fonts.google.com/icons) * [Chakra UI Icons](https://github.com/chakra-ui/chakra-ui/tree/main/packages/components/icons/src) (GitHub) * [Bootstrap Icons](https://icons.getbootstrap.com/) ### Disable or Enable Elements With the block options, you can enable or disable the title, description, icon, and button.

For example, a button isn't shown by default. You can enable a button using the above options.

{% hint style="info" %} **Buttons**: the UI libraries didn't include button styles, but CTAs are important for alerts, so it was added in as a feature. {% endhint %} ### Button link options With the inclusions of buttons comes a mechanism to link out to your resource. Add a link and set it to launch in a new window, and modify the `rel` attributes for nofollow or sponsored links.

### Set the container's maximum width The block has different alignment options, but if you choose a centered, wide, or full-width alignment, you may find the block to be too wide when viewed on the front-end. With a Maximum Width option, you can adjust how wide your alert block can be when viewed at wider widths.

Each width can be adjusted via pixel, percentage, or viewport width. ### Change the base font size The styles for the alert blocks are all relative to a base font size. You can adjust this base to be smaller or bigger depending on your needs.

### Typography The Lato Google Font is used on the front-end to allow the alerts to stand out even more.

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.dlxplugins.com/alertsdlx/features.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.