Earthwatch

Citizen Science for Global Change

View live site

Services

  • Strategy
  • Design
  • UX
  • Development

Sector

  • Drupal
  • Non-profit

For nearly 50 years, Earthwatch has been at the forefront of the environmental movement, empowering individuals to take collective action through scientific research and conservation. In research locations around the world, Earthwatch fills a unique niche—it provides an outlet for people from all walks of life to study and conserve the natural world.

Sessions per user

+10.5%

Avg. session duration

+16.95%

Bounce rate

-9.47%

The Brief

Optional Headline

Content with inline HTML will need to be in a paragraph tag.

The Approach

Optional Headline

Plain text content can live inside this handy React component.

  • Optional List React component
  • Each item needs its own line

The Grid

Flexbox by default and Grid by optional parameter

Flex Col 50: Flexbox uses fluid margins to set the adjacent and bottom spacing.
Flex Col 50: Adjacent meaning the space between, with :not(:first-child) notation.
Flex Col 66
Flex Col 34
Flex Col 60
Flex Col 40
Flex Col 75
Flex Col 25
Flex Col 34
Flex Col 34
Flex Col 34
Flex Col Auto
Flex Col Auto
Flex Col Auto
Flex Col Auto
Grid Col Auto: Grid uses grid-gap to set fluid margins bewteen items.
Grid Col Auto: Grid rows will need vertical padding bottom whereas Flexbox might not.
Grid Col Auto
Grid Col Auto
Grid Col Auto
Grid Col Auto: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Grid Col Auto: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Grid Col Auto: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Grid Col Auto: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Multi-column text elements are also possible with a custom div wrapper and the classes multi-col multi-col__two.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The Results

Optional Headline

A Small Headline

Final Thoughts

Optional Headline