Element – Callout Boxes

[vc_row][vc_column][sh_header size=”h4″ header=”Callout Boxes” colorchange=”enable” color=”#555555″ barwidth=”50px” barcolor=”#e74c3c” summary=”Callout boxes help you to direct readers to certain content, with Credence they are powerful and easy to create!”]

Callout boxes are an amazing way to grab people’s attention. With Credence you have so many options.

[/sh_header][vc_column_text]

[/vc_column_text][sh_headerdouble size=”h5″]

Amazing Callout Boxes

[/sh_headerdouble][vc_column_text]

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][sh_callout title=”Spin The Icons” bordersize=”2px” backgroundcolor=”#ffffff” fontcolor=”#555555″ buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconspin=”enable” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ buttontext=”Read More” icon=”fa fa-star”]

You can choose to have the icons spin, or not. You can even choose not to have an icon, or even have an image.

[/sh_callout][/vc_column_inner][vc_column_inner width=”1/3″][sh_callout title=”Stationary Icon” bordersize=”2px” backgroundcolor=”#ffffff” fontcolor=”#555555″ buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconspin=”disable” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ buttontext=”Read More” icon=”fa fa-star”]

You can choose to have the icons spin, or not. You can even choose not to have an icon, or even have an image.

[/sh_callout][/vc_column_inner][vc_column_inner width=”1/3″][sh_callout title=”Spin The Icons” bordersize=”2px” backgroundcolor=”#ffffff” fontcolor=”#555555″ buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconspin=”enable” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ buttontext=”Read More” icon=”fa fa-star”]

You can choose to have the icons spin, or not. You can even choose not to have an icon, or even have an image.

[/sh_callout][/vc_column_inner][/vc_row_inner][vc_column_text]

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][sh_callout title=”Unlimited Colors” bordercolor=”rgba(10,10,10,0.15)” bordersize=”2px” backgroundcolor=”#1abc9c” fontcolor=”#ffffff” buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#555555″ iconspin=”disable” iconfontcolor=”#ffffff” iconbgcolor=”#555555″ icon=”fa fa-arrow-circle-o-up” buttontext=”Read More”]

You can make the boxes any color you would like, set backgrounds font colors for all items.

[/sh_callout][/vc_column_inner][vc_column_inner width=”1/3″][sh_callout title=”Unlimited Colors” bordercolor=”rgba(10,10,10,0.15)” bordersize=”2px” borderradius=”6px” backgroundcolor=”#3498db” fontcolor=”#555555″ buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#555555″ buttonbgcolor=”#ffffff” iconspin=”disable” iconfontcolor=”#555555″ iconbgcolor=”#ffffff” icon=”fa fa-check” buttontext=”Read More”]

You can make the boxes any color you would like, set backgrounds font colors for all items.

[/sh_callout][/vc_column_inner][vc_column_inner width=”1/3″][sh_callout title=”Unlimited Colors” bordercolor=”rgba(10,10,10,0.15)” bordersize=”2px” backgroundcolor=”#e74c3c” fontcolor=”#ffffff” buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#555555″ iconspin=”disable” iconfontcolor=”#ffffff” iconbgcolor=”#555555″ icon=”fa fa-arrow-circle-o-up” buttontext=”Read More”]

You can make the boxes any color you would like, set backgrounds font colors for all items.

[/sh_callout][/vc_column_inner][/vc_row_inner][vc_column_text]

[/vc_column_text][sh_callout title=”Wide Callout” bordercolor=”rgba(0,0,0,0.25)” bordersize=”1px” backgroundcolor=”#ffffff” fontcolor=”#555555″ buttonenable=”disable” iconenable=”disable” icon=”fa fa-glass”]

Have a wide callout if you would like. They expand to their container so you can have them fit in columns or be full width. You can also control the border sizes, colors and radius!

[/sh_callout][vc_column_text]

[/vc_column_text][sh_headerdouble size=”h5″]

Flipping Callouts

[/sh_headerdouble][vc_column_text]

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][sh_callout callouttype=”flip” title=”Flipping Callout” bordersize=”2px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#ffffff” flipbgcolor=”#555555″ buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ buttontext=”Read More” icon=”fa fa-cog” fliptext=”This is the backside of the flipped Callout, Include more content here and a button if you would like. This has a different color than the front.”]

Have your callouts flip for a nice effect. You can put content on the front and back of these boxes, you can even have different colors for the front and back as well!

[/sh_callout][/vc_column_inner][vc_column_inner width=”1/3″][sh_callout callouttype=”flip” title=”Flipping Callout” bordersize=”2px” borderradius=”4px” backgroundcolor=”#777777″ fontcolor=”#ffffff” flipcolor=”#ffffff” flipbgcolor=”#555555″ buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconspin=”enable” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ buttontext=”Read More” icon=”fa fa-road” fliptext=”This is the backside of the flipped Callout, Include more content here and a button if you would like. This has a different color than the front.”]

Have your callouts flip for a nice effect. You can put content on the front and back of these boxes, you can even have different colors for the front and back as well!

[/sh_callout][/vc_column_inner][vc_column_inner width=”1/3″][sh_callout callouttype=”flip” title=”Flipping Callout” bordersize=”2px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#ffffff” flipbgcolor=”#555555″ buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ buttontext=”Read More” icon=”fa fa-clock-o” fliptext=”This is the backside of the flipped Callout, Include more content here and a button if you would like. This has a different color than the front.”]

Have your callouts flip for a nice effect. You can put content on the front and back of these boxes, you can even have different colors for the front and back as well!

[/sh_callout][/vc_column_inner][/vc_row_inner][vc_column_text]

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][sh_callout callouttype=”flip” title=”Image Callout” bordersize=”2px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#ffffff” flipbgcolor=”#555555″ buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”image” imageheight=”150px” imagewidth=”300px” buttontext=”Read More” icon=”fa fa-cog” fliptext=”This is the backside of the flipped Callout, Include more content here and a button if you would like. This has a different color than the front.” image=”203″]

You can use images in the Callout boxes and set their height and width to make them fit perfectly!

[/sh_callout][/vc_column_inner][vc_column_inner width=”1/3″][sh_callout callouttype=”flip” title=”Image Callout” bordersize=”2px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#ffffff” flipbgcolor=”#555555″ buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”image” imageheight=”150px” imagewidth=”300px” buttontext=”Read More” icon=”fa fa-cog” fliptext=”This is the backside of the flipped Callout, Include more content here and a button if you would like. This has a different color than the front.” image=”202″]

You can use images in the Callout boxes and set their height and width to make them fit perfectly!

[/sh_callout][/vc_column_inner][vc_column_inner width=”1/3″][sh_callout callouttype=”flip” title=”Image Callout” bordersize=”2px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#ffffff” flipbgcolor=”#555555″ buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”image” imageheight=”150px” imagewidth=”300px” buttontext=”Read More” icon=”fa fa-cog” fliptext=”This is the backside of the flipped Callout, Include more content here and a button if you would like. This has a different color than the front.” image=”201″]

You can use images in the Callout boxes and set their height and width to make them fit perfectly!

[/sh_callout][/vc_column_inner][/vc_row_inner][vc_column_text]

[/vc_column_text][sh_callout callouttype=”flip” title=”Flipping Callout” bordersize=”1px” borderradius=”5px” backgroundcolor=”#ffffff” fontcolor=”#777777″ flipcolor=”#555555″ flipbgcolor=”#ffffff” buttonenable=”disable” iconenable=”disable” icon=”fa fa-check” fliptext=”Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”]

This is a simple flipping callout box. There are no icons or buttons in here, this is great for information you’d like to share!

[/sh_callout][vc_empty_space][vc_column_text]

[/vc_column_text][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1440084144816{margin-bottom: 0px !important;}”][vc_column][shvc_colorbg backgroundcolor=”#eeeeee” fontcolor=”#444444″][vc_empty_space height=”30px”][sh_headerdouble size=”h5″]

Features

[/sh_headerdouble][vc_row_inner css=”.vc_custom_1440084084212{margin-bottom: 0px !important;}”][vc_column_inner width=”1/2″][shvc_checklist iconset=”linear” iconlinear=”icon-check-square”][shvc_checklist_item]

Create simple or flipping callouts

[/shvc_checklist_item][shvc_checklist_item]

Use Font Awesome, Linearicons, and Ionicons

[/shvc_checklist_item][shvc_checklist_item]

Have buttons open in new or existing windows

[/shvc_checklist_item][shvc_checklist_item]

Create with or without icons and buttons

[/shvc_checklist_item][shvc_checklist_item]

Responsive, just like all elements

[/shvc_checklist_item][/shvc_checklist][/vc_column_inner][vc_column_inner width=”1/2″][shvc_checklist iconset=”linear” iconlinear=”icon-check-square”][shvc_checklist_item]

Unlimited background colors

[/shvc_checklist_item][shvc_checklist_item]

Unlimited font colors

[/shvc_checklist_item][shvc_checklist_item]

Set border width, radius, and color

[/shvc_checklist_item][shvc_checklist_item]

Spin font awesome icons

[/shvc_checklist_item][shvc_checklist_item]

Use images instead of icons

[/shvc_checklist_item][/shvc_checklist][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30px”][/shvc_colorbg][/vc_column][/vc_row]