Styleguide

Table of Content

Styleguide

I am a subtitle as part of the interior page header with featured image & caption block

I am a caption. A protester holds up a sign at a climate march. Photo credit Name Lastname, ©2021

I am a link and heading for the subnavigation teaser image left

This is a subheadline

I am a link and heading for the subnavigation teaser image right

This is a subheadline

Headings

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5
This is an H6

Paragraph

x-small Sometimes there isn’t a good answer. No matter how you try to rationalize the outcome, it doesn’t make sense.

small Sometimes there isn’t a good answer. No matter how you try to rationalize the outcome, it doesn’t make sense.

default Sometimes there isn’t a good answer. No matter how you try to rationalize the outcome, it doesn’t make sense. And instead of an answer, you are simply left with a question. Why?

medium Sometimes there isn’t a good answer. No matter how you try to rationalize the outcome, it doesn’t make sense.

large Sometimes there isn’t a good answer. No matter how you try to rationalize the outcome, it doesn’t make sense.

xlarge Sometimes there isn’t a good answer. No matter how you try to rationalize the outcome, it doesn’t make sense.

Flexible Teasers

This is a flexible teaser that can be used for timely, important content.

There could be a couple of different background color options for these, with the option to float the image on the left or right-hand side of the block.

CTA Button

This is a flexible teaser that can be used for timely, important content.

There could be a couple of different background color options for these, with the option to float the image on the left or right-hand side of the block.

CTA Button

This is a flexible teaser that can be used for timely, important content.

There could be a couple of different background color options for these, with the option to float the image on the left or right-hand side of the block.

CTA Button

This is a flexible teaser that can be used for timely, important content.

There could be a couple of different background color options for these, with the option to float the image on the left or right-hand side of the block.

CTA Button

This is a flexible teaser that can be used for timely, important content.

There could be a couple of different background color options for these, with the option to float the image on the left or right-hand side of the block.

CTA Button

This is a flexible teaser that can be used for timely, important content.

There could be a couple of different background color options for these, with the option to float the image on the left or right-hand side of the block.

CTA Button
I am a primary button
I am a secondary button

Links

Basic Styled Link Block Pattern (paragraph)

Images

cat

Sometimes there isn’t a good answer. No matter how you try to rationalize the outcome, it doesn’t make sense. And instead of an answer, you are simply left with a question. Why?

I am a caption. A protester holds up a sign at a climate march. Photo credit Name Lastname, ©2021
I am a caption. A protester holds up a sign at a climate march. Photo credit Name Lastname, ©2021

Teasers – column of large teasers

Teasers – row of small teasers (3 posts)

Take action

The Climate Center is a climate and energy policy nonprofit working to rapidly reduce climate pollution at scale, starting in California.

Event Teasers

Leadership Anchor for sticky nav

Our impact

Phase out fossil-fuels

Rapidly phase out fossil fuels while ensuring a just transition for workers and their communities.

Scale-up nature-based sequestration

Transform agriculture from an emissions source to a carbon sink.

Community resilience

Decentralize the energy grid, build resilience centers, create early warning systems, and more.

Fund climate action

Close tax loopholes, expand green investing, create green climate bonds and begin a progressive tax to fund the billions needed.

Table Block

Who we are Anchor for sticky nav

aBananasApples
bOrangesBlueberries
cAvocadoGrapes
Default Table

Blockquote

Challenge Anchor for sticky nav

Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.

Steve Jobs

Styleguide

I am a subtitle as part of the interior page header with featured video hero custom block pattern

Media Text Default Width – Image Right White bg

Text content goes here

Media Text Default Width – Image Right Sun-10 bg

Text content goes here

Media Text Wide – Image Right White bg

Text content goes here

Media Text Wide – Image Right Sun-10 bg

Text content goes here

Text could go here as well

Wide Width Columns – White

Text content goes here

Text could go here as well

Wide Width Columns – Sun

Text content goes here

Text could go here as well

Default Width Columns – White

Text content goes here

Text could go here as well

Default Width Columns – Sun

Text content goes here