Examples for requested CSS updates
These are the examples of the requests in use-cases-css-updates-for-sf-support-content.xlsx. Item numbers correspond to the columns in the sheet.
- Create note style (red, blue, orange)
- List spacing
- Fine print on mobile
- Image width
- Image thumbnail with pop-up effect
- Table style support
- Heading styling
- Remove summary statement from header
B. Create note style (red, blue, orange)
Important: This is a red note.
Important: This is a blue note.
Important: This is an orange note.
C. List spacing
- One
- Two
- First
- Second
- Third: There is excess spacing after this item.
- Three
D. Fine print on mobile
The next paragraph is styled with the fineprint style. View on desktop to see the intended effect. View on mobile to see the issue (style is ignored).
The features and options you see may vary depending upon your role and subscription. If you have any questions regarding your permissions, please contact your administrator.
E. Image width
The following image is 1782 px wide. It should be automatically sized down to fit within the main content column on the support site.
F. Image thumbnail with pop-up effect
The following image should have a popup effect, where when clicked on, it opens full-size. Ideally it should close when pressing Esc, clicking outside of it, or clicking on it again.
G. Table style support
Follow Design System (https://designsystem.pitneycloud.com/web/tables).
| Head 1 | Head 2 | Head 3 |
| red | green | blue |
| one | two | three |
H. Heading styling
Follow Design System (https://designsystem.pitneycloud.com/web/typography#ss-headers-1).
H1
H2
H3
H4
H5
H6
Text with style class
I. Remove summary statement from header
Remove the summary statement from the header section in knowledge articles. It is not possible to provide code for this. Here is a screenshot showing the duplicated information. The first instance should be removed. The second instance is part of the body of the article.
UPDATED: October 27, 2026