Style guide

These guidelines are for agriculture.gov.au. They provide the base look and feel to be able to create simple user interface elements. It includes styles and components.

Components are the reusable building blocks of our website. Each component meets a specific interaction or UI need, and has been created to work together to create patterns and a better user experience.

Accordion

Accordions help users see only the content they need. Accordions expand and collapse sections of content.

Any heading level can be used as the accordion trigger.

The show/hide controls are automatically applied.

Do not nest accordions in other accordions.

When to use Accordions

We recommend that accordions be used sparingly for primary content on a page. While they can be appropriate for organising small, specific sections of content, accordions are not a suitable replacement for well formatted plain text. If a user requires all, or most of the information on the page it should be visible, not hidden inside an accordion.

Before using an accordion, consider whether the benefits outweigh the negative usability impacts:

Hiding content makes it harder for a user to scan a webpage. If content is hidden inside an accordion it can be difficult for a user to scan a whole web page for content relevant to them. Web browsers' 'Find on page…' search functions do not detect content hidden by accordions, making it harder for users to use their existing tools and behaviours to locate text.

Accordions increase cognitive load. Forcing a user to click on each accordion to receive the full text fragments their user experience, causing them to switch focus between accordions in order to gather all the information. It is also possible that with hidden content, a user might ignore, or not see important information.

Morbi mollis tellus ac sapien. Donec mollis hendrerit risus. Quisque ut nisi. Morbi vestibulum volutpat enim.

Etiam iaculis nunc ac metus. Sed hendrerit. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.

Morbi mollis tellus ac sapien. Donec mollis hendrerit risus. Quisque ut nisi. Morbi vestibulum volutpat enim.

The show/hide controls are automatically applied, they are not part of the mark up.

<div class="collapsible">
  <h3 aria-expanded="false"><button title="expand section" type="button">Collapsible Item one</button></h3>
  <div>
    <p>Morbi mollis tellus ac sapien. Donec mollis hendrerit risus. Quisque ut nisi. Morbi vestibulum volutpat enim.</p> 
    <p>Etiam iaculis nunc ac metus. Sed hendrerit. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl.</p>
  </div>
  ... {repeat collapsible item(s)} ...
</div>

Assisted workflow

The assisted workflow component uses conditional logic to show or hide fields based on user selections, so we can present the most relevant information. It is an embedded webform and has styling to represent a progress indicator to show the user where they are in the process.

Blockquote

The blockquote element is an HTML tag used to define quotations. Only use blockquote to show a quotation. This could be a quote from somewhere else, like a customer testimonial that goes with a case study or project success story.

Blockquote without citation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit cursus turpis quis venenatis. Nam viverra, nulla non iaculis tristique, lorem ipsum tempor quam, et lobortis sem ex in ex. Nam faucibus eu augue eget tristique. Maecenas convallis ex ligula, vel porttitor nisl maximus quis.

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit cursus turpis quis venenatis.</p> </blockquote>

Blockquote with citation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit cursus turpis quis venenatis. Nam viverra, nulla non iaculis tristique, lorem ipsum tempor quam, et lobortis sem ex in ex. Nam faucibus eu augue eget tristique. Maecenas convallis ex ligula, vel porttitor nisl maximus quis.
Person's name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit cursus turpis quis venenatis. Nam viverra, nulla non iaculis tristique, lorem ipsum tempor quam, et lobortis sem ex in ex.
Lorem ipsum dolor sit amet, consectetur adipiscing faucibus eu augue eget tristique. Maecenas convallis ex ligula, vel porttitor nisl maximus quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit cursus turpis quis venenatis. Nam viverra, nulla non iaculis tristique, lorem.
Person's name

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit cursus turpis quis venenatis. Nam viverra, nulla non iaculis tristique, lorem ipsum tempor quam, et lobortis sem ex in ex.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit cursus turpis quis venenatis. Nam viverra, nulla non iaculis tristique, lorem.</p> <div><cite>Person's name</cite></div> </blockquote>

Buttons

Buttons make common actions more obvious and help users more easily perform them.

Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them.

Buttons are designed bold and large to draw attention to key actions.

Each button has a hover, focus and active state to give a visual affordance to show you can interact with it.

When to use buttons

Reserve the use of buttons for form actions, use the CTA link if you would like to emphasise a link.

By default the primary button should be used for the primary call to action such as a Submit button on a form.

Use the secondary button for secondary actions such as a Save button on a form.

Use a combination of primary with secondary buttons to suggest relative importance, or to create a bias. Only use one primary button per page where possible.

