Site theme elements

• External link
• Email address
• PDF document
• PDF document on a different website
• DOC, DOCX, RTF document
• DOC, DOCX, RTF document on a different website
• XLS, XLSX workbook
• XLS, XLSX workbook on a different website
• PPT, PPTX presentation
• PPT, PPTX presentation on a different website
• ZIP file
• ZIP file on a different website
• Linked to the NLA Web Archive (these are handled differently on Publications listing, but appear the same)
• Commonwealth Procurement Framework - Currently a WIP

 Headings are available from the dropdown in the editor.

Footnotes are classes to adjust the size of text below the standard 14 pixels and should be used sparingly.

Indenting like for like

To indent of the same type, so bullets on bullets, or subnumbers off numbers, press Tab to indent a list to the right.

When you are done with your indented list, press Shift + Tab to move the indent back one to the left.

Indenting with different types of lists

Lists can be indented between the different styles of lists. It is very similar to the indented examples in the above table, but it is important to take note of the anatomy in how 

The easiest way to switch between bullet/numbers is to add in your entries, then press Tab to indent where you want to change, click the bullet or number list and the indented entry will change, leaving the rest of the list in the other format.

When a list isn't a list

Sometimes a list looks like a list, but isn't actually a list. This normally happens when:

• Lists don't come over properly from products like Word or Outlook
• Lists weren't actually made with bullet points or numbered lists to begin with

Alerts are available from the Styles dropdown:

Cards can be used similar to alerts, helping delineate pieces of content, but aren't as prominent as alerts.

• card is the overall container class
• card-header is where the title for the card goes
• card-body is where we put the content

These can be used where there is a specific need to colour cells, specific divs and similar.

These image styles manipulate the presentation of the image they are applied to in the browser. It does not transform the attributes of the file itself.

These classes come included with Bootstrap 4.

Image style	Example
Image without any style
Image position - left Positions the image to the left of its parent container Image sit to the left by default, so shouldn't be needed too often. <img src="image.jpg" class="float-left" />
Image position - right Positions the image to the right of it parent container <img src="image.jpg" class="float-right" />
Image position - centre Positions the image in the centre of its parent container <img src="image.jpg" class="mx-auto d-block" />
Responsive image Makes the image fill the height of its parent container, and scale the image relative to its dimensions Image will scale up and down relative to the screen and container heights and widths <img src="image.jpg" class="img-fluid" />
Image shape - rounded corners Adds rounded corners to the image <img src="image.jpg" class="rounded" />
Image shape - circle Adds a circle overlay to the image <img src="image.jpg" class="rounded-circle" />
Image shape - thumbnail Adda small border and some white space padding around the image <img src="image.jpg" class="img-thumbnail" />
Combining position and shape You can use a combination of shape and position to create an effect <img src="image.jpg" class="float-right rounded-circle" />

Purus sit amet volutpat consequat. Viverra suspendisse potenti nullam ac tortor. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Venenatis a condimentum vitae sapien pellentesque habitant. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Pulvinar neque laoreet suspendisse interdum consectetur libero id. Faucibus ornare suspendisse sed nisi lacus sed viverra. Id eu nisl nunc mi ipsum faucibus vitae aliquet. Iaculis nunc sed augue lacus. Sed enim ut sem viverra aliquet eget sit amet tellus.

Buttons are styled from Bootstrap. They allow a set of styles 

Magna fringilla urna porttitor rhoncus. Mauris vitae ultricies leo integer malesuada nunc vel risus. Eget velit aliquet sagittis id consectetur purus ut. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien.

Bootstrap 4 (on this site) uses a grid system for positioning content. Information and examples can be found on the Grid system page on the Bootstrap 4 website.

Modals should be used when pages utilise the left and/or right hand side columns, but there isn't enough space on screen to best represent information. It can also be used to highlight specific content.

<div class="content-modal-button" data-target-cm="#cm-full-width">content to appear in modal</div>

Table

Images

Text

This paragraph does not have the class around it - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut porttitor leo a diam sollicitudin tempor id eu. Scelerisque varius morbi enim nunc faucibus. Semper eget duis at tellus at. Interdum velit laoreet id donec ultrices tincidunt arcu. Odio euismod lacinia at quis risus sed. Tristique senectus et netus et malesuada.

This paragraph does not have the class around it - Sollicitudin aliquam ultrices sagittis orci. Tincidunt dui ut ornare lectus. Sem viverra aliquet eget sit. Donec adipiscing tristique risus nec feugiat in fermentum. In egestas erat imperdiet sed. Quisque egestas diam in arcu. Quis viverra nibh cras pulvinar mattis. Tellus id interdum velit laoreet id. Dignissim convallis aenean et tortor at risus. Risus sed vulputate odio ut enim blandit. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. In est ante in nibh mauris.

RMG tables have a different default style compared to the rest of the site. This is based around the traditional table styles found in the print versions of these documents

The following classes allow us to providing padding to cells, containers and content

Left or Right

Top or Bottom

See all icons - Font Awesome | Uploaded Icons

These are good for scenarios where there a table row colours that might not work with default green. Check the tables and cell styling above first - all of those have been checked for accessibility purposes and should server most situations.

• Black - <a href=#" class="link-override-black">Link</a>
• Blue - <a href=#" class="link-override-blue">Link</a>
• Citrus - <a href=#" class="link-override-citrus">Link</a>
• Purple - <a href=#" class="link-override-purple">Link</a>
• Salmon - <a href=#" class="link-override-salmon">Link</a>

Accordions can be used to stop pages from getting too large by hiding the biggest offenders, such as images and tables, inside a tab you have to click to open.

<div class="dynamic-accordion">
<div data-accordion-header="Test Accordion 1">
<p>Test Paragraph</p>
</div>
<div data-accordion-header="Test Accordion 2">
<p>Test Paragraph</p>
</div>

Codes

<p> 
   Start of accordion 
</p> 
<div class="paragraph-accordion"> 
   <p> 
       <a class="btn btn-primary btn-accordion collapsed" href="#collapseExample" data-toggle="collapse" aria-expanded="false" role="button" aria-controls="collapseExample">This is accordion heading</a> 
   </p> 
   <div class="collapse accordion-content" id="collapseExample"> 
       <div class="card card-body"> 
           <p> 
               This is accordion content 
           </p> 
       </div> 
   </div> 
</div> 
<p> 
   End of accordion 
</p>

Presentation 

Start of accordion

End of accordion