Field: Feature field
This field allows you to create feature rows with images, lines/ arrows and numbers
Category: Waterlogic Fields.
Frontend examples
Notes
This field should be used on standard layouts (50/ 33/ 25) and be used at least more than once to produce a stepped feature. If the feature field is used on a layout with a background colour, the field will automatically change design style, adding a white background, border and shadow. It also adjusts the location of the image title and number and removes any spacer (arrow/ line).
Options
| Setting | Description | Default |
| Feature field | Feature field content | |
| Feature title | Title of feature field | |
| Feature image | Image to use for featured field: Note the image will be resized to 200x200px. Please use a transparent background PNG to ensure image ratio stays intact. | |
| Feature SVG icon | SVG icon to use for feature field. Will overwrite Feature Image if selected. | |
| Feature SVG icon colour | Colour of the SVG Icon. | |
| Step count (optional) | Used to display the featured field count, enter the number that represents the position this field resides in | |
| Text Alignment | Alignment of the text in the feature field. | Text Centre |
Settings
| Setting | Description | Default |
| Add spacer between features | Choose between none, line or arrow spacer to create visual directional cues for users. NOTE: If you want a spacer between fields then this must be set to the same spacer type for each field in the layout. |
No |
| Circular image background colour | Places the image within a circle and adds a background colour. If a colour is selected the position of the step count field changes to prevent overlapping. NOTE: We highly recommended that if this setting is used, each field in the layout should use a background colour to preserve consistency |
None |
| Feature Title Position (Step Only) | Position of the heading content when steps are added only. | Above Image |
Content Area
An additional content area exists to the bottom of the feature field, this allows you to add extra content to the bottom of the feature field. Ideal example usage would be a 100% empty layout with a button.