Icon Boxes
Build simple and elegant icon boxes in easy steps. All the styles bellow can be combined as you think is better for your design.
Default Wrappers
Simple Iconbox
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Custom Color
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Custom Text
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
{iconbox}
{icon-round-full bgcolor="color-grey" color="color-danger"}
{icon-fa name="fa-heart"}
{/icon}
{iconbox-content}
{h4 class="bold"}Simple Iconbox{/h4}
Content of the Box here
{/iconbox}
Vertical Centered Wrappers
Simple Iconbox
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Custom Color
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Custom Text
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
{iconbox style="vertical"}
{icon-square-full size="2x" bgcolor="color-warning" color="color-white"}
{icon-fa name="fa-space-shuttle"}
{/icon}
{iconbox-content}
{h4 class="bold"}Simple Iconbox{/h4}
Content of the Box here
{/iconbox}
Animated Icon Boxes
Simple Iconbox
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Custom Color
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Custom Text
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
{iconbox style="vertical"}
{icon-livicon name="briefcase" size="80" color="#F7505A" colorhover="#F7505A" animate="true" loop="false" iteration="1" duration="auto" onparent="true"}
{iconbox-content}
{h4 class="bold"}Simple Iconbox{/h4}
Content of the Box here
{/iconbox}
Panels Icon Boxes
Simple Iconbox
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn MoreCustom Color
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn MoreCustom Color
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn More
{iconbox-panel bgcolor="color-success"}
{icon-livicon name="briefcase" size="80" color="#fff" colorhover="#fff" animate="true" loop="false" iteration="1" duration="auto" onparent="true"}
{iconbox-content}
{h4 class="bold" color="color-white"}Simple Iconbox{/h4}
Content of the Box here
{/iconbox-panel}
Alternative Panels Icon Boxes
Simple Iconbox
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn MoreSimple Iconbox
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn MoreSimple Iconbox
Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.
Learn More
{iconbox-panel bgcolor="color-success"}
{icon-square-border color="color-white" size="2x"}
{icon-fa name="fa-heart"}
{/icon}
{iconbox-content}
{h4 class="bold" color="color-white"}Simple Iconbox{/h4}
Content of the Box here
{/iconbox-panel}