Adding a button#

  • Place {: .button} after a link to turn it into a black button. Eg:
[Click me](#adding-a-button){: .button}

Click me

  • Place {: .button--outline} after a link to turn it into an outline button. Eg:
[Click me](#adding-a-button){: .button--outline}

Click me

Adding a callout box#

  • Place {: .info-box} after a paragraph to turn it into a blue callout box. Use this box to call out extra informational content. Eg:
Please email the course co-ordinator if you have any questions.
{:.info-box}

Please email the course co-ordinator if you have any questions.

  • Place {: .warn-box} after a paragraph to turn it into a gold callout box. Use this box to callout important information or warnings. Eg:
This page is currently under maintenance. Sorry for any inconvenience.
{:.warn-box}

This page is currently under maintenance. Sorry for any inconvenience.

  • Place {: .error-box} after a paragraph to turn it into a red callout box. Use this box to call out critical information. Eg:
If this is an emergency, please stop reading and call 000 immediately.
{:.error-box}

If this is an emergency, please stop reading and call 000 immediately.

Embed a YouTube video#

Get the video ID for the video you would like to embed, write the following, replacing “onYBmwSKmcY” with the ID of the video.


{% include youtube.html id="onYBmwSKmcY" %}

Embed an Instagram post#

  1. Click on the share button and select “copy link”
  2. Identify the part of the link of the formatp/Cg0-5ZJBKTO for a post, or reel/C2N3EwhBcei for a reel. *Note that the letters after the forward slash / will be different for your video.
  3. Copy the below code and replace p/Cg0-5ZJBKTO with the ID you found in your link.

{% include instagram.html ig_id="p/Cg0-5ZJBKTO" %}

Subpage cards#

To show cards for all child pages that sit underneath this page, copy the following code. You can change show_search=true to show_search=false if you don’t wish to include a search bar.


{% include subpage-listing.html show_search=true %}

Icons#

Jekyll FontAwesome small icons#

You can use FontAwesome icons located here: jekyll-fontawesome-svg.

Use:

In the example below:

  • fas says that this icon is in the solid folder.
  • fa-phone is the name of the icon.

{% fa_svg fas.fa-phone %}

These icons are small!

ANU Identity icons#

The ANU identity Hero Icons can also be used on the website. To add one of these icons, copy the following code and replace 001-2/036 with ID numbers of your chosen icon.

For example: If I wanted to use Hi007-black-15.svg I would replace 001-2/036 with 007/15

Note: only the black version of icons is available


{% anu_icon 001-2/036 %}
{% anu_icon 007/15 %}

Hi001-2-black-036: Hi007-black-15:

Adding images#

See Working with images for information on how to upload images to the website for use in your pages.

Adding PDF’s#

To add a pdf, follow the same process as adding an image above, then link the pdf in your page like so:


[display text]({% link assets/path-to-your-file.pdf %})
phone arrow-left bars search times