Use the tertiary button for tertiary actions such as a Cancel button on a form.

Buttons have an underline on hover in order to address WCAG2.0 Criterion 1.4.1

Callout

Callouts are an excerpt of text or an article that has been pulled out and used as a visual clue to draw the eye to the text. They are used to help direct a user's attention to important pieces of information.

When to use a callout

Use to highlight important content for your users. Callouts are used to:

draw attention to important pieces of information which the user needs to consider
link to next steps of a process
link to a relevant resource

Call out 1

Praesent blandit laoreet nibh. Pellentesque posuere. Phasellus tempus. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Nullam cursus lacinia erat.

<div class="box-1">
  <h2>H2 Heading</h2>
  <p>Morbi mollis tellus ac sapien. Donec mollis hendrerit risus. Quisque ut nisi. Morbi vestibulum volutpat enim.</p> 
</div>

Call out 2

Praesent blandit laoreet nibh. Pellentesque posuere. Phasellus tempus. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Nullam cursus lacinia erat.

Call to action link

<div class="box-2">
  <h2>H2 Heading</h2>
  <p>Morbi mollis tellus ac sapien. Donec mollis hendrerit risus. Quisque ut nisi. Morbi vestibulum volutpat enim.</p> 
</div>

Call out 3

Praesent blandit laoreet nibh. Pellentesque posuere. Phasellus tempus. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Nullam cursus lacinia erat.

<div class="box-3">
  <h3>H2 Heading</h3>
  <p>Morbi mollis tellus ac sapien. Donec mollis hendrerit risus. Quisque ut nisi. Morbi vestibulum volutpat enim.</p> 
</div>

Custom callout box creator

Customise the Callout box example here with the callout box type and box icon options:

Call Out Type 1

Praesent blandit laoreet nibh. Pellentesque posuere. Phasellus tempus. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Nullam cursus lacinia erat.

Exclamation
Info
Dollar
Check
Clock
Question
Ban
Globe
Comment
Times (X)
Calendar Solid
Arrows Rotate
ID Card Solid
Pencil Solid
Arrow Rotate Left
No Proceed
Mail

Call to action

Link

Call to action links are visually distinct instructions to users designed to provoke an immediate response using verbs such as 'find out more about…'. There are 2 classes to float the link to the left or right (this is a different class to that used on a CTA in a call out box).

Call to action link

<p class="pos-left"><a class="calltoaction" href="#" title="Title">Call to action link</a></p>

Call to action link

<p class="pos-right"><a class="calltoaction" href="#" title="Title">Call to action link</a></p>

Button

Use the call to action button style sparingly, it is generally reserved for the home page but can be used to link to systems or websites where a more obvious visual cue is required. The button text should be kept short as this is more appealing in a button style. Try to use a call to action eg: Login into Micor, rather than a long application name.

Call to action button

<p id="block-have-you-say"><a class="cta" href=#>Call to action button</a></p>

Card

The card component is used to provide a brief summary of content or a task, with a link to more detail.

The hit area for the link wraps the entire card.

Cards are used to organise information related to a single topic. Cards can contain multiple elements, such as image, title and text.

Cards on standard pages display in 3 columns.

Any number of cards can be added and no blank card is required.

Title

This is the card pattern at its most basic. This card can be used where no further summary or description is required.

Lorem ipsum

<div class="card-container">
  <div class="card-item">
    <h3 class="cta-link"><a href="# ">Lorem ipsum</a></h3>
  </div>
  ... {repeat card item(s)} ...
</div>

Title and copy

This card has a title and copy. The copy provides further details where the title alone may not be sufficient.

Lorem ipsum

Morbi vestibulum volutpat enim consectetuer adipiscing elit.

Lorem ipsum

Morbi vestibulum volutpat enim consectetuer adipiscing elit.

<div class="card-container">
  <div class="card-item">
    <h3 class="cta-link"><a href="# ">Lorem ipsum</a></h3>
    <p>Morbi vestibulum volutpat enim consectetuer adipiscing elit.</p>
  </div>
  ... {repeat card item(s)} ...
</div>

Image or icon in card

Images or icons can be used to help a user visualise different pieces of information and provide additional context. Images should be jpeg format, 450px x 270px and no larger than 20 KB.

Please provide a 40px margin around icons as the image is cropped slightly.

The image is turned off on mobile.

Lorem ipsum

Morbi vestibulum volutpat enim consectetuer adipiscing elit.

Lorem ipsum

