Callouts

Want to draw attention to select text? Callouts can be a great way to handle this.

Creating a callout

Before creating a callout, you need to have a pane of content created to which you can apply the CSS Properties. From there:

  • Go to the Customize Display tab.
  • Click “Content.”
  • Mouse over and click the gear in the upper-right corner of your content pane.
  • Select “CSS properties” from the drop-down list.
  • In the CSS Class box, type either “callout” or “widecallout."
  • Don't forget to save!

Standard callout

Contact info? Related info? The most amazing announcement in the universe?

Call it out to the right or left of your body copy by writing "callout" in the CSS Properties.

Callout is a smaller box that floats beside other text. Wide callout takes up either the full page width, or the width of the pane in which it appears. To get the desired page layout, you may need to experiment by dragging different panes around to different panels or panes.

Callout Demonstration

Pages within this section features all of our callout styles. The filler text we've chosen is Happy Text from Bob Ross Quote Generator

Let's have a little bit of fun today. We'll play with clouds today. That's why I paint - because I can create the kind of world I want - and I can make this world as happy as I want it. There's not a thing in the world wrong with washing your brush. It's a super day, so why not make a beautiful sky?

Wide callout

Wide callout provides another way to draw attention to copy, and takes the full width of whatever size pane it's in. Write "widecallout" in the CSS Properties. Again, you may need to shift the position of the pane in Panelizer to get it to appear where you want.

Transparent Callout

To add, type "transparent-callout" to the CSS properties.

If there's two big trees invariably sooner or later there's gonna be a little tree. It's hard to see things when you're too close. Take a step back and look. We'll put all the little clouds in and let them dance around and have fun. Maybe there's a happy little bush that lives right there.

You're meant to have fun in life. I guess that would be considered a UFO. A big cotton ball in the sky. Just let your mind wander and enjoy. This should make you happy. In your world you have total and absolute power. Let all these things just sort of happen. If you overwork it you become a cloud killer. There's nothing worse than a cloud killer. How do you make a round circle with a square knife? That's your challenge for the day. Life is too short to be alone, too precious. Share it with a friend. Be so very light. Be a gentle whisper. Poor old tree.

Card Callout

To add, write "card-callout" in the CSS properties. 

If there's two big trees invariably sooner or later there's gonna be a little tree. It's hard to see things when you're too close. Take a step back and look. We'll put all the little clouds in and let them dance around and have fun. Maybe there's a happy little bush that lives right there.

You're meant to have fun in life. I guess that would be considered a UFO. A big cotton ball in the sky. Just let your mind wander and enjoy. This should make you happy. In your world you have total and absolute power. Let all these things just sort of happen. If you overwork it you become a cloud killer. There's nothing worse than a cloud killer. How do you make a round circle with a square knife? That's your challenge for the day. Life is too short to be alone, too precious. Share it with a friend. Be so very light. Be a gentle whisper. Poor old tree.

Wide Card Callout

To add, write "card-widecallout" in the CSS properties.

Shadow Callout

If there's two big trees invariably sooner or later there's gonna be a little tree. It's hard to see things when you're too close. Take a step back and look. We'll put all the little clouds in and let them dance around and have fun. Maybe there's a happy little bush that lives right there.

You're meant to have fun in life. I guess that would be considered a UFO. A big cotton ball in the sky. Just let your mind wander and enjoy. This should make you happy. In your world you have total and absolute power. Let all these things just sort of happen. If you overwork it you become a cloud killer. There's nothing worse than a cloud killer. How do you make a round circle with a square knife? That's your challenge for the day. Life is too short to be alone, too precious. Share it with a friend. Be so very light. Be a gentle whisper. Poor old tree.

Wide Shadow Callout

To add, write "shadow-widecallout" in the CSS properties.