Anatomy of a page
Lead paragraph (p class=”lead”). This page aims to show the basic building blocks of a page build using the design system. While different layouts will vary from this formula, this structure should be used as a starting point and altered to suit a website’s specific purpose.
This example shows both page content here on the left and navigation on the right. Here the page content occupies 8 bootstrap columns, while the optional navigation takes up 4 columns. Extra margin is added on the left of the navigation as the default space between columns is visually a little tight.
Typically the right hand navigation would drop below the previous and next buttons on screens smaller than 1200px (breakpoints X-Small, Small, Medium, Large). If the right hand navigation omitted, it’s still recommended that text only occupy 8 columns at large breakpoints, to keep line length readable and easily scannable.
Link large (links to breakpoints)Top navigation
In addition to the RMIT logo, which is mandatory, the navigation offers the following options:
- Site title (space permitting), links back to the site homepage
- Hamburger menu - provides flexible options for global navigation
- Search link - could either link to a separate page or trigger an overlaid input box interface
- Library link - links to RMIT library homepage
It’s recommended that this nav is fixed to the top of the page to provide easy access to navigation
Breadcrumbs
An optional element, depending on the amount of levels a site contains. Due to the proximity to the page title, by default there’s no need to include an inactive breadcrumb displaying the page title.
Page content
This section shows examples of various components that make up page content. More information about each of the components is available elsewhere in the site.
Accordions
Accordions can be a useful tool in dividing and segmenting information, if used judiciously.
.accordion-body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus ipsum, semper sit amet sollicitudin sit amet, interdum et nisi. Morbi in ullamcorper nisi. Fusce eget magna vitae lacus eleifend malesuada vel eu metus. Integer eget pellentesque magna, sit amet dignissim leo. Suspendisse potenti. Cras nec eros convallis, pretium ipsum eu, luctus magna..accordion-body. Aliquam sapien nibh, pretium sollicitudin convallis vitae, egestas eget velit. Vivamus faucibus auctor ultricies. Sed sed magna ante. Quisque fringilla pharetra faucibus. Phasellus non vehicula orci. In quis porttitor metus. Maecenas et nulla augue.Blockquotes
Blockquotes can be useful to highlight sections of text and can also function as a navigation device. Visually, they are obviously separate from the rest of the content and can provide prominent for the information contained within. An example of using blockquotes as navigation devices is shown at the bottom of the page.
This tutorial covers four of the most important aspects in writing a literature review: criteria to use in choosing the best sources, how to structure your literature review, writing in an appropriate style, and maintaining a voice of authority.
Blockquotes can also feature an image. The image width is 12.25rem (196px). Portrait images are supported but are best used sparingly. At X-Small and Small breakpoints, the image is stacked on top of the text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare consectetur tellus. Aenean non posuere tortor, pretium accumsan augue.
Buttons
The default variant hews closely to Bootstrap's btn-outline-secondary style. When multiple buttons are used on a page, almost all of them should in this style. The primary variant should be used sparingly, ideally only one occurrence on each page. It should action something important, like submitting a form.
Tables
By default, tables feature a simple one pixel border. Each table is wrapped in a div, responsive-table, which allows for wide tables to horizontally scroll at smaller screen sizes.
| Evidence | Problem | Relevant theory | Solution |
|---|---|---|---|
CEO
| CEO leadership style
|
|
|
| Management culture
|
|
|
| Communication
|
|
|
Another option is a striped table, add the class table-striped to activate it. This form of table is useful when the amount of content in each cell is minimal and the comparison between data entries is important.
| Most common form | Other words in the family |
|---|---|
| analysis | analyse, analysed, analyser, analysers, analyses, analysing, analyst, analysts, analytic, analytical, analytically |
| approach | approachable, approached, approaches, approaching, unapproachable |
| area | areas |
| assessment | assess, assessable, assessed, assesses, assessing, assessments, reassess, reassessed, reassessing, reassessment, unassessed |
| assume | assumed, assumes, assuming, assumption, assumptions |
| authority | authoritative, authorities |
| available | availability, unavailable |
Images
There are various options for displaying images including borders, alignment, sizing and adding captions and transcript accordions. The example below shows a border, caption and transcript along with default alignment and sizing. There is a lot more information of the images page.
How do I structure an essay? Essays have three parts: A beginning... A middle... and an end. That is, the introduction, body, and conclusion. It’s important to have structure in your essay, or you will lose the flow of your argument.
How do I write an essay introduction? Writing an essay introduction can sometimes be quite challenging. It helps to break down your introduction into three important parts: First, start by introducing your topic. Then, state your argument. And finally, outline your main points.
There is a slightly different layout for portrait images. There are no alignment options, but the same options for borders, captions, sizing and transcripts are available.
How do I structure an essay? Essays have three parts: A beginning... A middle... and an end. That is, the introduction, body, and conclusion. It’s important to have structure in your essay, or you will lose the flow of your argument.
How do I write an essay introduction? Writing an essay introduction can sometimes be quite challenging. It helps to break down your introduction into three important parts: First, start by introducing your topic. Then, state your argument. And finally, outline your main points.
Video
Video is displayed via a responsive iFrame, a transcript of the video should be displayed via an accordion to assist visually impaired users. The default aspect ratio is 16:9, content in other ratios (4:3 for instance) will be pillarboxed. There are options for portrait video too.
How do I structure an essay? Essays have three parts: A beginning... A middle... and an end. That is, the introduction, body, and conclusion. It’s important to have structure in your essay, or you will lose the flow of your argument.
How do I write an essay introduction? Writing an essay introduction can sometimes be quite challenging. It helps to break down your introduction into three important parts: First, start by introducing your topic. Then, state your argument. And finally, outline your main points.
By doing this, your introduction should start broad and become more specific, focusing in on your essay topic. Basically, you’re letting the reader know what you’re going to discuss throughout the essay. Let’s have a look at this introduction as an example:
Self-confidence means possessing a positive, yet realistic, view of one’s self and abilities. Self-confident people have trust and faith in their abilities. Self-confidence can be affected by a variety of factors. This essay will argue that self-confidence develops through a complex interaction between a range of factors. The essay will firstly define self-confidence, and then analyse the interaction between various factors that affect the confidence of an individual. In particular, these are personality style, situational factors/life experiences self-efficacy and self-esteem.
Notice the structure: The topic and context at the start of the paragraph; the argument in the middle, and what will be covered in the essay at the end of the paragraph.
How do I write an essay body? An essay body is a series of paragraphs that support the main argument.
How do I write an essay conclusion? Your essay conclusion is written in the opposite way to the introduction: it starts narrow and becomes broad. Begin with the detail of the essay, and expand out to the bigger picture. Here’s an example of how to structure a conclusion:
Self-confidence is not ingrained within individuals and can be influenced by a variety of factors. The personality style of an individual can determine whether the individual is an introvert or an extrovert, which will affect self-confidence. Life experiences and situational factors have a large impact on the stability of personalities and confidence. Self-efficacy and self-esteem are major factors that can contribute to a lack of self-confidence. Self-confidence is essential for effective and positive engagement in all professional and personal activities.
For more information about essay writing, try the tutorials.
Thanks for watching.
Navigation
List links give an option to display a list of links while giving the list more prominence than a standard unordered list.
Bottom of the page
In this page, we are displaying all possible options. It’s likely that in many contexts, only the footer itself would be displayed. For most pages, there won’t be any additional links. Keywords are only relevant for large sites that have a tagging system implemented.
Previous and next buttons
These are particularly useful for pages featuring lots of pages, they give the user an easy and logical way of progressing through the site. They are especially useful if the right hand navigation scrolls with content.
This optional section allows for linking to other pages or sites without breaking the flow of progressing through the site via the next button. The user should be aware of whether they are leaving the current site or not, either via text or an icon.
In addition to the blockquote design shown here, a simpler option, using list links would also be appropriate.
Keywords
These are particularly useful for pages featuring lots of pages, they give the user an easy and logical way of progressing through the site. They are especially useful if the right hand navigation scrolls with content.
Footer
In this example the footer has two sections, Acknowledgement of country and the RMIT footer itself. In certain contexts it may be appropriate to omit the Ask the library and the Acknowledgement of country sections. The RMIT footer may also contain links such as About or Contact us specific to the relevant in addition to the global Terms and Privacy links.
Additional links
Category
Blockquote with link
Not all of these elements need to be displayed at once. View the page for more information.
Extra information