Morbi vestibulum volutpat enim consectetuer adipiscing elit.

Lorem ipsum

Morbi vestibulum volutpat enim consectetuer adipiscing elit.

<div class="card-container">
<div class="card-item">
<drupal-entity data-embed-button="media_entity_embed" data-entity-embed-display="view_mode:media.embed" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="9cd05cb9-0910-452e-b705-93e79c802740" data-langcode="en"></drupal-entity>
<h3 class="cta-link"><a href="# ">Lorem ipsum</a></h3>
<p>Morbi vestibulum volutpat enim consectetuer adipiscing elit.</p>
</div>
</div>

Group landing page card

Images for group landing page cards should be jpeg format, 487px x 212px and no larger than 35 KB. Images crop to a square on tablet and use the central part of the image.

In this section cards In this section cards are used on topic landing pages. They display in 4 columns on desktop.

In this section


<ul class="landing-page-links">
  <li><a href="# ">Nam commodo suscipit</a></li>
  <li><a href="# ">Praesent egestas neque eu</a></li>
  <li><a href="# ">Donec elit libero</a></li>
  <li><a href="# ">Mauris turpis nunc blandit et</a></li>
  <li><a href="# ">Phasellus accumsan cursus velit</a></li>
  <li><a href="# ">Donec orci lectus</a></li> <li><a href="# ">Morbi mollis tellus ac sapien</a></li>
  <li><a href="# ">Nunc nec</a></li>
</ul>

When to use Cards

Use card layouts to present a high-level summary of content related to a single topic.

Do:

consider and choose text and visual elements carefully. Test your cards with the minimal content and only add additional content or graphics where they give needed context to the user
use headlines that set clear expectations about the content being linked to
use one style of card per group, don't mix and match
feature one piece of information per card
outline the main idea with the minimal possible information, don't overload with information as the card links to more detail

Do not:

mix card styles within the same group
overload with information as the card links to more detail
add inline text links, the card itself is clickable and should link to a single piece of information

When to avoid

Cards should only display enough information to give a user context.

Do not use a card layout:

to highlight a solo piece of information
when the content requires in-line or multiple links
when a large amount of text is needed to give users context

Download

Presenting file downloads on a page should use the publication style below.

Download

Locust Bulletin January 2022 (PDF 641 KB)
Locust Bulletin January 2022 (DOCX 1.87 MB)

If you have difficulty accessing these files, visit web accessibility for assistance.

<div class="downloads">
<p><strong>Download</strong></p>
  
 <p><a data-entity-substitution="media" data-entity-type="media" data-entity-uuid="47547a24-c19a-4195-8e59-ac007a44b0a9" href="/media/50093">Locust Bulletin January 2022 (PDF 641 KB)</a>
<br/>
<a data-entity-substitution="media" data-entity-type="media" data-entity-uuid="edd70f02-f432-42bf-84c1-569b47d6834a" href="/media/50094">Locust Bulletin January 2022 (DOCX 1.87 MB)</a></p>
<p>If you have difficulty accessing these files, visit <a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="71f06ea8-61ab-4b57-b976-6757020696ee" href="/node/2501">web accessibility</a> for assistance.</p>
</div>

Infographics

Infographics are created using the Embed content type.

Infographics can display in a row of 1, 2 or 3 and are centred in the content block.

The infographics can consist of:

an icon (svg, png or jpeg 300px x 250px)
text above
statistic (text)
text below

Infographics can be embedded anywhere in the body field. Do not restyle the text in the WYSIWYG editor (add heading levels etc).

Images and figures

Users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to "jazz up" web pages.

Make sure your images are relevant.

Ask yourself the following questions to help determine if a photo you intend to use is suitable and purposeful:

Are there any benefits to using this particular image?
Does it help the user understand the point I’m trying to make?
How does this image relate to my brand? Does it speak to my target audience?
What message does this image send? Is there a message being sent at all?
How will my visitors respond to this image? Will it change their opinion?

Sizes

As a rough guide mages floated in content should be 350px.

Graphs and charts can take up the whole content width (950px).

Images inserted using a media entity

Image with caption

Image floating left

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.

Image floating right

Images linked to source file

If an image is not added as a media entity please add a class"photo floatleft" or photo floatright".

Figure caption

If the figure caption needs formatting add it to the page do not use the Caption field when embedding the image.

Figure 5: Suspendisse feugiat. Aenean vulputate eleifend. Vestibulum dapibus nunc augue. Aliquam erat volutpat. Fusce convallis metus.

Icon list

