Default header

UQ ->Default page header


Without an image:

With an image:

Used on all of the basic pages,events and articles.

Typically used when the hero banner component is not used.


Styling Notes:

Classes needed: page__header

Note: Two different display modes.

 

Card Grid

UQ Content Types -> Card Grid



Cards (default view): 1 to 4 columns

Use this component when it’s necessary to provide contextual information and imagery leading into a news story, event, or informational content. Images should have a similar tone and treatment to visually unify the panel.

Always use a shaded or dark background to give the Cards a 'boxed' look.

Image size guide: 640px wide

 

WORKS WELL FOR:

  • News
  • Events
  • Informational content with engaging imagery 

 


Cards (primary link): 1 to 4 columns

Use this component when context can be conveyed in a few words with a short, snappy title accompanied by an engaging image.

Image size guide: 640px wide 

 

WORKS WELL FOR:

  • Events
  • Informational content with engaging imagery.

 


Styling Notes:

Section style needed

Classes needed: none

Notes: It uses the full sized image. So try to scale down your images before placing them into these cards, as you can cause performance issues otherwise. 

Content Column Block

UQ Content Types -> Content Column Block 


WORKS WELL FOR:

  • Footer Content:
    • Partners
    • Institutes
    • Contact Information

Use this component to link to related websites and highlight key content as a feature 
(e.g. faculty contact information).


Styling Notes:

Section style needed

Classes needed: content-column-block

Grid of Links

UQ Content Types -> Grid of Links


Use this component to group informative/dense content under one title and summary.

Use a white or grey background instead of an image to create more white space.

If you use a background image, it should support the content. Avoid busy images and aim to use textures or photos with a single point of focus. 

 

WORKS WELL FOR:

  • Procedures
  • Forms
  • A set of services (what we can do for you)

 


Styling Notes:

Section style needed

Classes needed(if wanting the white text): light-palette

Hero Banner

UQ Content Types -> Hero Banner


This is a common component used for page titles, or positioning statements. Use it to set a focus for the page.

The background image should support the content. Avoid busy images and aim to use textures or photos with a single point of focus. 

 

WORKS WELL FOR:

  • Page titles
  • Positioning statements
  • Achievements

A call to action button can be added. This is useful for event pages and registrations.

 


Styling Notes:

Classes needed: none

Notes: It uses the full sized image. So try to scale down your images before placing them into these cards, as you can cause performance issues otherwise.

Pane Grid

UQ Content Types -> Pane Grid 


Use Panes when referencing informative/dense content where the context requires a short summary to guide the user to make a selection.

 

WORKS WELL FOR:

  • Projects
  • News with limited imagery
  • Administrative information (e.g. fees, student services).

 


Styling Notes:

Section style needed

Video Pane

UQ Content Types -> Video pane


WORKS WELL FOR:

  • Events
  • Call for action
  • Referencing to source material

 


Styling Notes:

Section style needed

Featured content listing- Horizontal content list

View panes -> View: Horizontal content list: Latest 


This component automatically feeds in 3 items from elsewhere on the site (news).

It should be positioned underneath a component that can provide context for the news links. 

 

WORKS WELL WITH

  • News

Styling Notes:

Section style needed

 

Staff Directory

View panes -> View: Staff directory


WORKS WELL WITH

  • Standalone Page 

Styling Notes:

People by team

Views -> People by team


WORKS WELL WITH

  • Standalone Page 

Displays all the members grouped by team.

Styling Notes:

Vertical content list(Card/Compact/Teaser)

View panes -> view:Vertical content list:(Card/Compact/Teaser)


Card:

 

Compact:

Teaser:

WORKS WELL WITH:

  • News
  • Events
  • Key initiatives

Styling Notes:

Section style needed

Term listing

Views -> Term list


Used to display all of the teams on the site.

Styling Notes:

Section style needed

 

Mini panel

Mini panels are used for adding more defined structure than ordinary panels can provide to components. 

Admin -> Structure -> Mini panels -> Add

Give it an appropriate administrator title.

Make sure that you add "UQ" as the category.

Continue through the next page.

All of the layouts that you should be using are, available in the UQ Components category. 

Make sure you click finish before added anything into the mini panel.(you may have to open you mini panel again, it should be in the list of mini panels). 

Once editing it, make sure that you are on the content tab.

Now you can edit it like a normal panel page.

When you want to add your newly created mini panel onto your panel page, you can add it like any other panel component.

It should appear in the UQ category because previously that is the category that you assigned it to.