Styleguide

Table of Contents

Subnavigation Teasers

I am the only link, the image nor icon should have a link.

This is a subheadline. tcc-link-arrow is on the arrow image block below to help with it’s animation.

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.

Font-Family (controls the weight)

Use these regardless of paragraph or headline to get the right effect.

tcc-type-xbold

tcc-type-bold

tcc-type-light

tcc-type-xlight

tcc-type-xbold

tcc-type-bold

tcc-type-light

tcc-type-xlight

Font-Size Overrides

Instead/in addition to the options in the block settings sidebar, you can also apply classes to text to control the size. Helps in situations where the outline should be semantic/accessible, but you want to highlight/demphasize something.

h1 I am a paragraph, but am using the class h1 in the advanced panel

h2 I am a paragraph, but am using the class h2 in the advanced panel

h3 I am a paragraph, but am using the class h3 in the advanced panel

h4 I am a paragraph, but am using the class h4 in the advanced panel

h5 I am a paragraph, but am using the class h5 in the advanced panel

h6 I am a paragraph, but am using the class h6 in the advanced panel

This also works with heading elements, but you may notice that heading elements have tighter line-height:

h1 I am an h3, but am using the class h1 in the advanced panel

h2 I am an H3, but am using the class h2 in the advanced panel

h3 I am an H3, but am using the class h3 in the advanced panel

h4 I am an H3, but am using the class h4 in the advanced panel

h5 I am an H3, but am using the class h5 in the advanced panel

h6 I am an H3, but am using the class h6 in the advanced panel

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.

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.

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.

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.

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.

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.

Buttons

I am a primary button

I am a primary button

I am a secondary button

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

Sticky Navigation

Using the “sticky navigation” block pattern, and a menu created in Admin Panel > Appearance > Menu

Teasers – column of large teasers

Urge your state senator to support the Community Energy Resilience Act

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

Teasers – row of small teasers (3 posts)

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

Take action

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

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

‘We need to be fighting polluters’ – Governor Newsom outlines climate vision in State of the State address

Event Teasers

Leadership Anchor for sticky nav

May 19, 2023

test event 2

zoom

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.

Our Vision

We believe in thriving, healthy communities. We’re working for a future where everyone in California enjoys clean air and water, renewable and reliable energy, healthy food, thriving nature, and more.

The Challenge

Climate change is hitting harder and faster than scientists predicted even a few years ago. California, once a global climate leader has fallen behind.

The Solution

California has the tools and the know-how to remove more climate pollution than we emit by 2030. The Climate-Safe California campaign is our framework for getting it done.

Our Impact

Our work is changing the conversation in Sacramento. Now, it’s time to change policies. Join us in pushing elected officials to put people before polluters and make California a climate leader again.

Table Block

Who we are Anchor for sticky nav

a	Bananas	Apples
b	Oranges	Blueberries
c	Avocado	Grapes

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

Clare’s tests

testing this block

Climate-Safe California action toolkit