REA Icon Box

The REA Icon Box is a multi-purpose widget with powerful customizing options. It gives the user the ability to add or remove the icon/image from the widget. One of the most useful features of the widget is its CTA settings, which gives the user the ability to have text or button or the entire widget to function as a CTA.

Content

General

• Title - Allows the user to add a title.

• Description - Allows the user to a description.

Image/Icon

• Image Type - Allows the user to set the image type to image or font icon. Default value is font icon.

• Select Icon - Allows the user to choose an icon or upload the svg. This setting is available if the image type is set to Font Icon.

• Photo Source - Allows the user to select the source for the image. Available options are Media Library and URL. This setting is available if the image type is set to Image.

• Photo - Allows the user to choose an image from the media library. This setting is available if the Photo Source is set to Media Library.

• Image Size - Allows the user to select the image size. If the image size is chosen to be Custom then the dimensions input controls are displayed.

• Width - This is a responsive control setting which allows the user to set the image width. Background Size - This is a responsive control setting which allows the user to set the image/icon background size.

• Normal State - Following settings are available for the normal state of the image/icon.

  1. Background Color - Allows the user to choose the background color of the image/icon.

  2. Border Style - Allows the user to select the border style.

  3. Border Color - Allows the user to choose the border color if the border style is not set to none and the Image/Icon Style is set to Design your own.

  4. Border Width - Allows the user to set the border width if the border style is not set to none and the Image/Icon Style is set to Design your own.

  5. Rounded Corners - Allows the user to set the border radius of the image/icon to make it rounded if the Image/Icon Style is set to Design your own.

• Hover State - Following settings are available for the hover state of the image/icon.

  1. Background Hover Color - Allows the user to choose the background color for hover state of the image/icon.

  2. Border Hover Color - Allows the user to choose the border color for the hover state of the icon if the border style is not set to none.

  3. Hover Animation - Allows the user to select the hover animation of the image/icon.

Separator

• Separator - Gives the user the ability to hide or show the separator.

Call To Action

• Type - Gives the user the ability to select the type of the CTA. Available types are None, Text, Button and Complete Box.

• Text - Allows the user to add the text for the CTA.

• Link - Allows the user to add the link for the CTA.

• Select Icon - Allows the user to choose the icon or upload the svg for the CTA.

• Position - Allows the user to select the position of the CTA. Available options are After Text and Before Text.

• Icon Spacing - Allows the user to set the icon spacing of the CTA.

• Size - Allows the user to select the button size.

Style

Icon Box Container

1. Overall Alignment - This is a responsive control setting which allows the user to set the overall horizontal alignment of the contents. This setting is only available when the Image/Icon Position is set to Above Heading or Below Heading.

Normal

1. Background Type - Allows the user to choose the background type. Available options are Classic, Gradient and Video. If Gradient/Video is selected then their respective controls will be displayed.

2. Padding - This is a responsive control that allows the user to set the padding.

3. Box Shadow - Allows the user to set the box shadow properties of the container.

4. Border Type - Allows the user to select the border type of the container and set their properties.

5. Border Radius - Allows the user to set the border radius dimensions of the container.

Hover

1. Background Type - Allows the user to choose the background type. Available options are Classic, Gradient and Video. If Gradient/Video is selected then their respective controls will be displayed.

2. Title Hover Color - Allows the user to set the title text color on hovering over the container.

3. Description Hover Color - Allows the user to set the description text color on hovering over the container.

4. Padding - This is a responsive control that allows the user to set the padding.

5. Box Shadow - Allows the user to set the box shadow properties of the container.

6. Border Type - Allows the user to select the border type of the container and set their properties.

7. Border Radius - Allows the user to set the border radius dimensions of the container.

8. Hover Animation - Allows the user to select hover animation of the container.

Icon Style

When Image is selected.

When Icon is selected.

1. Size - This is a responsive control setting which allows the user to set the size of the icon. This setting is displayed if Image Type is set to Icon.

2. Height - This is a responsive control setting which allows the user to set the image/icon box width.

3. Width - This is a responsive control setting which allows the user to set the image/icon box width.

4. Line Height - This is a responsive control setting which allows the user to set the line height.

5. Rotate - Allows the user to set the rotation value of the icon. This setting is displayed if the Image Type is Icon.

6. Select Position - Allows the user to select the position of the image/icon. The options available are as follows:

   1. Above Heading - Displays the image/icon above the heading.

   2. Below Heading - Displays the image/icon below the heading.

   3. Left of Heading - Displays the image/icon to the left of the heading.

   4. Right of Heading - Displays the image/icon to the right of the heading.

   5. Left of Text and Heading - Displays the image/icon to the left of the Description and Heading.

   6. Right of Text and Heading - Displays the image/icon to the right of the Description and Heading.

