Shortcode – Callout Boxes 2014-10-02T06:54:31+00:00
[sh_header size=”h4″ summary=”Callout boxes help you to direct readers to certain content, with Credence they are powerful and easy to create!” header=”Callout Boxes” colorchange=”enable” color=”#555555″ type=”underline”]Callout boxes are an amazing way to grab people’s attention. With Credence you have so many options.[/sh_header]
[sh_headerdouble size=”h5″]Amazing Callout Boxes[/sh_headerdouble]
[sh_callout callouttype=”standard” title=”Spin The Icons” buttontext=”Read More” buttonlink=”#” buttontarget=”_self” icon=”fa fa-star” bordercolor=”rgba(0,0,0,0.15)” bordersize=”2px” borderradius=”0px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#555555″ flipbgcolor=”#ffffff” flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”enable” imageheight=”100px” imagewidth=”100px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ iconspin=”enable”]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]
[sh_callout callouttype=”standard” title=”Stationary Icon” buttontext=”Read More” buttonlink=”#” buttontarget=”_self” icon=”fa fa-star” bordercolor=”rgba(0,0,0,0.15)” bordersize=”2px” borderradius=”0px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#555555″ flipbgcolor=”#ffffff” flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”enable” imageheight=”100px” imagewidth=”100px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ iconspin=”disable”]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]
[sh_callout callouttype=”standard” title=”Spin The Icons” buttontext=”Read More” buttonlink=”#” buttontarget=”_self” icon=”fa fa-star” bordercolor=”rgba(0,0,0,0.15)” bordersize=”2px” borderradius=”0px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#555555″ flipbgcolor=”#ffffff” flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”enable” imageheight=”100px” imagewidth=”100px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ iconspin=”enable”]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]
[sh_callout callouttype=”standard” title=”Unlimited Colors” bordercolor=”rgba(10,10,10,0.15)” bordersize=”2px” borderradius=”0px” backgroundcolor=”#1abc9c” fontcolor=”#ffffff” flipcolor=”#555555″ flipbgcolor=”#ffffff” flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#555555″ iconenable=”enable” imageheight=”100px” imagewidth=”100px” iconspin=”disable” icon=”fa fa-arrow-circle-o-up” iconfontcolor=”#ffffff” iconbgcolor=”#555555″ buttontext=”Read More”]You can make the boxes any color you would like, set backgrounds font colors for all items.[/sh_callout]
[sh_callout callouttype=”standard” title=”Unlimited Colors” bordercolor=”rgba(10,10,10,0.15)” bordersize=”2px” borderradius=”6px” backgroundcolor=”#3498db” fontcolor=”#555555″ flipcolor=”#555555″ flipbgcolor=”#ffffff” flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#555555″ buttonbgcolor=”#ffffff” iconenable=”enable” imageheight=”100px” imagewidth=”100px” iconspin=”disable” icon=”fa fa-check” iconfontcolor=”#555555″ iconbgcolor=”#ffffff” buttontext=”Read More”]You can make the boxes any color you would like, set backgrounds font colors for all items.[/sh_callout]
[sh_callout callouttype=”standard” title=”Unlimited Colors” bordercolor=”rgba(10,10,10,0.15)” bordersize=”2px” borderradius=”0px” backgroundcolor=”#e74c3c” fontcolor=”#ffffff” flipcolor=”#555555″ flipbgcolor=”#ffffff” flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonlink=”#” buttontarget=”_self” buttonfontcolor=”#ffffff” buttonbgcolor=”#555555″ iconenable=”enable” imageheight=”100px” imagewidth=”100px” iconspin=”disable” icon=”fa fa-arrow-circle-o-up” iconfontcolor=”#ffffff” iconbgcolor=”#555555″ buttontext=”Read More”]You can make the boxes any color you would like, set backgrounds font colors for all items.[/sh_callout]
[sh_callout callouttype=”standard” title=”Wide Callout” buttontext=”Read More” buttonlink=”http://#” buttontarget=”_blank” icon=”fa fa-glass” bordercolor=”rgba(0,0,0,0.25)” bordersize=”1px” borderradius=”0px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#555555″ flipbgcolor=”#ffffff” flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”disable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”disable” imageheight=”100px” imagewidth=”100px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″]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]
[sh_headerdouble size=”h5″]Flipping Callouts[/sh_headerdouble]
[sh_callout callouttype=”flip” title=”Flipping Callout” buttontext=”Read More” buttonlink=”#” buttontarget=”_self” 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.” bordercolor=”rgba(0,0,0,0.15)” bordersize=”2px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#ffffff” flipbgcolor=”#555555″ flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”enable” imageheight=”100px” imagewidth=”100px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″]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]
[sh_callout callouttype=”flip” title=”Flipping Callout” buttontext=”Read More” buttonlink=”#” buttontarget=”_self” 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.” bordercolor=”rgba(0,0,0,0.15)” bordersize=”2px” borderradius=”4px” backgroundcolor=”#777777″ fontcolor=”#ffffff” flipcolor=”#ffffff” flipbgcolor=”#555555″ flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”enable” imageheight=”100px” imagewidth=”100px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ iconspin=”enable”]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]
[sh_callout callouttype=”flip” title=”Flipping Callout” buttontext=”Read More” buttonlink=”#” buttontarget=”_self” 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.” bordercolor=”rgba(0,0,0,0.15)” bordersize=”2px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#ffffff” flipbgcolor=”#555555″ flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”enable” imageheight=”100px” imagewidth=”100px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″]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]
[sh_callout callouttype=”flip” title=”Image Callout” buttontext=”Read More” buttonlink=”#” buttontarget=”_self” 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.” bordercolor=”rgba(0,0,0,0.15)” bordersize=”2px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#ffffff” flipbgcolor=”#555555″ flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”image” imageheight=”150px” imagewidth=”300px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ image=”203″]You can use images in the Callout boxes and set their height and width to make them fit perfectly![/sh_callout]
[sh_callout callouttype=”flip” title=”Image Callout” buttontext=”Read More” buttonlink=”#” buttontarget=”_self” 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.” bordercolor=”rgba(0,0,0,0.15)” bordersize=”2px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#ffffff” flipbgcolor=”#555555″ flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”image” imageheight=”150px” imagewidth=”300px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ image=”202″]You can use images in the Callout boxes and set their height and width to make them fit perfectly![/sh_callout]
[sh_callout callouttype=”flip” title=”Image Callout” buttontext=”Read More” buttonlink=”#” buttontarget=”_self” 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.” bordercolor=”rgba(0,0,0,0.15)” bordersize=”2px” borderradius=”4px” backgroundcolor=”#ffffff” fontcolor=”#555555″ flipcolor=”#ffffff” flipbgcolor=”#555555″ flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”enable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”image” imageheight=”150px” imagewidth=”300px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″ image=”201″]You can use images in the Callout boxes and set their height and width to make them fit perfectly![/sh_callout]
[sh_callout callouttype=”flip” title=”Flipping Callout” buttonlink=”http://#” buttontarget=”_blank” icon=”fa fa-check” fliptext=”Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” buttontext=”A Button” bordercolor=”rgba(0,0,0,0.15)” bordersize=”1px” borderradius=”5px” backgroundcolor=”#ffffff” fontcolor=”#777777″ flipcolor=”#555555″ flipbgcolor=”#ffffff” flipbordercolor=”rgba(0,0,0,0.15)” buttonenable=”disable” buttonfontcolor=”#ffffff” buttonbgcolor=”#dd4040″ iconenable=”disable” imageheight=”100px” imagewidth=”100px” iconfontcolor=”#ffffff” iconbgcolor=”#dd4040″]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]
[sh_headerdouble size=”h5″]Features[/sh_headerdouble]

[sh_checklist icon=” fa fa-check” type=”unordered” background=”enable”]
[sh_checklist_item]Create Simple or Flipping Callouts.[/sh_checklist_item]
[sh_checklist_item]Use any Font Awesome Icon.[/sh_checklist_item]
[sh_checklist_item]Have a button open in a new window or existing.[/sh_checklist_item]
[sh_checklist_item]Create with or without Icons, or Buttons.[/sh_checklist_item]
[sh_checklist_item]Responsive – these callouts respond with the container.[/sh_checklist_item]
[/sh_checklist]

[sh_checklist icon=” fa fa-check” type=”unordered” background=”enable”]
[sh_checklist_item]Unlimited Background Colors.[/sh_checklist_item]
[sh_checklist_item]Unlimited Font Colors.[/sh_checklist_item]
[sh_checklist_item]Set Border Width, Radius, and Color.[/sh_checklist_item]
[sh_checklist_item]Spin Icons.[/sh_checklist_item]
[sh_checklist_item]Use Images instead of icons.[/sh_checklist_item]
[/sh_checklist]