Styleguide

Definitions of utility classes and WebFlow symbols for use in building the PCG website.

Typography

Display

For display type, add the utility class .display-1 or .display-2 to a heading.

Possible futures, probable pasts.

Possible futures, probable pasts.

Semantic Headings

Semantic Heading 1

Possible futures, probable pasts.

Semantic Heading 2

Possible futures, probable pasts.

Semantic Heading 3

Possible futures, probable pasts.

Semantic Heading 4

Possible futures, probable pasts.

Semantic Heading 5
Possible futures, probable pasts.
Semantic Heading 6
Possible futures, probable pasts.

Heading Utility Classes

Add these classes to any text element to mimic the semantic header styling.

Possible futures, probable pasts.
Possible futures, probable pasts.
Possible futures, probable pasts.
Possible futures, probable pasts.
Possible futures, probable pasts.
Possible futures, probable pasts.

Carbon Ticker

Ticker Tape - This is some text inside of a div block.

Body Copy

This is the semantic paragraph style.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tempor nec feugiat nisl pretium. In iaculis nunc sed augue lacus viverra vitae congue eu. At tellus at urna condimentum mattis pellentesque id nibh. Pretium aenean pharetra magna ac placerat vestibulum.

Body Copy Utility Classes

Modify the semantic paragraph style with any of these utility classes.

Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tempor nec feugiat nisl pretium. In iaculis nunc sed augue lacus viverra vitae congue eu. At tellus at urna condimentum mattis pellentesque id nibh. Pretium aenean pharetra magna ac placerat vestibulum.

Paragraph Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tempor nec feugiat nisl pretium. In iaculis nunc sed augue lacus viverra vitae congue eu. At tellus at urna condimentum mattis pellentesque id nibh. Pretium aenean pharetra magna ac placerat vestibulum.

Paragraph Helper

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tempor nec feugiat nisl pretium. In iaculis nunc sed augue lacus viverra vitae congue eu. At tellus at urna condimentum mattis pellentesque id nibh. Pretium aenean pharetra magna ac placerat vestibulum.

Lists

Note: the last list item will have its bottom margin removed, this is being handled in the custom code section in page settings

Ordered List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt

Unordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Sed do eiusmod tempor incididunt

Unbulleted List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Sed do eiusmod tempor incididunt

Text Link Utility Classes

Modify a text link's styling with these utility classes.

On Light

On Dark

Type Style Utility Classes

Modify any text element's type styles with these utility classes.

Medium Text
Medium Text
Bold Text
Italic Text
Italic Text
All Caps Text
All caps Text
Strikethrough Text
Strikethrough Text

Type Color Utility Classes

Modify any text element's color styles with these utility classes.

On Light

Primary Text Dark
Secondary Text Dark
Red Text
Green Text
Yellow Text

On Dark

Primary Text Light
Secondary Text Light
Red Text
Green Text
Yellow Text

Rich Text Example

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing (H1)

Static and dynamic content editing (H2)

Static and dynamic content editing (H3)

Static and dynamic content editing (H4)

Static and dynamic content editing (H5)
Static and dynamic content editing (H6)

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.

Background Color & Pattern Utility Classes

Modify any element's background color or pattern style with theses utility classes.

Brand

Persefoni Yellow

Carbon

Black Alpha

White Alpha

Hatch Patterns - Brand

Hatch Persefoni Yellow 100

Hatch Patterns - Black

Hatch Patterns - White

Grid Patterns

Border Color Utility Classes

Brand

Persefoni Yellow

Carbon

Semantic

Elevation Utility Classes

Note: Elevation styling is handled through custom CSS in site settings.

Elevation 04

Elevation 08

Elevation 16

Elevation 24

Buttons

Solid - Light 🛠

Solid - Dark 🛠

Solid - Yellow 🛠

Outline - Light 🛠

Outline - Dark 🛠

Disabled Button

Visually disable a button by adding the .disabled utility class.

Chips

Icon 🛠

Brand 🛠

Persefoni 🛠

Icon 🛠

Brand 🛠

Persefoni 🛠

Icon 🛠

Brand 🛠

Persefoni 🛠

Icon 🛠

Brand 🛠

Persefoni 🛠

Icon 🛠

Brand 🛠

Persefoni 🛠

Deactivated 🛠

.deactivated

Note: Add the .deactivate utility class to .chip to prevent the standard button-like behavior

Disabled Chip

.disabled

Visually disable a chip by adding the .disabled modifier class.

Selectors

Checkboxes

Notes: (1) Each label and set of checkboxes should be contained within a .checkbox__group. (2) The checkbox focus state interaction is done with custom JS in the site settings.

Note: Each label and field are contained within a .field__container

On Light 🛠

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Radio Buttons

On Light 🛠

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

On Dark 🛠

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Switch

On Light 🛠

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

On Dark 🛠

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Fields

Note: Each label and field are contained within a .field__container

Input Field

Note: "All Labels" is Webflow's semantic <label> tag.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Text Area

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Select Field

Note: The browser provided select arrow will show in the WF designer view. It is being overridden with custom code and will not show on the published pages

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Disabled Field

Note: Add (disabled) to both the (All Labels) class, and the (field__input) class

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form Boilerplate

