Callout

 

Callouts allow the user to create stylized boxes for featured content. These boxes give users a visual cue that the information is important and offset the featured content from the rest of the page. Callouts are more customizable than buttons and include title, size and color options as well the ability to hyperlink. Potential uses include important announcements, editorial comment or emergency information. Callouts are styled to comply with the NC State color palette and to meet color contrast accessibility guidelines.

Add a callout to your page

Follow the steps below to add a callout (like this one) to your page.

 

  1. Make sure you have installed the NC State Shortcodes and Shortcake (Shortcode UI) plugins on your site.
  2. Follow the steps to add a shortcode to your page. Select Callout from the options panel.
    Select Callout

     

  3.  Customize your callout.  When including an image with your callout choose images that are 1500×1000 px in size for best results.
    • Callout Body: Enter the main text of your callout. Accepts basic HTML tags
    • Body Font Face: Choose a brand compliant font for your body text
    • Callout Heading: Create a heading or title for your callout (optional)
    • Heading Type: Choose paragraph, H1, H2 or H3 (note: this will not affect the display but will help determine page structure in the code)
    • Text Alignment: Choose left, center or right alignment for body text
    • URL: Enter a URL to make your callout a clickable hyperlink (optional)
    • Callout Type: Choose between Basic Callout, Callout With Image or Callout with Background Image (see examples).
    • Callout Background Color: Choose a brand compliant color for your callout
    • Margins Designates the amount of space on the page above and below your callout
  4. Click the Insert Element button in the bottom right corner of the window.
    Click Insert Element

Callout Examples

Basic Callout

This is a “Basic Callout” with a body and a heading. The text is center aligned.

Callout with Image

This is a Callout with Image

For best results choose images that are 1500×1000 px in size.

Callout with Background Image

This a “Callout with Background Image”