7. Width - Allows the user to set the image/icon width. This setting is displayed if Image Type is set to Icon.

8. Background Size - This is a responsive control that allows the user to set the background size of the image/icon. This setting is displayed if the Image/Icon Style is not set to Normal.\

Normal

1. Icon Color - Allows the user to set the icon color. This setting is displayed if Image Type is set to Icon.

2. Background Color - Allows the user to set the background color. This setting is displayed if Image Type is set to Image.

3. Border Style - Allows the user to set the border style and its respective properties.

Following settings are displayed if the Image/Icon Style is not set to Normal.

1. CSS Filters - Allows the user to set the css filters settings for hover state of the container. This setting is displayed if Image Type is set to Image.

2. Image Opacity - Allows the user to set the image opacity for hover state of the container. This setting is displayed if Image Type is set to Image.

3. Transition Duration - Allows the user to set the transition duration of the image/icon. This setting is displayed if Image Type is set to Image.

Hover

1. Icon Hover Color - Allows the user to set the icon color for the hover state.This setting is displayed if Image Type is set to Icon.

2. Background Color - Allows the user to set the background color of the image/icon for hover state. This setting is displayed if Image Type is set to Image.

3. Border Style - Allows the user to set the border style and its properties for hover state of the container.

4. CSS Filters - Allows the user to set the css filters settings for hover state of the container. This setting is displayed if Image Type is set to Image.

5. Image Opacity - Allows the user to set the image opacity for hover state of the container. This setting is displayed if Image Type is set to Image.

6. Hover Animation - Allows the user to set the hover animation of the image/icon for hover state of the container.

Image/Icon Style - Allows the user to select the Image or Icon style. Available options are as follows:

1. Normal - Displays the image/icon in normal style.

2. Circle Background - Displays the image/icon with circular background.

3. Square/Rectangle Background - Displays the image/icon with square/rectangle background.

4. Design your own - This option enables the control settings so that the user can add a customizable background as per requirement.

Image Style

This subsection is displayed if the Image/Icon Style is set to Normal.

1. CSS Filters - Allows the user to set the css filters settings for hover state of the container. This setting is displayed if Image Type is set to Image.

2. Image Opacity - Allows the user to set the image opacity for hover state of the container. This setting is displayed if Image Type is set to Image.

3. Transition Duration - Allows the user to set the transition duration of the image/icon. This setting is displayed if Image Type is set to Image.

Typography

Title

1. Title Tag - Allows the user to select the HTML tag for the title.

2. Typography - Allows the user to set the typography settings for the title.

3. Color - Allows the user to choose the text color of the title.

4. Blend Mode - Allows the user to select the blend mode from the given options.

Description

1. Typography - Allows the user to set the typography settings for the description.

2. Description Color - Allows the user to choose the description text color.

3. Hover Color - Allows the user to choose the hover color of the description. This setting is available when the CTA type is set to Complete Box.

CTA Link Text

The following control settings will be displayed only when the CTA button type is set to Text.

1. Typography - Allows the user to set the typography settings for the CTA Link Text.

2. Link Color - Allows the user to choose the CTA Link text color.

Button Style

Normal State

1. Text Color - Allows the user to set the text color of the CTA button.

2. Background Type - Allows the user to set the background type of the CTA button.

3. Border Style - Allows the user to select the border style for the CTA button.

4. Rounded Corners - Allows the user to set the rounded corners dimensions for the CTA button.

5. Box Shadow - Allows the user to set the box shadow properties of the CTA button.

Hover State

1. Text Hover Color - Allows the user to set the text color of the CTA button for hover state.

2. Background Type - Allows the user to set the background type of the CTA button for hover state.

3. Box Shadow - Allows the user to set the box shadow properties of the CTA button for hover state.

4. Hover Animation - Allows the user to select the hover animation of the CTA button.

Separator Style

1. Position - Allows the user to select the separator position. Available options are After Prefix, After Heading, and After Description.

2. Style - Allows the user to choose the style of the separator. Available options are Solid, Dashed, Dotted, and Double.

3. Color - Allows the user to choose the color of the separator.

4. Thickness - Allows the user to set the thickness of the separator.

5. Width - This is a responsive control setting that allows the user to set the separator width.

Margins

1. Title Margin - This is a responsive control that allows the user to set the margin of the title.

2. Image/Icon Margin - This is a responsive control that allows the user to set the margin of the image/icon.

3. Description Margins - This is a responsive control that allows the user to set the margin of the description.

4. Separator Margins - This is a responsive control that allows the user to set the margin of the separator.

5. CTA Margin - This is a responsive control that allows the user to set the margin for the CTA.