UQ Library Style Guide

Colours

The following colours are based on the official University of Queensland colour palette.

It has only been modified where necessary to meet WCAG 2.0 AA colour contrast specifications.

#49075E
$dark-primary
#7B0C9D
$primary
#38852E
$dark-accent
#8CB800
$accent
#BDA14E
$uq-gold
#8A7433
$uq-gold-alt
#AA0041
$uq-red
#CE4627
$uq-warm-red
#007E9E
$link
#E7E7E7
$link-secondary
#333333
$text
#757575
$text-secondary
#CCCCCC
$divider
#FAFAFA
$background-primary
#FFFFFF
$background-secondary

Typography

H1: Display4

H2: Display3

H3: Display2

H4: Display1

.headline

.title

.subhead

.body2

.body1

.caption

.button

H1.inverse: Display4

H2.inverse: Display3

H3.inverse: Display2

H4.inverse: Display1

.headline

.title.inverse

.subhead.inverse

.body2.inverse

.body1.inverse

.caption.inverse

.button.inverse

Single line list

Single line list items
St. Lucia
Gatton
Herston

Single line list with avatar/icon

Single line list items with avatar
Single-line list item 1
Long single-line list item 1 Single-line list item 1 Single-line list item 1 Single-line list item 1 Single-line list item 1 Single-line list item 1 Single-line list item 1 Single-line list item 1
Single line list items with icon
Ipswich
Hospital

Two line list

Two line list items
Two-line list item line 1

some description of two-line list item line 2
Two-line list item line 1

some description of two-line list item line 2
Two-line list item line 1

some description of two-line list item line 2

Two line list with avatar/icon

Two-line list items with avatar
Two-line list item line 1

some description of two-line list item line 2
Two-line list item line 1

some description of two-line list item line 2
Two-line list items with avatar and icon
Two-line list item line 1

some description of two-line list item line 2
Two-line list item line 1

some description of two-line list item line 2

Three line list

Three-line list items
St. Lucia

Duhig Building

Available time: 1:30pm - 2:00pm
St. Lucia

Duhig Building

Available time: 1:30pm - 2:00pm
St. Lucia

Duhig Building

Available time: 1:30pm - 2:00pm

Three line list text

Three-line list items with text
St. Lucia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit libero quam, quis fermentum quam egestas et. Etiam tincidunt pretium libero
St. Lucia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit libero quam, quis fermentum quam egestas et. Etiam tincidunt pretium libero, dignissim condimentum risus fringilla congue. Phasellus sit amet fermentum nisi. Nunc nec mi sit amet libero rutrum eleifend. Fusce ultricies volutpat fermentum. Nam ut elit et justo commodo tristique. Aliquam mollis erat at eros tincidunt bibendum.

Three line list with avatar/icon

Three-line item with avatar
Three-line list item line 1

some description

some description of three-line list item line 3
Three-line list item line 1

some description

some description of three-line list item line 3
Items with avatar and icon
Three-line list item line 1

some description

some description of three-line list item line 3
Three-line list item line 1

some description

some description of three-line list item line 3

Three line text list with avatar/icon

Three-line item with avatar
St. Lucia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit libero quam, quis fermentum quam egestas et. Etiam tincidunt pretium libero
St. Lucia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit libero quam, quis fermentum quam egestas et. Etiam tincidunt pretium libero, dignissim condimentum risus fringilla congue. Phasellus sit amet fermentum nisi. Nunc nec mi sit amet libero rutrum eleifend. Fusce ultricies volutpat fermentum. Nam ut elit et justo commodo tristique. Aliquam mollis erat at eros tincidunt bibendum.
Items with avatar and icon
St. Lucia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit libero quam, quis fermentum quam egestas et. Etiam tincidunt pretium libero
St. Lucia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit libero quam, quis fermentum quam egestas et. Etiam tincidunt pretium libero

Timeline three-line text list

Three-line item with date
12

Mon

Three-line list item line 1

some description

some description of three-line list item line 3
17

jan

Three-line list item line 1

some description

some description of three-line list item line 3
17

Sat

Three-line list item line 1

some description

some description of three-line list item line 3

Containers

Image header with title

Individual Room 1

Zelman Cowan Bldg (#51), St Lucia

Body1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis auctor tortor eu lobortis. Nullam non felis vel velit ultrices volutpat vitae ac risus. Praesent varius arcu urna, ut lacinia erat malesuada id. Nam aliquet porta egestas. Nullam nec justo magna. Ut mattis rhoncus felis elementum porttitor. Cras vitae mi et ligula pulvinar rhoncus sed eget nisl.

Body2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis auctor tortor eu lobortis. Nullam non felis vel velit ultrices volutpat vitae ac risus. Praesent varius arcu urna, ut lacinia erat malesuada id. Nam aliquet porta egestas. Nullam nec justo magna. Ut mattis rhoncus felis elementum porttitor. Cras vitae mi et ligula pulvinar rhoncus sed eget nisl.

Text alignment classes

class="text-left" - left aligned text

class="text-center" center aligned text

class="text-right" right aligned text

class="text-nowrap" Flannel slow-carb bitters, four loko 3 wolf moon locavore pour-over yr four dollar toast Pitchfork hoodie American Apparel. Sustainable photo booth tattooed, Vice actually ethical shabby chic keytar deep v post-ironic ugh Pinterest polaroid. Selvage jean shorts sartorial, Blue Bottle salvia fashion axe narwhal cliche art party mixtape chillwave VHS meh asymmetrical Vice. Try-hard Intelligentsia Echo Park McSweeney's photo booth Bushwick, bitters Etsy raw denim scenester wayfarers.