Alert

In this article, we're going to discuss the Alert element. We're going to discuss how to add it in Cornerstone / Pro Content Builder (applicable also to both Header and Footer Builders) and then we're going to brush through its settings.

  1. Alert Setup
  2. Close Setup
  3. Design Settings
  4. Text Settings
  5. Customize
  6. Demo
  7. Summary

The purpose of the Alert element is to output an Alert in a styled box with the text of your choice.

Alert View

To add this element, just search Alert and drag it to the canvas.

Alert Add

Alert Setup

The alert setup control group is for the initial setup of the Alert element.

Alert Setup
  • Close - Use this option to enable or disable the close icon in the Alert element.
  • Width & Max Width - Use this option to set the width and the maximum width of the element.
  • Content - Add the content of the Alert inside this option.
  • Background - Use this option to set the background of the Alert.

Close Setup

The close setup control group is to fine-tune the close icon of the Alert element.

Close Setup
  • Font Size - Use this option to set the size of the font icon which is used as the icon for the close button.
  • Location - Decide if you want to show the close icon at the left or right-hand side of the Alert.
  • Offset Top - Fine-tune the vertical spacing between the top of the alert box and the close icon.
  • Offset Side - Fine-tune the horizontal spacing between the left or right edge of the alert box and the close icon.
  • Color - Use this option to set the color of the close icon in the normal and hovered mode.

Design Settings

The design options include control groups to fine-tune the spacing and border of the alert box.

Margin

Use this option to set the margin of the alert box. You can change the settings for all the sides of the alert box or modify them individually.

Alert Margin

Padding

Use this option to set the padding of the alert box. You can change the settings for all the sides of the alert box or modify them individually.

Alert Padding

Border

Use this option to set the border of the alert box. You can set the style, width and color of the border on all sides or each side individually.

Alert Border

Border Radius

Use this option to set a border radius for the alert box. You can set the curve on all sides or set them individually.

Alert Border Radius

Box Shadow

You can set a shadow over the alert box using the box-shadow control group.

Alert Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the alert box.
  • Y-Offset - Use this option to set the Y offset of the shadow in the alert box.
  • Blur - Use this option to set the intensity of the blur effect in the alert box.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the alert box.
  • Color - Use this option to set the color of the alert box shadow.

Text Settings

The text options include control groups to fine-tune the text size and format of the alert box content.

Text Format

You can use this control group to set the format of the text in the alert box.

Alert Text Format
  • Font Family - Use this option to set the font of the alert box content.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.

Text Style

You can use this control group to set the style of the text in the alert box.

Alert Text Format
  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.

Text Shadow

The text-shadow control group contains settings to set a text shadow for the alert box content.

Alert Text Shadow
  • X-Offset - Use this option to set the X offset of the text shadow.
  • Y-Offset - Use this option to set the Y offset of the text shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text shadow.
  • Color - Use this option to set the color of the text shadow.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Alert Customize
  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

Demo

To see a live demo of the Alert Element click here.

Summary

Let's recap. We've discussed how to add the Alert Element. Then we've gone through its setup, design, text, and customize settings to make it look the way you want it to look.

See something inaccurate? Let us know