Table of Contents
Styleguide
I am a subtitle as part of the interior page header with featured image & caption block
Subnavigation Teasers
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
Images
![cat](https://theclimatecenter.org/wp-content/uploads/2022/05/steve-tsang-OZjypvcu3uo-unsplash-1024x683.jpg)
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?
Sticky Navigation
Using the “sticky navigation” block pattern, and a menu created in Admin Panel > Appearance > Menu
Teasers – column of large teasers
Teasers – row of small teasers (3 posts)
![](https://theclimatecenter.org/wp-content/uploads/2022/10/capitol-of-california-historical-building-scaled-1-1440x695.jpg)
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
![](https://theclimatecenter.org/wp-content/uploads/2022/10/city_aerial.jpg)
Table Block
Who we are Anchor for sticky nav
a | Bananas | Apples |
b | Oranges | Blueberries |
c | Avocado | Grapes |
Blockquote
Challenge Anchor for sticky nav
Steve Jobs
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.