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.

Shortcode

{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.

Shortcode

{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.

Shortcode

{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 More

Custom Color

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Learn More

Custom Color

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Learn More

Shortcode

{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 More

Simple Iconbox

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Learn More

Simple Iconbox

Turpis venenatis at laoreet. Etiam lorem nulla fuviverra minim sed metus egestas sapien conseto actetuer, ac bibendum.

Learn More

Shortcode

{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}