Melbourne Mining Club
Brand Guidelines

01.
Australia’s pre-eminent
networking organisation

The Melbourne Mining Club was founded in 2001 in Melbourne, the capital city of the Australian state of Victoria. Melbourne is the hub of the Australian resources sector, home of the biggest companies, leading services providers in the fields of engineering, project design, legal, technical, accounting and taxation.

04.
Brand Palette

Convey meaning through color with a handful of color utility classes.

Primary-color
Hex: #175B82
Class: .bg-primary

Secondary-color
Hex: #3796D6
Class: .bg-secondary

Success-color
Hex: #008000
Class: .bg-success

Danger-color
Hex: #DC3545
Class: .bg-danger

Warning-color
Hex: #DA7219
Class: .bg-warning

Info-color
Hex: #17A2B8
Class: .bg-info

Light-color
Hex: #F0F0F0
Class: .bg-light

Dark-color
Hex: #343A40
Class: .bg-dark

05.
Buttons

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Solid buttons

Outline buttons

Large Sizes Buttons

Small Sizes Buttons

05.
Cards

Cards provide a flexible and extensible content container with multiple variants and options.

Plain Cards

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Structure code

<div class="card"> <img src="image source" class="card-img-top" alt="..." /> <div class="card-body text-dark"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>

News Cards

Event
17 Oct 2023

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Structure code

<article class="card card-news-overlay-date"> <div class="card-img-top position-relative overflow-hidden"> <a href="#"> <img src="Image soruce" alt="Event" /> </a> </div> <div class="card-body"> <div class="inner-body"> <h6 class="date bg-success text-white p-3 mb-3 font-weight-bold float-left"> <i class="far fa-calendar-alt mr-1" aria-hidden="true" style="position: unset; font-size: inherit; color: inherit;"></i> 17 Oct 2023 </h6> <h4 class="home-h4 card-title text-uppercase mb-2 d-flex w-100"> <a class="text-dark" href="/melbourne_mining_club_update_from_the_chair">Card title</a> </h4> <p class="text-dark"> Some quick example text to build on the card title and make up the bulk of the card's content.</p> <div class="card-btn-panel mt-2 px-0"> <a class="text-secondary font-weight-bold text-uppercase" href="#">RGo somewhere</a> </div> </div> </div> </article>

Meta Image Size

1200 X 628

Random size

Meta Image With Frame Class

Latest News

Structure code

<div class="frame-img"> <img class="w-100" src="Image Size" alt="" /> </div>

05.
Typography

Because the internet is mostly made of words

Roboto Condensed

Roboto Condensed is the font used for the headlines. This is the Condensed family, which can be used alongside the normal Roboto family and the Roboto Slab family.

Proxima Nova

Proxima Nova is the font we use as our secondary typeface for use in paragraph text and small UI elements. Proxima Nova Sans Serif Font is a strong, versatile geometric sans with industrial quality.

Type Scale

Heading – XXL

Heading – XL

Heading – LG

Heading – MD

Heading – SM
Heading – XS