Skip to main content

Base elements

Header 1

Header 2

Entry Title Header 2

Header 2 wrapped in small element

Header 3

Header 4

Header 5
Header 6

Paragraph

Montserrat Paragraph

Some formatting elements:
Bold | italic | underline

  • unordered list item 1
  • unordered list item 2
  • secondary list item
  • nested list
  • nested list item 2
  1. ordered list item 1
  2. ordered list item 2

Blockquote: DEDICATED TO UNDERSTANDING Life On Earth Regular link

Link in paragraph

Horizontal Rule in Div

Color Pallette

#212529
#005c5d
#004344;
#f1f4f7

Font Awesome


.btn class and button element

BTN ClassBTN BTN-Primary Class

.vertical-button-container

BTN ClassBTN BTN-Primary Class

.horizontal-button-container

BTN ClassBTN BTN-Primary Class
An example image in a figcaption in div
Term
Description
Term
Description

Full table elements in responsive div

Rank: Ecology Rank: Environmental Science Journal Title Impact Factor 2017 Impact Factor 2016 Impact Factor 2015 Impact Factor 2014

7/158

N/A

ECOLOGICAL MONOGRAPHS

7.878

8.759

8.037

6.98

6/158

5/241

FRONTIERS IN ECOLOGY AND THE ENVIRONMENT

8.302

8.039

8.504

7.441

20/158

N/A

ECOLOGY

4.617

4.809

4.733

4.656

25/158

36/241

ECOLOGICAL APPLICATIONS

4.393

4.314

4.252

4.093

55/158

N/A

ECOSPHERE

2.671

2.49

2.287

2.255

Sections containing headers

section

section section-alt

section section-real

To Add (this was added in Appearance > Customize > Additional CSS)

.well

Grabs attention container for text, buttons or an icon but by rule not an image.

.well{
margin:20px 0px;
padding:20px 26px 10px 20px;
line-height: 1.25em;
background-color:#F1F4F7;
border:1px solid #adb5bd;
border-radius:1px;
}
.well > img{
display:none;
}

.section-real

border-bottom:1px solid #adb5bd;
border-top:1px solid #adb5bd;

.montserrat

Montserrat Paragraph, Input and Table

.montserrat, input, table{
font-family:”Montserrat”,-apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,”Helvetica Neue”,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”,”Noto Color Emoji”;
}

.vertical-button-container .btn

margin-bottom:10px;
display:table;

.horizontal-button-container .btn

.horizontal-button-container .btn{
margin-right:6px;
margin-bottom:10px;
}

Helpers

.inline{display:inline;}
.inline-block{display:inline-block;}
.pad{padding:6px;}
.padding-top{padding-top:22px;}
.padding-bottom{padding-bottom:22px;}
.mar{margin:6px;}
.margin-top{margin-top:26px;}
.margin-bottom{margin-bottom:26px;}
.tiny{font-size:60%;}
.small{font-size:80%;}