Site design elements

The content is kept clean, platform free(ish) ie written in markdown with plugin calls (eg { % plugincall % } ) to add style and functionality.

To achieve this the site has some straightforward style rules

  • Only markdown and plugin calls to be used in content files. No html or other code.
  • Content spacing, padding and margins handled by site wide styling, not local special characters etc.
  • Style changes proposed, agreed upon and implemented by team for site wide styling, style guide edited and then style used in site as per style guide.
  • For plugins, Bootstrap used in preference to custom html/css/javascript at every opportunity.

Markdown elements

Checklist

  • Are all headings simple, straightforward and no more than five words?
  • Are all headings in sentence case?
  • Do headings begin at heading level 2 and cascade from there?
  • Are any headings level 4 or beyond? Please avoid using anything other than level 2 or 3 headings.
  • Has section numbering been removed (unless content is a step-by-step guide or listicle)?
  • Aside from a question mark, there are no special characters in the heading?

Note: On a module markdown page, each instance of a Heading 2 will appear automatically in the dropdown menu for that module, except where nomenuheading plugin used.

How to

Markdown…

## Heading 2  

### Heading 3  

Rendered as…

Heading 2

Heading 3

How to

Markdown…

{% nomenuheading This Heading 2 is not required for Menus - sidebar or dropdowns %}

Rendered as…

Checklist

  • Is the guide adequately introduced, including a ‘what you will learn’ or ‘what you will do’ section in the introductory paragraph?
  • Does content follow the University’s written style guide, particularly regarding University terms, numbers and dates?
  • Is the content inclusive? (i.e., gender neutral pronouns, culturally diverse names, Indigenous content or examples, examples across faculties etc.)
  • Is the tone friendly and conversational?
  • Has plain language been used throughout the guide?
  • Has all jargon been removed or explained?
  • Are all acronyms spelled out in the first instance?
  • Has the active voice been used throughout the guide?
  • Have all abbreviations been removed or expanded, including e.g. and i.e.?
  • Do all sentences have minimal punctuation?
  • Do references within the guide link directly to the source material?
  • Does the guide include information at the end of the guide (grey box highlight/aside) linking it to further information, additional related resources, or Library help?

How to

Your first paragraph here, followed by empty line.

Your second paragraph here, followed by empty line.

Third paragraph here. The University is a university and the Library, also known as T.L. Robertson Library, is a library.

Checklist

  • Is bold used for only the first mention of a concept or theory, or before the definition of a word?
  • Have italics been used according to the University’s content formatting style?
  • Have names of all other Library guides mentioned been italicised?
  • Has all text underlining been removed, except for hyperlinks?
  • Are all examples, citations and quotes in block quotes?
  • Has all coloured text been removed?

How to

Markdown…


Some text **bold text here** some more text   

Some text _italicised text here_ some more text.   

Some text **_bold and italicised text here_** some more text (order of symbols is important here.)   

Rendered as…

Some text bold text here some more text

Some text italicised text here some more text.

Some text bold and italicised text here some more text (order of symbols is important here.)

How to

Markdown…

> For too many of us it’s become safer to retreat into our own bubbles, whether in our neighbourhoods, or on college campuses, or places of worship, or especially our social media feeds, surrounded by people who look like us and share the same political outlook and never challenge our assumptions

Rendered as…

For too many of us it’s become safer to retreat into our own bubbles, whether in our neighbourhoods, or on college campuses, or places of worship, or especially our social media feeds, surrounded by people who look like us and share the same political outlook and never challenge our assumptions

How to

Markdown…

\:smiley\: \:ghost\: \:rainbow\: \:bowling\:  

Rendered as…

:smiley: :ghost: :rainbow: :bowling:

Checklist

  • Are all links descriptive and able to be understood when read on their own?
  • Have any URLs in text been replaced with descriptive hyperlinks?

How to

Markdown…


[onscreen LINK TEXT](url)  
  
