Docs Home of Front is build using Gutenberg blocks. It has 4 blocks.
Overview
The Details
1.Hero Form #8
Block Navigation :
Paste your form html into advanced shortcode block.
Example:
<form role="search" method="get" action="https://example.com/" class="js-focus-state input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="askQuestions">
<span class="fas fa-search"></span>
</span>
</div>
<input type="hidden" name="post_type" value="docs">
<input type="search" class="form-control" placeholder="Search the knowledge base..." aria-label="Search the knowledge base..." name="s" aria-describedby="askQuestions">
</form>
Block Settings :
Enable Container :
You can enable or disable container.
Color Settings :
You can select color or custom color of background, title and description in the color palette.
Advanced Css class :
Enter additional class name.
Output :
![](https://docs.madrasthemes.com/front-gutenberg-blocks/wp-content/uploads/sites/15/2019/11/form8-out-1-1.png)
2. Docs
Block Settings
General Settings
- Enable Container ?: Enable or disable container. Default: Enable
- Display Pretitle ?: Enable or disable pretitle. Default: Disable
- Display Title ?: Enable or disable title. Default: Disable
- Display Description ?: Enable or disable description. Default: Disable
- Display Button ?: Enable or disable button. Default: Enable
- Display Bottom Border ?: Enable or disable bottom border. Default: Enable
Advanced panel
Additional CSS Class(es): Enter additional class.
Output
![](https://docs.madrasthemes.com/front-gutenberg-blocks/wp-content/uploads/sites/15/2019/11/help-center-docs-output.jpg)
3. Docs List
Block Settings
Choose the icon from the dropdown list to displayed in Docs List Content. Title and list of content are editable.
Ouput
![](https://docs.madrasthemes.com/front-gutenberg-blocks/wp-content/uploads/sites/15/2019/11/help-center-docs-list-output-1024x388.jpg)
4. Call To Action
Block Settings
Layout
Select style version for Call To Action. select Style-11 as default.
Background Settings
Backgrounds have a significant impact on the design of a website. They help create a site’s look and feel. There are two types of settings are available: Single and Gradient.
- Single: Solid background color
- Gradient: Gradient ( Combination of two or more colors ) background color
In default, Single type is used in this block.
Icon Settings
Svg icon: Select the icon from the dropdown menu.
Button settings
Buttons allow you to take actions, and make choices, with a single tap.
- Button Design: There are 4 button designs available. Choose Default button design as default.
- Button Background: Choose the background color for your button. Choose warning as default button color.
- Button Size: Extra Small, Small, Default and Large button size are available. The default size for this block is Default
- Button Border Radius: Rounded, Default, Pill and Circle are the available border radius. The default border radius is Default
- Button Icon: You can choose the icons for the button block.The default icon is fa-angle-right .
- Is Icon After text: Enable or disable the icon to position before the button text. set Enable option as default.
Additional CSS Class
Enter the extra class name for the block
Output
![](https://docs.madrasthemes.com/front/wp-content/uploads/sites/14/2019/11/help-center-call-to-action-output-1024x513.png)