On Light 🛠

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

On Dark 🛠

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Typography

Display

For display type, add the utility class .display-1 or .display-2 to a heading.

Possible futures, probable pasts.

Possible futures, probable pasts.

Semantic Headings

Semantic Heading 1

Possible futures, probable pasts.

Semantic Heading 2

Possible futures, probable pasts.

Semantic Heading 3

Possible futures, probable pasts.

Semantic Heading 4

Possible futures, probable pasts.

Semantic Heading 5
Possible futures, probable pasts.
Semantic Heading 6
Possible futures, probable pasts.

Heading Utility Classes

Add these classes to any text element to mimic the semantic header styling.

Possible futures, probable pasts.
Possible futures, probable pasts.
Possible futures, probable pasts.
Possible futures, probable pasts.
Possible futures, probable pasts.
Possible futures, probable pasts.

Carbon Ticker

Ticker Tape - This is some text inside of a div block.

Body Copy

This is the semantic paragraph style.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tempor nec feugiat nisl pretium. In iaculis nunc sed augue lacus viverra vitae congue eu. At tellus at urna condimentum mattis pellentesque id nibh. Pretium aenean pharetra magna ac placerat vestibulum.

Body Copy Utility Classes

Modify the semantic paragraph style with any of these utility classes.

Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tempor nec feugiat nisl pretium. In iaculis nunc sed augue lacus viverra vitae congue eu. At tellus at urna condimentum mattis pellentesque id nibh. Pretium aenean pharetra magna ac placerat vestibulum.

Paragraph Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tempor nec feugiat nisl pretium. In iaculis nunc sed augue lacus viverra vitae congue eu. At tellus at urna condimentum mattis pellentesque id nibh. Pretium aenean pharetra magna ac placerat vestibulum.

Paragraph Helper

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tempor nec feugiat nisl pretium. In iaculis nunc sed augue lacus viverra vitae congue eu. At tellus at urna condimentum mattis pellentesque id nibh. Pretium aenean pharetra magna ac placerat vestibulum.

Lists

Note: the last list item will have its bottom margin removed, this is being handled in the custom code section in page settings

Ordered List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt

Unordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Sed do eiusmod tempor incididunt

Unbulleted List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Sed do eiusmod tempor incididunt

Text Link Utility Classes

Modify a text link's styling with these utility classes.

On Light

On Dark

Type Style Utility Classes

Modify any text element's type styles with these utility classes.

Medium Text
Medium Text
Bold Text
Italic Text
Italic Text
All Caps Text
All caps Text
Strikethrough Text
Strikethrough Text

Type Color Utility Classes

Modify any text element's color styles with these utility classes.

On Light

Primary Text Dark
Secondary Text Dark
Red Text
Green Text
Yellow Text

On Dark

Primary Text Light
Secondary Text Light
Red Text
Green Text
Yellow Text

Rich Text Example

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing (H1)

Static and dynamic content editing (H2)

Static and dynamic content editing (H3)

Static and dynamic content editing (H4)

Static and dynamic content editing (H5)
Static and dynamic content editing (H6)

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.

Background Color & Pattern Utility Classes

Modify any element's background color or pattern style with theses utility classes.

Brand

Persefoni Yellow

Carbon

Black Alpha

White Alpha

Hatch Patterns - Brand

Hatch Persefoni Yellow 100

Hatch Patterns - Black

Hatch Patterns - White

Grid Patterns

Border Color Utility Classes

Brand

Persefoni Yellow

Carbon

Semantic

Elevation Utility Classes

Note: Elevation styling is handled through custom CSS in site settings.

Elevation 04

Elevation 08

Elevation 16

Elevation 24

Buttons

Solid - Light 🛠

Solid - Dark 🛠

Solid - Yellow 🛠

Outline - Light 🛠

Outline - Dark 🛠

Disabled Button

Visually disable a button by adding the .disabled utility class.

Chips

Icon 🛠

Brand 🛠

Persefoni 🛠

Icon 🛠

Brand 🛠

Persefoni 🛠

Icon 🛠

Brand 🛠

Persefoni 🛠

Icon 🛠

Brand 🛠

Persefoni 🛠

Icon 🛠

Brand 🛠

Persefoni 🛠

Deactivated 🛠

.deactivated

Note: Add the .deactivate utility class to .chip to prevent the standard button-like behavior

Disabled Chip

.disabled

Visually disable a chip by adding the .disabled modifier class.

Selectors

Checkboxes

Notes: (1) Each label and set of checkboxes should be contained within a .checkbox__group. (2) The checkbox focus state interaction is done with custom JS in the site settings.

Note: Each label and field are contained within a .field__container

On Light 🛠

Radio Buttons

On Light 🛠

On Dark 🛠

Switch

On Light 🛠

On Dark 🛠

Fields

Note: Each label and field are contained within a .field__container

Input Field

Note: "All Labels" is Webflow's semantic <label> tag.

Text Area

Select Field

Note: The browser provided select arrow will show in the WF designer view. It is being overridden with custom code and will not show on the published pages

Disabled Field

Note: Add (disabled) to both the (All Labels) class, and the (field__input) class

Form Boilerplate

On Light 🛠

On Dark 🛠