Definitions of utility classes and WebFlow symbols for use in building the PCG website.
For display type, add the utility class .display-1 or .display-2 to a heading.
Add these classes to any text element to mimic the semantic header styling.
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.
Modify the semantic paragraph style with any of these utility classes.
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.
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.
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.
Note: the last list item will have its bottom margin removed, this is being handled in the custom code section in page settings
Modify a text link's styling with these utility classes.
Modify any text element's type styles with these utility classes.
Modify any text element's color styles with these utility classes.
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.
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!
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.
Modify any element's background color or pattern style with theses utility classes.
Note: Elevation styling is handled through custom CSS in site settings.
Visually disable a button by adding the .disabled utility class.
Note: Add the .deactivate utility class to .chip to prevent the standard button-like behavior
Visually disable a chip by adding the .disabled modifier class.
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
Note: Each label and field are contained within a .field__container
Note: "All Labels" is Webflow's semantic <label> tag.
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
Note: Add (disabled) to both the (All Labels) class, and the (field__input) class
For display type, add the utility class .display-1 or .display-2 to a heading.
Add these classes to any text element to mimic the semantic header styling.
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.
Modify the semantic paragraph style with any of these utility classes.
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.
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.
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.
Note: the last list item will have its bottom margin removed, this is being handled in the custom code section in page settings
Modify a text link's styling with these utility classes.
Modify any text element's type styles with these utility classes.
Modify any text element's color styles with these utility classes.
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.
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!
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.
Modify any element's background color or pattern style with theses utility classes.
Note: Elevation styling is handled through custom CSS in site settings.
Visually disable a button by adding the .disabled utility class.
Note: Add the .deactivate utility class to .chip to prevent the standard button-like behavior
Visually disable a chip by adding the .disabled modifier class.
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
Note: Each label and field are contained within a .field__container
Note: "All Labels" is Webflow's semantic <label> tag.
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
Note: Add (disabled) to both the (All Labels) class, and the (field__input) class