Feature Box Configurations
The Feature Box Page Builder element allows you to present content in a card format.
Typically, it will consist of an image and some text. There are several types (options) of feature boxes, varying the way the image and the text are displayed and the type of animation used on mouse over.
Type 1 - Landscape in blue
In this example, container settings were configured with blue background, white text and rounded corners.
When you have a long text, it scrolls to allow reading the entire text without overflowing the card.
In this case you should probably use a button for any link you want to use for the Feature Box instead of a link configuration.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, lorem vel bibendum eleifend, mauris nisl suscipit est, sed sagittis eros turpis sed purus. Maecenas sed interdum risus. Praesent metus justo, tincidunt ac rhoncus vel, tincidunt ut odio. Nulla fringilla sed leo in mollis. Sed ut molestie est, nec auctor erat.
Type 2 - Square, 90% width in green
Example using a 3px green border with rounded corners, and green text.
When you have a long text, it scrolls to allow reading the entire text without overflowing the card.
In this case you should probably use a button for any link you want to use for the Feature Box instead of a link configuration.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, lorem vel bibendum eleifend, mauris nisl suscipit est, sed sagittis eros turpis sed purus. Maecenas sed interdum risus. Praesent metus justo, tincidunt ac rhoncus vel, tincidunt ut odio. Nulla fringilla sed leo in mollis. Sed ut molestie est, nec auctor erat.
Type 3 - Portrait in orange
When you have a long text, it scrolls to allow reading the entire text without overflowing the card.
In this case you should probably use a button for any link you want to use for the Feature Box instead of a link configuration.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, lorem vel bibendum eleifend, mauris nisl suscipit est, sed sagittis eros turpis sed purus. Maecenas sed interdum risus. Praesent metus justo, tincidunt ac rhoncus vel, tincidunt ut odio. Nulla fringilla sed leo in mollis. Sed ut molestie est, nec auctor erat.
Type 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, lorem vel bibendum eleifend, mauris nisl suscipit est, sed sagittis eros turpis sed purus. Maecenas sed interdum risus.
Type 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, lorem vel bibendum eleifend, mauris nisl suscipit est, sed sagittis eros turpis sed purus. Maecenas sed interdum risus.
Type 7
Example with color white, landscape image, 300px height. Container settings with dark background and white text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit, lorem vel bibendum eleifend, mauris nisl suscipit est, sed sagittis eros turpis sed purus. Maecenas sed interdum risus.
Configurations
Feature Box component configuration:
- Title
- If title is displayed on the page
- An introduction text
- Type (how the card is displayed)
- Number of columns
- Column gap
- Height
- Orientation (landscape, portrait, square)
- Color
- Width as percentage of the total width available for the element
- Container Settings
Container Settings
Container settings allows the configuration of the container housing the component. It allows the following settings:
- Padding (in px): top, right, bottom, left. Defaults to 0px for all.
- Margins (in px): top, right, bottom, left. Defaults to 32px in the bottom.
- Border (in px): top, right, bottom, left. Defaults to 0px for all.
- Border Radius (in px): defaults to 0px.
- Border Color
- Background
- Color
- Text Color
- Extend text color to items or not
- Opacity (%)
- Blur (in px)
- Media (image / video)
- Parallax Effect (for Image only)
Feature Box Item
- Title
- Body (text)
- Image
- Link
- Button with Link
- Color
- Text Shadow