App UI kit of Front is built using Gutenberg.It has 7 blocks.

1. Hero Fancybox
Settings

For more details please visit Hero Fancybox.
Output

2. Icon Block Centre
Settings
For more details please visit Icon block center.
Output

3. Info Colourful
Settings
Layout Setting :
You can choose 8 different type of styles.
Number of Cards :
You can select number of cards by using rangecontrol.
Display Section Header :
You can enabler or disable section header.
Bg color settings :
You can choose background color by using color palette.
Color Settings :
You can select color or custom color of Bg, title, description, pretitle in the color palette.
Button Settings :
- You can choose button designs for buttons. It has four type styles default, outline, soft, text.
- You can select button background color in the color palette.
- You can select button sizes. It has three type of sizes Extra small , Small, Large.
- Enable or disable is wide option for button.
- You can select border radius for button. It has three types Rounded 0, Pill, Circle
Advanced Css class :
Enter additional class name.
For more details please visit Info Colorful.
Output

4. Gallery Masonry
Settings
For more details please visit Gallery.
Output

5. Pricing Static #1
Settings
For more details please visit Pricing.
Output

6. Collapse
Settings
Layout :
You can select layout style version.
Limits :
You can choose limits by using rangecontrol.
Enable Container :
You can Enable or disable container.
Enable Arrow :
You can Enable or disable arrow.
Enable Arrow :
You can Enable or disable arrow.
Limit :
You can select limits by using range control.
Lg Columns :
You can choose width of column for laptops and desktops – screens equal to or greater than 1200px wide.
Advanced Css class :
Enter additional class name.
For more details please visit Collapse.
Output

7. Info Colourful
Settings
Layout Setting :
You can choose 8 different type of styles.
Number of Cards :
You can select number of cards by using rangecontrol.
Columns ( md ) :
You can choose width of column for small laptops – screens equal to or greater than 992px wide.
Display termtext :
You can enabler or disable section termtext.
Display Section Header :
You can enabler or disable section header.
Display Pretitle :
You can enabler or disable pretitle.
Display pretitle heading :
You can enabler or disable pretitle heading.
Color Settings :
You can select color or custom color of title, description, pretitle, pretitle heading in the color palette.
Link Settings :
Enter your link into the link box.
Advanced Css class :
Enter additional class name.
For more details please visit Info colorful.
Output
