# Features ### Shortcode and Block Support Whether using the classic or block editor, you can use AlertsDLX to output beautiful alert boxes. {% content-ref url="shortcode-usage" %} [shortcode-usage](https://docs.dlxplugins.com/alertsdlx/shortcode-usage) {% 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.

Insert Custom SVG Code for Custom 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.