Image Sizing

Default Page Banner Image Recommended Size 1500px x 500px

For use in the default page banner. Images can be taller but will only show the middle portion of the image.

Homepage Large Slider Image Size 1500px x 750px

For use in the large slider section of the homeapage. These images will not resize automatically since keeping the text visible is important

Previosuly Funded Research Section 300px x 250px

For use in the feature image section of the individual grant research recipients. Images can be taller but will only show the middle portion of the image.

News Image Recommended Size 1300px x 400px

For use in the feature image section of the blog posts in the news section. Images can be taller but will only show the middle portion of the image.

Image Instructions

Further Explanation on How Images Functions

The sizes that you are being given are just approximate sizes. Due to the responsive nature of websites, no one size is always going to be perfect. So, rather than trying to get the images to fit exactly, the main goal should be just to find images in sizes that will center in the image area. In general, the biggest issue will often come from images that are much taller than the proposed size.

Header One Styling

HTML CODE <h1>Header One Tag</h1>

OUTPUT

Heading One

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Two Styling

HTML CODE <h2>Header Two Tag</h2>

OUTPUT

Heading Two

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Three Styling

HTML CODE <h3>Header Three Tag</h3>

OUTPUT

Heading Three

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Four Styling

HTML CODE <h4>Header Four Tag</h4>

OUTPUT

Heading Four

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Five Styling

HTML CODE <h5>Header Five Tag</h5>

OUTPUT

Heading Five

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Header Six Styling

HTML CODE <h6>Header Six Tag</h6>

OUTPUT

Heading Six

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Paragraph Styling

HTML CODE <p>Paragraph Tag</p>

OUTPUT

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

This is a paragraph that contains some inline styles. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Additional Text Styling

HTML CODE

<strong>Bold Text</strong>
<u>Underline Text</u>
<em>Italic Text</em>

OUTPUT

Bold Text
Underline Text
Italic Text

Button Styles

HTML CODE <a class="button" href="">Button</a>
<a class="button small" href="">Button</a>
<a class="button-blue-text" href="">Button</a>
<a class="button-blue-ghost" href="">Button</a>
<a class="button-yellow-ghost" href="">Button</a>

OUTPUT Button
Button Small
Button Blue Text
Button Blue Ghost
Button Yellow Ghost

Brand Colors

AVAILABLE COLORS

Blue

Dark blue

Light blue

Yellow

Light grey

Black

COLOR USAGE IN TEXT <h4 class="blue">Blue Text</h4>

Blue Text

<h5 class="yellow">Yellow Text</h5>

Yellow Text

<h3 class="dark-blue">Dark Blue Text</h3>

Dark Blue Text

COLOR USAGE IN DIVS

Add a background color to your div by adding a class to your custom content.
Syntax: bg-[ color of choice ]

<div class="bg-yellow">bg-yellow</div>

Background Yellow

NOTE: When using dark backgrounds, you can make your text white by adding the class invert to your custom content.

<div class="bg-dark-blue invert">bg-dark-blue invert</div>

Dark Blue Background

Grid System

HTML CODE


                     <div class="w-30">...</div>

                     <div class="w-70">...</div>

                     <div class="w-100">...</div>

OUTPUT

FULL GRID

w-10

w-10

w-10

w-10

w-10

w-10

w-10

w-10

w-10

w-10

w-20

w-20

w-20

w-20

w-20

w-third

w-third

w-third

w-third

w-two-thirds

w-10

w-90

w-20

w-80

w-25

w-75

w-30

w-70

w-40

w-60

w-50

w-50

w-100

Padding System

PADDING ALL

These show uniform padding around the content.
Definition: pa[ ] = padding all [amount of padding]

HTML CODE <div class="pa1">[Content Here]</div>
<div class="pa2">[Content Here]</div>
<div class="pa3">[Content Here]</div>
<div class="pa4">[Content Here]</div>
<div class="pa5">[Content Here]</div>

OUTPUT

pa1

pa2

pa3

pa4

pa5

PADDING VERTICAL

These show vertical padding above and below the content.
Definition: pv[ ] = padding vertical [amount of padding]

HTML CODE <div class="pv1">[Content Here]</div>
<div class="pv2">[Content Here]</div>
<div class="pv3">[Content Here]</div>
<div class="pv4">[Content Here]</div>
<div class="pv5">[Content Here]</div>
OUTPUT

pv1

pv2

pv3

pv4

pv5

PADDING HORIZONTAL

These show horizontal padding to the left and right of the content.
Definition: ph[ ] = padding horizontal [amount of padding]

HTML CODE <div class="ph1">[Content Here]</div>
<div class="ph2">[Content Here]</div>
<div class="ph3">[Content Here]</div>
<div class="ph4">[Content Here]</div>
<div class="ph5">[Content Here]</div>
OUTPUT

ph1

ph2

ph3

ph4

ph5

ADDITIONAL PADDING LOCATIONS

These show the top, right, bottom, left padding options. The different padding scales shown above also apply to these.

Definitions:
pt[ ] = padding top [amount of padding]
pr[ ] = padding right [amount of padding]
pb[ ] = padding bottom [amount of padding]
pl[ ] = padding left [amount of padding]

EXAMPLES

pt4

pr4

pb4

pl4

RESPONSIVE DESIGN

Here are the available options to make the GRID and PADDING responsive to different devices.

Definitions:
[w-50 or pa4]-ns = the settings in the bracket will only apply to NOT-SMALL screens (tablet and desktop size)
[w-50 or pa4]-m = the settings in the bracket will only apply to MEDIUM screens (tablet size)
[w-50 or pa4]-l = the settings in the bracket will only apply to LARGE screens (desktop sizes)

HTML CODE <div class="w-third-l w-50-m w-100">[Content Here]</div>
OUTPUT ON DESKTOP

w-third-l w-50-m w-100

OUTPUT ON MOBILE

w-third-l w-50-m w-100

OUTPUT ON TABLET

w-third-l w-50-m w-100

Page Part Settings

HOW TO ADD BLOCKS

In order to add a block, just click on the plus sign within your page's content area then add the block that you would like to use.

plus sign

WHERE TO ADD CLASSES

The grid sizes, padding, and background colors will need to be added to the Class Field for that particular content block.