Use icons as visual cues. Create an unordered list and choose the icon from the Styles menu in the WYSIWYG editor.

Exclamation
Info
Dollar
Check
Clock
Question
Ban
Globe
Comment
Times (X)
Calendar Solid
Arrows Rotate
ID Card Solid
Pencil Solid
Arrow Rotate Left
No Proceed
Mail

List

A list organises information into discrete sequential sections.

When to use a list

Use unordered lists to display text in no specific order.

Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.

Unordered lists

List item one
List item two with nested list
- Nested list item one
- Nested list item two with nested list
  - Nested list item one
  - Nested list item two
  - Nested list item three
- Nested list item three
List item three

Ordered lists

Nesting ordered lists

List item one
List item two with nested list
1. Nested list item one
2. Nested list item two with nested list
  1. Nested list item one
  2. Nested list item two
  3. Nested list item three
3. Nested list item three
List item three

Nesting ordered lists with alpha and roman listing types

Vehicula ipsum a arcu cursus. Aliquet bibendum enim facilisis gravida neque convallis a cras
vehicula ipsum a arcu cursus aliquet bibendum enim facilisis gravida neque convallis a cras
vehicula ipsum a arcu cursus aliquet bibendum:
1. facilisis gravida neque convallis a cras; or
2. tempus imperdiet nulla malesuada;
vehicula ipsum a arcu cursus aliquet bibendum enim facilisis gravida neque convallis a cras
ultrices mi tempus imperdiet nulla malesuada pellentesque elit
bibendum enim facilisis gravida neque convallis a cras
vehicula ipsum a arcu cursus aliquet bibendum enim facilisis gravida neque convallis a cras
tempor orci eu lobortis elementum nibh tellus.

Mixed lists

List item one
List item two with nested list
1. Nested list item one
2. Nested list item two with nested list
  - Nested list item one
  - Nested list item two
  - Nested list item three
    1. Nested list item one
    2. Nested list item two with nested list
    3. Nested list item three
3. Nested list item three
List item three

Listing layout

The listing layout displays a compact list of multiple related items like articles or events.

Each item includes a title, a small image, descriptive text, and a link/s.

When to use the listing layout

Use the listing layout when you want to highlight information like articles, events, or documents that appear elsewhere on our website or from other sources.

Lorem ipsum dolor

Morbi vestibulum volutpat enim consectetuer adipiscing elit. Integer eget aliquet nibh praesent tristique magna sit amet.

Vehicula ipsum a arcu cursus. Aliquet bibendum enim facilisis gravida neque convallis a cras.

Phasellus ullamcorper ipsum

<div class="flex-media">
  <div class="flex-media-figure">
    {drupal-entity (image)}
  </div>
  <div class="flex-media-content">
    <h3>Lorem ipsum dolor</h3>
    <p>Morbi vestibulum volutpat enim consectetuer adipiscing elit.&nbsp;Integer eget aliquet nibh praesent tristique magna sit amet.</p> <p>Vehicula ipsum a arcu cursus. Aliquet bibendum enim facilisis gravida neque convallis a cras.</p>
    <ul> 
      <li><a href="#">Phasellus ullamcorper ipsum</a></li>
      ... {repeat list item(s)} ...
    </ul>
  </div>
</div>

Megamenu feature card

The megamenu feature cards sit on the right hand side of the megamenu.

Use the megamenu feature card to:

promote the latest or most popular content
communicate and drive users to a specific call to action

When to use the megamenu feature card

Contact your strategic communications account manager for guidance on how to use the megamenu feature card to promote your content.

Feature card image specifications

Images must be jpeg format, 315px x 130px and no larger than approximately 50 KB.

The image is turned off on mobile.

News and media centre images

Images should be 1000px wide by 667px high (try to keep them under 200KB if possible).

Image naming convention:

mediacentre-topic-image-description, eg: mediacentre-cewo-waterway.jpg

Rather than name the image specific to the news item or case study for example, keep the description generic so that it can be found easily and reused.

Resource Card

Resource cards are a useful tool for presenting a discrete piece of content within a page (e.g. a short case study or context for a resource such as a document download), rather than forcing the user to click to other pages for that information.

Resource cards are a card style where the whole card is not linked. Instead, it contains HTML content that may include a link or links.

On mobile images are disabled.

Note: if using links like 'Download PDF' or 'Download Word' etc. rather than the name of the document, please add the full document name to the title="" attribute of the link. E.g. <a href="xx" title="Full document name">. This will provide screen readers with more information about the link.