WebPageLayout - Annotation

Add Coloured Blocks to Content

We can use the blocks below anywhere to highlight and illustrate various points. The examples show the formatting required to use them

Note

This is an interesting and useful bit of information to be aware of.

It should be treated as a single block.

Tip

This is a helpful bit of information that may be useful.

Warning

This is a warning and a vital bit of information to know.

Example for Tip

<div class='tip'><div class='inner'>
    <div class='h'>Tip</div>
    <p>This is a helpful bit of information that may be useful.</p>
</div></div>

Example for Example for Tip

<div class='code'><div class='inner'>
    <div class='h'>Example for Tip</div>
    <pre>
&lt;div class='tip'&gt;&lt;div class='inner'&gt;
    &lt;div class='h'&gt;Tip&lt;/div&gt;
    &lt;p&gt;This is a helpful bit of information that may be useful.&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;</pre>
</div></div>