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.

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!

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.

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.