We use necessary cookies to make our website work. We'd also like to use optional cookies to understand how you use it, and to help us improve it.

For more information, please read our cookie policy.

Blockquote

Example

We are a public corporation, established by Parliament in 1972 as an independent specialist aviation regulator.

Markup

                        
<div class="c-rich-text">
   <blockquote cite="https://www.caa.co.uk/Our-work/About-us/Our-role/">We are a public corporation, established by Parliament in 1972 as an independent specialist aviation regulator.
   </blockquote>
</div>
                            
                        

Guidance

The blockquote element should only be used for its intended purpose - to provide an extended quotation from a longer passage of text, not to apply additional visual styling to text. Use the cite attribute to provide the quotation source URL.

Font

Example

"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;

"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;

"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;

"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;

"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;

Markup

                        
<div class="c-rich-text">
   <h1> "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;</h1>
   <h2> "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;</h2>
   <h3> "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;</h3>
   <h4> "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;</h4>
   <h5> "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;</h5>
   <h6> "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;</h6>
</div>
                            
                        

Guidance

  • The default font is Roboto, falling back to Helvetica Neue, then Helvetica, then Arial.

Headings

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Markup

                        
<div class="c-rich-text">
   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <h3>Heading 3</h3>
   <h4>Heading 4</h4>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
</div>
                            
                        

Paragraphs

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinciduntut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Markup

                        
<div class="c-rich-text">
   <p>Lorem ipsum dolor sit amet, <a href="https://www.caa.co.uk">
consectetuer adipiscing elit</a>, sed diam nonummy nibh euismod tinciduntut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
   </p>
</div>
                            
                        

Unordered list

Example

  • First item
  • Second item
  • Third item

Markup

                        
<div class="c-rich-text">
   <ul>
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
   </ul>
</div>
                            
                        

Ordered list

Example

  1. First item
  2. Second item
  3. Third item

Markup

                        
<div class="c-rich-text">
   <ol>
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
   </ol>
</div>
                            
                        

Ordered list - lowercase letters

Example

  1. First item
  2. Second item
  3. Third item

Markup

                        
<div class="c-rich-text">
   <ol type="a">
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
   </ol>
</div>
                            
                        

Ordered list - lowercase Roman numerals

Example

  1. First item
  2. Second item
  3. Third item

Markup

                        
<div class="c-rich-text">
   <ol type="i">
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
   </ol>
</div>