Info box
shortcode

This shortcode allows you to provide facility to add introductory information. Enable the read more button to add the external link.
Read documentation
Usage frequency
76%
Preset amount
82%
Customizability
95%

Available options

Default code: [dfd_info_box content_alignment="text-left" read_more="box" main_style="style-1"]

Style – Choose between 5 preset styles;

Icon position – Allows you to change the icon position;

Content only on hover – The content will be hidden until you hover over the info box;

Alignment – Set the alignment for the info box;

Animation – Select among 14 appear effects;

Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Title – Add the title for your info box;

Subtitle – Add the subtitle for your info box;

Content – Allows you to add description to your info box;

Link URL – Go to the external link by adding the link to the info box;

Apply link to – Choose where the link should be applied. You can apply the link to the whole info box, only to the title or to the read more button;

Read more button – Show the read more button under the content;

Button visibility – Allows you to show the button permanently or only on hover;

Read more style – Choose between 6 preset styles for the read more button;

Icon – Allows you to choose the icon for the info box, set the size and color. You can set the text or image instead of the icon;

Number at icon – You can add the number to the icon. Set the number, its color and the background;

Icon style – Choose the icon background size, border radius and background color;

Typography – Select letter spacing, font size, line height and text color. You can also choose the custom font family for the title and the subtitle.

Responsive – Specify the font size, line height and letter spacing for different screen resolutions.

Default styles

Samples of preset styles without custom changes
Simple style
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
colored icon style
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
bordered style
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
framed style
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
background style
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
top icon position
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
near the title icon position
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Left icon position
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.

Customized styles

Some variations of style customizations of the shortcode
description on hover
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
visible content and read more
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
icon with number
1
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
2
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.
3
Shortcode title
Shortcode subtitle
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative.