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

HTML

For More Advanced Users
(some of these snippets were added in Appearance > Customize > Additional CSS and have yet to be translated into the .sass)

Sections containing headers

.section

.section .section-alt

.section .section-real

.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%;}