For example, [finding information guide](https://libguides.library.curtin.edu.au/uniskills/assignment-skills/finding-information/), or  

please [email the Makerspace](mailto:makerspace@curtin.edu.au?subject=3D Printer boookings!&body=I would like to take advantage of the 3D printing facilities in the Makerspace.) 

Rendered as…

onscreen LINK TEXT

For example, finding information guide, or

please email the Makerspace

Checklist

  • Are list items sorted alphabetically or in order of importance?
  • Is there only one sentence per dot point?
  • If list consists of full sentences, does each list item include a capital at the beginning and period at the end?
  • If list consists of part sentences, does each list item begin with a lowercase letter, with only the final item possessing a period at the end?
  • Have all commas and semicolons been removed from the end of list items?
  • Only use markdown in lists - avoid using fillwithpad etc. For images, use the imagelist plugin form below

How to

Markdown…


### Unordered list

- First item 
- Second item 
- Third item 

### Numbered list

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

### Checklist (passive - standard markdown)

- [ ]  First item 
- [x]  Second item 
- [ ]  Third item 

### Checklist (active - bootstrap)

{% bscheckbox Are [direct quotations](/referencing/apa7/in-text) enclosed in quote marks? %}  

{% bscheckbox Does each in-text citation have a corresponding reference list entry? %}  

Rendered as…

Unordered list

  • First item
  • Second item
  • Third item

Numbered list

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

Checklist (passive - standard markdown)

  • First item
  • Second item
  • Third item

Checklist (active - bootstrap)

OK, it’s not exactly markdown, but the static sites do make use of MathJax to render mathematics symbols and equations. It’s very cool.

Some of the checklist items below are to ensure correct rendering to the epub or pdf versions of the site.

Checklist

- Does every instance begin with \\( or \\[ or $$, and end with \\) or \\] or $$?
- Has "aligned" been used rather than "eqnarray" for multi-line equations? 
  Search for begin(aligned) in gitlab for UniSkills to find many examples to follow.
- Does the end of each line in a multi-line equation include \\\ with two spaces after?
- If the maths invloves $'s (ie money), ensure the $ is preceeded by \\ eg \\(\\$5\\)

How to

  • use the regular markdown list element ‘-‘, and add a liststyle plugin at the bottom of the list, with the same indentation as the list
  • specifying the style of nested lists is possible too
  • possible list styles are
    • decimal
    • decimal-leading-zero
    • lower-alpha
    • upper-alpha
    • lower-roman
    • upper-roman
    • none
    • disc
    • circle
    • square

Note: Spacing is very very very important here. Where nesting a list inside another one, let’s call them parent and child lists, line up the child’s dashes with the text of the parent item.


Markdown…


- Coffee
  - Espresso
  - Cappuccino
  - Latte
  {% liststyle upper-alpha %}
- Tea
  - Earl Grey
  - English Breakfast
  {% liststyle upper-alpha %}
{% liststyle upper-roman %}


Rendered as…

  • Coffee
    • Espresso
    • Cappuccino
    • Latte
  • Tea
    • Earl Grey
    • English Breakfast

and when the predefined styles are not quite suitable…

Markdown…


- Coffee
  - 1.1. Espresso
  - 1.2. Cappuccino
  - 1.3. Latte
  {% liststyle none %}
- Tea
  - 2.1. Earl Grey
  - 2.2. English Breakfast
  {% liststyle none %}
{% liststyle decimal %}  

Rendered as…

  • Coffee
    • 1.1. Espresso
    • 1.2. Cappuccino
    • 1.3. Latte
  • Tea
    • 2.1. Earl Grey
    • 2.2. English Breakfast

How to

Only “UniSkills” and “Library” colours can be used - by name.

  • library_raspberry #D20347
  • library_violet #8B23F7
  • library_azure #227AE7
  • library_jade #01AC44
  • library_tangelo #F47F39
  • library_fuchsia #E323F7
  • library_aqua #3CE9C6
  • library_lime #96F75E

Markdown…

The {% textcolour library_raspberry %}**sun**{% textcolourend %} (subject) is {% textcolour library_jade %}**shining**{% textcolourend %} (predicate)

Rendered as…

The sun (subject) is shining (predicate)


and (strangely)

Markdown…


{% centrerow%}{% textcolour library_azure %}**Urgent**{% centrerowend %}
  

Rendered as…

Urgent

How to

Markdown…

superscript numbers in-text, eg {% superscript %}1-4,10,12{% superscriptend %}  

Rendered as…

superscript numbers in-text, eg 1-4,10,12

Checklist

  • Are document hyperlinks descriptive and include the file size immediately after the link?
    • Test file [PDF, 2MB]
  • Does the document’s title accurately capture what the document is about?
  • Do document headers use the Library brand?
  • Does document text meet our written style standards (see “Text Content” above)?
  • Have documents been tested for accessibility prior to being uploaded?
  • Have the document’s property fields been filled out? (File -> Properties)
  • Does the document have clear copyright/reuse conditions on it?

How to

Markdown…


{% file_icon image %} Image/Picture  

{% file_icon audio %} Audio  
  
{% file_icon video %} Video (Downloadable Video File)  

{% file_icon camera %} Camera (Online Video Stream)  

{% file_icon endnote %} Endnote  
  
{% file_icon word %} Word  
  
{% file_icon excel %} Excel  
  
{% file_icon pdf %} PDF  

{% file_icon spsssample %} SPSS Sample  
  
{% file_icon phone %} Phone  
  
{% file_icon email %} Email  
  
{% file_icon twitter %} Twitter  
  
{% file_icon facebook %} Facebook  
  
{% file_icon instagram %} Instagram  

{% file_icon file %} File  

{% file_icon info %} Info

{% file_icon readme %} Readme

{% file_icon tickbox %} Tickbox

{% file_icon emptytickbox %} Empty Tickbox

{% file_icon calendar %} Calendar

{% file_icon chat %} Chat

{% file_icon feedback %} Feedback

{% file_icon map %} Map

{% file_icon graphic-yes %} Yes (symbol)

{% file_icon graphic-no %} No (symbol)

{% file_icon graphic-query %} Query (symbol)

{% file_icon graphic-ask %} Ask (symbol)

{% file_icon extratips %} Extra tips

Rendered as…

Image/Picture

Audio

Video (Downloadable Video File)

Camera (Online Video Stream)

Endnote

Word

Excel

PDF

SPSS Sample

Phone

Email

Twitter

Facebook

Instagram

File

Info

Readme

Tickbox

Empty Tickbox

Calendar

Chat

Feedback

Map

Yes (symbol)

No (symbol)

Query (symbol)

Ask (symbol)

Extra tips

Checklist

  • Are all images CC or royalty-free and have they been attributed correctly?
  • Has alternative text been provided for all non-decorative images?
  • If images contain text, has an additional accessible option been provided?
  • Are all images meaningful?
  • Do all images meet the University’s brand style for imagery?
  • floats are also possible
  • for images appearing in lists, replace image in the plugin calls with imagelist ie imagelist, imagelistalt, imagelistsrc, imagelistend.

How to

Width can be 5%, 10%, 15% … 90%, 95%, 100% as w-5, w-10, w-15 … w-90, w-95, w-100 Image center justified: mx-auto Image left justified: me-auto Doesn’t appearing on mobile: d-none d-sm-block (leave out for image to appear on mobile)


Markdown…


{% image img-fluid w-50 mx-auto d-none d-sm-block %}{% imagealt Include an alternate text description of the image here %}{% imagesrc /assets/images/cropped-23-things-web-icon2.png %}{% imageend %}

{% image img-fluid w-60 me-auto %}{% imagealt Include an alternate text description of the image here %}{% imagesrc /assets/images/cropped-23-things-web-icon2.png %}{% imageend %}
  

Rendered as…

Include an alternate text description of the image here

Include an alternate text description of the image here


{% image img-fluid w-30 float-start pe-3 py-3 d-none d-sm-block %}{% imagealt Include an alternate text description of the image here %}{% imagesrc /assets/images/cropped-23-things-web-icon2.png %}{% imageend %}  

Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar.
  
{% image img-fluid w-30 float-end ps-3 py-3 d-none d-sm-block %}{% imagealt Include an alternate text description of the image here %}{% imagesrc /assets/images/cropped-23-things-web-icon2.png %}{% imageend %}  

Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them.  

Include an alternate text description of the image here

Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar.

Include an alternate text description of the image here

Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them.

Checklist

  • Are activities compatible across devices?
  • Does the H5P add value to the module?
  • Do H5P activities test knowledge rather than teach it?

How to

Markdown…

{% h5p https://curtin.h5p.com/content/1291021635625721749 %}  

Rendered as…

Checklist

  • Do tables have a defined header row?
  • Is the table readable both visually and with a screen reader, or has an alternative format been provided?

How to

  • seriously important to have a blank line above and below {% table %} and below {% tableend %} lines
  • to align columns, use colons and dashes under header row
  • row separator - begins with a series of dashes after a pipe
  • group/footer separator - begins with a series of equal signs after a pipe
  • can add other markdown such as bold or italics
  • can use other plugins too
  • Bootstrap formatting options added with preceding dot
    • .table-striped
    • .table-bordered, .table-borderless
    • .table-dark
    • .table-sm or smaller table

Basic table

Markdown…


{% table .table-bordered .w-100 %}
|Column Left Justified|Column Centre Justified|Column Right Justified| 
|:--------------------|:---------------------:|---------------------:| 
|Row 1-1              |**Row 1-2**               |Row 1-3               | 
|Row 2-1              |_Row 2-2_              |Row 2-3               | 
|--- 
|Row 3-1              |Row 3-2                |Row 3-3               | 
|Row 4-1              |Row 4-2                |Row 4-3               | 
|=== 
|Footer 1-1           |Footer 1-2             |Footer 1-3            | 
|Footer 2-1           |Footer 2-2             |Footer 2-3            | 
{% tableend %}
  

Rendered as…

Column Left Justified Column Centre Justified Column Right Justified
Row 1-1 Row 1-2 Row 1-3
Row 2-1 Row 2-2 Row 2-3
Row 3-1 Row 3-2 Row 3-3
Row 4-1 Row 4-2 Row 4-3
Footer 1-1 Footer 1-2 Footer 1-3
Footer 2-1 Footer 2-2 Footer 2-3

Advanced table

  • for lists in cells, use tablelist as shown
  • for multiple lines in a cell, use tablelinebreak as shown

Markdown…


{% table .table-striped .w-100 %}
|Column1                                                       |Column2                     |Column3                    | 
|:-------------------------------------------------------------|:--------------------------:|--------------------------:| 
|Row 1-1 line 1{% tablelinebreak %}Row 1-1 line 2              |Row 1-2                     |Row 1-3                    |
|Row 2-1                                                       |Row 2-2                     |Row 2-3                    | 
|--- 
|A list of rows {% tablelist |Row 3-1-1|Row 3-1-1|Row 3-1-1| %}|Row 3-2                     |Row 3-3                    | 
|{% file_icon audio %} Row 4-1                                 |{% file_icon video %}Row 4-2|{% file_icon word %}Row 4-3| 
|=== 
|Footer 1-1                                                    |Footer 1-2                  |Footer 1-3                 | 
{% tableend %}
  

Rendered as…

Column1 Column2 Column3
Row 1-1 line 1
Row 1-1 line 2
Row 1-2 Row 1-3
Row 2-1 Row 2-2 Row 2-3
A list of rows
  • Row 3-1-1
  • Row 3-1-1
  • Row 3-1-1
Row 3-2 Row 3-3
Row 4-1 Row 4-2 Row 4-3
Footer 1-1 Footer 1-2 Footer 1-3

Checklist

  • Do videos include a Library-branded video card at the beginning and end?
  • Is the video name on YouTube in the following format: Topic Category e.g. Critical reading Assignment skills
  • Does the video have captions, a transcript, or the same content presented in a different format?
  • Do all videos have controls such as play/pause, captions, volume?
  • Do longer videos utilise chapters to segment content?

How to

Video aspect ratio (Width:Height) as 1:1 or 4:3 or 16x9 or 21x9 and width (percentage of page column) as w-5 thru w-95

Markdown…

{% youtube 16x9 w-75 %}  
{% youtubelink https://www.youtube.com/embed/DaqWYyhkZl0 %}  

Rendered as…




Checklist

  • Do videos include a Library-branded video card at the beginning and end?
  • Is the video named in the following format: Topic Category e.g. Critical reading - Assignment skills
  • Does the video have captions, a transcript, or the same content presented in a different format?
  • Do longer videos utilise chapters to segment content?

How to

  • video must be p4 format and stored in /assets/videos
  • poster must be jpg and subtitle must be vtt, and both must have same filename as video file

Markdown…

{% libtube KteXhdNujhw %}  

Rendered as…



How to

Markdown…

{% iframeratio 1x1 %}  
{% iframesource https://forms.office.com/Pages/ResponsePage.aspx?id=1wx0WmhXCU2uE_cGsJ-iLPfI67OqnBlBs9RkFoXaMUxUOFJPMEQwOVVBS1Q0WVIxUTgwUkJSUzlYSy4u&embed=true %}  

Rendered as…

Checklist

  • Can all infographics be read logically with a screen reader, or has an alternative format been provided?
  • Does the infographic meet brand requirements of fonts, colours, images/graphics, etc.?

Checklist

  • Can all graphs be read logically with a screen reader, or has an alternative format been provided?
  • Does the graph meet brand requirements of fonts, colours, etc.?

Page structure plugin elements

How to

Markdown…

{% centrerow %}References{% centrerowend %}  

Rendered as…

References

How to

Markdown…

{% hangingindent %}  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
{% hangingindentend %}  

Rendered as…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How to

Markdown…


{% apa7tablefigurespacing %}
**Table 1** 
{% apa7tablefigurespacingend %}

_Participant Information of Dog Owner Interviews about Dog Walking_  
 
{% table .table-bordered .w-100 %}
|**Gender(s)**|**Age(s)**|**Dog(s)**|
|:----:|:----:|:----:|
|F |51 |Poodle/spaniel{% tablelinebreak %}Border Terrier|
|M{% tablelinebreak %}F|62{% tablelinebreak %}49|Alaskan Malamute|
|M{% tablelinebreak %}F|69{% tablelinebreak %}Unknown|Labrador|
|---
{% tableend %}  

{% apa7tablefigurespacing %}
_Note._ Adapted from “I Walk my Dog Because it Makes me Happy: A Qualitative Study to Understand Why Dogs Motivate Walking and Improved Health,” by C. Westgarth, R. M. Christley, G. Marvin and E. Perkins, 2017, _International Journal of Environmental Research and Public Health, 14_(8), Article 936 ([https://doi.org/10.3390/ijerph14080936](https://doi.org/10.3390/ijerph14080936)). CC BY.  
{% apa7tablefigurespacingend %}

Rendered as…

Table 1

Participant Information of Dog Owner Interviews about Dog Walking

Gender(s) Age(s) Dog(s)
F 51 Poodle/spaniel
Border Terrier
M
F
62
49
Alaskan Malamute
M
F
69
Unknown
Labrador

Note. Adapted from “I Walk my Dog Because it Makes me Happy: A Qualitative Study to Understand Why Dogs Motivate Walking and Improved Health,” by C. Westgarth, R. M. Christley, G. Marvin and E. Perkins, 2017, International Journal of Environmental Research and Public Health, 14(8), Article 936 (https://doi.org/10.3390/ijerph14080936). CC BY.

Markdown…


{% apa7tablefigurespacing %}
**Figure 2** 
{% apa7tablefigurespacingend %}

_Fossil Tooth Whorl of Ancient Shark_

{% image img-fluid w-75 mx-auto %}{% imagealt Width 75%/Centre justified/the Curtin Library 23 Things logo %}{% imagesrc /assets/images/cropped-23-things-web-icon2.png %}{%imageend %} 

{% apa7tablefigurespacing %}
_Note._ From “Great White Shark: Carcharodon Carcharias,” by Smithsonian Institution, 2018 ([https://ocean.si.edu/ocean-life/sharks-rays/great-white-shark](https://ocean.si.edu/ocean-life/sharks-rays/great-white-shark)). Copyright 2018 by Chip Clark/Smithsonian Institution.
{% apa7tablefigurespacingend %}
  

Rendered as…

Figure 2

Fossil Tooth Whorl of Ancient Shark

Width 75%/Centre justified/the Curtin Library 23 Things logo

Note. From “Great White Shark: Carcharodon Carcharias,” by Smithsonian Institution, 2018 (https://ocean.si.edu/ocean-life/sharks-rays/great-white-shark). Copyright 2018 by Chip Clark/Smithsonian Institution.

How to

Markdown…

{% whatyouwilllearn %}  

Rendered as…

What you will learn

Checklist

  • Have all asides been properly labelled with one of the following categories ?
    • Fast forward – indicates content appearing later in the guide. Must link to future content page.
    • Rewind – reminder of content that appeared previously in the guide. Must link to past content page.
    • Important! – crucial notes that students need to remember about the topic
    • More information – a brief expansion on the content in the guide
    • What if? – a potential scenario a student may encounter and how to navigate it
    • Checklist – a brief list of things to check off when doing a task
    • Step-by-step – the exact order of things needed to be done to complete a specific task
    • Connect – link/information to an external organisation/s that discuss or help with this thing
    • Further material - additional resources on the content, including external sites and videos
    • Top tip – additional information that may assist with making things easier/more efficient, but is not essential to the topic

How to

Markdown…

{% fillwithpad %}  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
{% fillwithpadend %}  

Rendered as…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How to

Markdown…

{% headinghighlight #### Hello world %}  

Rendered as…

Hello world

How to

  • The heading level of the Accordion is included as a series of #’s as per regular headings.
  • In this example it is #### as it followed a Level 3 Heading. It needs to be changed to suit the accordions actual place in the heading hierarchy
  • If the accordion will be linked to from elsewhere in the site then include a unique description of the accordion in {% accordion Add unique name here %}
  • to link to an accordion item it needs to be visible when the page is first loaded, ie not included in a Doctool tab which is not active when the page is first loaded.

Markdown…


{% accordion Unique name included here %}  
{% accordionitem #### Item 1 heading %}  
Item 1 content

{% hangingindent %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{% hangingindentend %}

{% image img-fluid w-25 mx-auto d-none d-sm-block %}{% imagealt Alt text %}{% imagesrc /assets/images/cropped-23-things-web-icon2.png %}{% imageend %}
{% accordionitemend %}  
{% accordionitem #### Item 2 heading  %}  
Item 2 content
{% accordionitemend %} 
{% accordionitem #### Item n heading %}  
Item n content
{% accordionitemend %}  
{% accordionend %}  

Rendered as…

Item 1 content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Alt text

Item 2 content

Item n content

How to

Markdown…


{% bsgrid %}
{% bsgridcolumn col-8 %}
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other.

For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme.
{% bsgridcolumnend %}
{% bsgridcolumn col-4 %}
{% image img-fluid w-100 mx-auto d-none d-sm-block %}{% imagealt The Curtin Library 23 Things logo %}{% imagesrc /assets/images/cropped-23-things-web-icon2.png %}{% imageend %}
{% bsgridcolumnend %}
{% bsgridend %}
  

Rendered as…

Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other.

For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme.

The Curtin Library 23 Things logo

How to

  • The heading level of the Doctool tabs are included as a series of #’s as per regular headings.
  • In this example it is #### as it followed a Level 3 Heading. It needs to be changed to suit the doctool’s tabs actual place in the heading hierarchy
  • If the Doctool tabs will be linked to from elsewhere in the site then include a unique description of the Doctool in {% doctool Add unique name here %}
  • to link to a Doctool tab it needs to be visible when the page is first loaded, ie not included in an accordion item which is collapsed when the page is first loaded.

Markdown…


{% doctool Unique Title included here %}
{% doctoolfirsttitle Item 1 in menu %}
{% doctooltitle Item 2 in menu %}
{% doctooltitle Item n in menu %}
{% doctooltitlesend %}
{% doctoolfirstcontent Item 1 in menu %}

#### Item 1 heading added manually if required
---

1st item's content.

##### Lorem ipsum 1 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{% doctoolcontentend %}
{% doctoolcontent Item 2 in menu %}
2nd item's content.

#### Lorem ipsum 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{% doctoolcontentend %}
{% doctoolcontent Item n in menu %}
nth item's content.

#### Lorem ipsum n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{% doctoolcontentend %}
{% doctoolend %}
  

Rendered as…

Item 1 heading added manually if required


1st item’s content.

Lorem ipsum 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

2nd item’s content.

Lorem ipsum 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

nth item’s content.

Lorem ipsum n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How to

  • The heading level of the DoctoolLTR tabs are included as a series of #’s as per regular headings.
  • In this example it is #### as it followed a Level 3 Heading. It needs to be changed to suit the doctooltr’s tabs actual place in the heading hierarchy
  • If the DoctoolLTR tabs will be linked to from elsewhere in the site then include a unique description of the DoctoolLTR in {% doctoolltr Add unique name here %}
  • to link to a DoctoolLTR tab it needs to be visible when the page is first loaded, ie not included in an accordion item which is collapsed when the page is first loaded.

Markdown…


{% doctoolltr Title %}
{% doctoolltrfirsttitle Item 1 in menu %}
{% doctoolltrtitle Item 2 in menu %}
{% doctoolltrtitle Item n in menu %}
{% doctoolltrtitlesend %}
{% doctoolltrfirstcontent Item 1 in menu %}
1st item's content.

### Lorem ipsum 1 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{% doctoolcontentend %}
{% doctoolltrcontent Item 2 in menu %}
2nd item's content.

### Lorem ipsum 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{% doctoolcontentend %}
{% doctoolltrcontent Item n in menu %}
nth item's content.

### Lorem ipsum n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{% doctoolcontentend %}
{% doctoolltrend %}
  

Rendered as…

1st item’s content.

Lorem ipsum 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

2nd item’s content.

Lorem ipsum 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

nth item’s content.

Lorem ipsum n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How to

Markdown…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
  
{% togglecontent More %}  
  
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  
{% togglecontentend %}

Rendered as…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

On the homepages of UniSkills and the Research Toolkit are carousels with information, images and links which cycle through whilst the homepage is active in the browser. It is also possible to move through the carousel manually.

How to

  • Is there a dedicated file something.yml in the _data/carousel folder for this slide?
  • Is the image uploaded to assets/images folder?
  • Is the image exactly 1000x500 pixels in dimensions?
  • Are all of the parameters below complete in the file?

Normal slide (Image only, no quote)

    carousel-order: A number between 1 and 98. 1 first, 98 last, 99 to hide.  
    carousel-text: Title here  
    carousel-description: A short description here (around 20 words)  
    carousel-image: Image name, including extension eg image.jpg  
    carousel-link: Slide link  
    carousel-link-text: Text for Slide link above  
    carousel-time-milliseconds: 10000   

ORCID quote slide (only vary carousel-order, carousel-description and carousel-overlay)

    carousel-order: between 0 and 98. 99 to hide slide.  
    carousel-text: Why should everyone get an ORCID?  
    carousel-description: The Quotee's Name and Position.   
    carousel-overlay: "\\" The Quote \\""  
    carousel-image: ORCID_quote_border_1000x500.jpg  
    carousel-link: https://researchtoolkit.library.curtin.edu.au/impact/author-identifiers/why-create-an-orcid/#why-everyone-should-get-an-orcid  
    carousel-link-text: Read more ORCID testimonials  
    carousel-time-milliseconds: 10000