ITS

Information Technology Services
Information Technology Services

Callouts!

Callouts can be added to page to bring greater attention to a link.  Whatever text is added to the callout can be turned into a hyperlink.

To use the Callouts

  • in the source (HTML) copy and paste the markup for the callout to be inserted.
  • Replace the current text with your text
  • in the a href = " " statement add the url for your text between the quotation marks .  This can also be done in the WYSIWYG editor.
  • exit the source (HTML)
  • save the page.
  • The code will be translated to the results. 

Note:  The Callouts will not display while editing.  Save your page to view the callout.

Basic

<div class="callout">
<p><a href="">WebPublish</a></p>
</div>

Large

Learn more about: WebPublish

<div class="callout-large">
<p>Learn more about:<a href="">WebPublish</a></p>
</div>

Social Media Callouts

<div class="callout-twitter">
<p><a href="">Follow: WebPublish</a></p>
</div>

<div class="callout-facebook">
<p><a href="">Like: WebPublish </a></p>
</div>

<div class="callout-youtube">
<p><a href="">Watch: WebPublish</a></p>
</div>

<div class="callout-flickr">
<p><a href="">Find us: WebPublish</a></p>
</div

<div class="callout-linkedin">
<p><a href="">Connect: WebPublish</a></p>
</div

<div class="callout-blog">
<p><a href="">Read about: WebPublish</a></p>
</div>

<div class="callout-wordpress">
<p><a href="">Read about: WebPublish</a></p>
</div>

<div class="callout-pinterest">
<p><a href="">Follow: WebPublish</a></p>
</div>

<div class="callout-instagram">
<p><a href="">Follow: WebPublish</a></p>
</div>

<div class="callout-tumblr">
<p><a href="">Follow: WebPublish</a></p>
</div>

<div class="callout-rss">
<p><a href="">Follow: WebPublish</a></p>
</div>

Social Media Callouts (Account Variant)

When your callout is simply intended as a link to a social account, you can additionally apply the callout-social-account class to simplify the styling, while keeping the icon for that account. Unlike a normal social media callout, there is no background color or border.

<div class="callout-twitter callout-social-account">
<p><a href="">@WebPublish</a></p>
</div>

Custom Callout

If you'd like to use your own image/icon in a callout, you can do so using a custom callout.

When using your own image, the image should be 32px square.

<div class="callout-custom">
<img alt="" src=""/>
<p><a href="">Check out: WebPublish</a></p>
</div>

Callout Stacks

Standard callouts are designed to display inline (inline-block), however you may wish to display multiple callouts together in a vertical stack. You can do this by simply wrapping the callouts in a with a callout-stack class.

<div class="callout-stack">
<div class="callout-wordpress">
<p><a href="">Read about: WebPublish</a></p>
</div>
<div class="callout-pinterest">
<p><a href="">Follow: WebPublish</a></p>
</div>
<div class="callout-instagram">
<p><a href="">Follow: WebPublish</a></p>
</div>
</div>

Callout Stack Left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Markup

<div class="callout-wordpress">
<p><a href="">Read about: WebPublish</a></p>
</div>

<div class="callout-pinterest">
<p><a href="">Follow: WebPublish</a></p>
</div>

<div class="callout-instagram">
<p><a href="">Follow: WebPublish</a></p>
</div>

<p>Content to display beside the callout stack</p>
</div>

Callout Stack Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Markup

<div class="callout-stack-right">
<div class="callout-wordpress">
<p><a href="">Read about: WebPublish</a></p>
</div>

<div class="callout-pinterest">
<p><a href="">Follow: WebPublish</a></p>
</div>

<div class="callout-instagram">
<p><a href="">Follow: WebPublish</a></p>
</div>

<p>Content to display beside the callout stack</p>
</div>