Skip to main content

Base Elements

Important notice for 2026 and on

Much of the content here is outdated, however it contains built in classes inherent to the theme. Developers may inspect the source to see how something is set up or reasons for certain classes, e.g. Anchor. As the current theme is rolled fully into a block theme these core classes remain.

The standard HTML semantics continue, of course in the block editor. However, the styles you see below are the default and do not use the block editor. Any style may be applied in the block editor using the Advanced > CSS Class text box in the administrator editor screen. +6

Custom HTML Block

Heading 1

Heading 2

Entry Title Heading 2

Heading 2 wrapped in small element

Heading 3

Heading 4

Heading 5
Heading 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 ClassBTN BTN-BIG Class
An example image in a figcaption in div
Term
Description
Term
Description

Accordions

Example

Standard table no header in div

Job Board Internship Opportunities Funding and Grants Ecology as a Career

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)

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

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

.anchor{

paddingtop}

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