Home / Style Guide

Style Guide

USGC Grains.org – Full Instructions on How to Update Market Data

Go to “GIAF Upload” in WordPress, located in the left navigation, towards the bottom.

Alternate H1
<h1 class="h1-alt text-white text-shadow uppercase">Alternate H1</h1>	


***
H1's are generally handled in page templates and not by content authors.

If you need to use this alternate heading style within a piece of page content
chances are the element you want to style really isn't a <h1>	
In that case please use any other heading tag which would be more appropriate like so:

<h2 class="h1 h1-alt text-white text-shadow uppercase">Alternate h1 Style</h2>	

***

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Body copy.

I am text over a dark area.

<p class="text-white mg-banded-primary-darkest antialiased p-8">
	I am text over a dark area.
</p>
Small Body/Blurb Copy. 
<small>
I am small text.
</small>

Link buttons

Action button Secondary button Tertiary button Accent button Accent button

<a href="#" class="mg-button">Action button</a>
<a href="#" class="mg-button mg-button--secondary">Secondary button</a>
<a href="#" class="mg-button mg-button--tertiary">Tertiary button</a>
<a href="#" class="mg-button mg-button--accent">Accent button</a>
<a href="#" class="mg-button mg-button--accent-2">Accent button</a>

Action button

<a href="#" class="mg-button mg-button--large">Action button</a>

Action button

<a href="#" class="mg-button mg-button--larger">Action button</a>

Corn

<a href="#" class="tag">Corn</a>

UI Controls

Links

I am a regular link.

I am a plain link.

<a href="#" class="plain-link">I am a plain link.</a>

We are plain links. We are plain links.

<p class="plain-links">
	<a href="#">We are plain links.</a>
	<a href="#">We are plain links.</a>
</p>

I am a link over a dark area.

<p class="white-links mg-banded-primary-darkest antialiased p-8">
	<a href="#">I am a link over a dark area.</a>
</p>
This site makes heavy use of the Tailwind CSS Framework (v0.4.0). Use a combintion of those tailwind CSS classes to compose common elements like the ones below.

Article Card

Sunset in the mountains

The Coldest Sunset

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium. Read more »

BOX SHADOW/TEXT BOX OVERLAY

Hello.

Backgrounds

Use one of the following mg-banded- classes for backgrounds.

When applying a darker background use text-white and antialiased as well (improves legibility).

<div class="mb-8 p-4 text-white antialiased mg-banded-primary">
	I'm a dark backround
</div>
.mg-banded-primary
.mg-banded-primary-darker
.mg-banded-primary-darkest
.mg-banded-primary-light
.mg-banded-primary-lighter
.mg-banded-primary-lightest
.mg-banded-secondary
.mg-banded-secondary-lighter
.mg-banded-secondary-lightest
.mg-banded-tertiary
.mg-banded-tertiary-lighter
.mg-banded-tertiary-lightest
.mg-banded-accent
.mg-banded-accent-lighter
.mg-banded-accent-lightest
.mg-banded-accent-2
.mg-banded-accent-2-light
.mg-banded-accent-2-lighter
.mg-banded-accent-2-lightest
.mg-banded-accent-3
.mg-banded-accent-4

Background Texture

Use mg-noise to add 2% noise for a subtle grainy texture

I have texture.
<div class="mb-8 p-4 mg-banded-secondary-lightest mg-noise">
	I have texture.
</div>

Photo CTA Blocks

Heading

I am a call to action box. Please act now.

Do something

Heading

I am a call to action box. Please act now.

Do something

Heading

I am a call to action box. Please act now.

Do something