Skip to main content

Title icon

The [title-icon] shortcode places a circular image to the left of the title.

[title-icon heading-tag='h3']Your heading content[/title-icon]

Your heading content

The grey circle indicates that the type attribute has not been set. The types available by default are as follows:

Type alt tag
aboriginal-flag First Nations content
torres-strait-flag Torres Strait Island content
quiz-icon blank

For quiz, a blank alt tag is used as it's likely the title itself will describe what the icon denotes. This can be altered by adding an alt attribute.

In addition, the [heading-tag] attribute allows the size of the heading to change. The default is h2

You can also adjust the [heading-size]. This attribute allows the physical size of the heading to change and leave the semantic tag specified above. The options are h2, h3, h4, h5, h6.

Lastly, adding an [title-icon] attibute adds an id, so code can jump directly to the content via a hash link: learninglab.rmit.edu.au/#my-unique-id. make sure the id is unique.

Examples

Banksia straws and seed yandying

Adjust the sizing

Melting turtle fat into oil

Test your skills

[title-icon type="aboriginal-flag"]Banksia straws and seed yandying[/title-icon]
[title-icon heading-tag="h2" heading-size="h3" type="quiz-icon" alt="Quiz"]Adjust the sizing[/title-icon]
[title-icon heading-tag="h3" type="torres-strait-flag" id="turtle-info"]Melting turtle fat into oil[/title-icon]
[title-icon heading-tag="h4" type="quiz-icon" alt="Quiz"]Test your skills[/title-icon]

Adding custom images

It is possible to add custom images (both in light and dark mode), although this should be used sparingly. More preset types can be added to the base css if needs arise. To do this, first add the type attribute and give it a unique name. Then, use the img attribute. You can also add the img-dark attribute if you require an alternative dark mode version of the image.

Custom image example

[title-icon type="custom-image-example" img="https://rmitlibrary.github.io/cdn/learninglab/interactive/ab-test/ab3-quiz-academic-style/images/star-silver@2x.png" img-dark="https://rmitlibrary.github.io/cdn/learninglab/interactive/ab-test/ab3-quiz-academic-style/images/star-gold@2x.png"]Custom image example[/title-icon]

Keywords