Thanks to SafetyCulture Certified, I understand how to take our program to the next level. It would’ve saved me a lot of time if we had this from the start.
- Home
[ SC Website Design System ]
This is a chip
Section - Accordions
Background colour can be changed to white, light gray or dark gray
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
Section - Cards
All card styles can be used against white, light gray or dark gray background colour
This is a chip
White style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
Gray style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
Purple style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
Blue style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
Yellow style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
Borderless style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
Section - Cards (NO carousel)
# of columns (1, 2, 3 or 4) can be adjusted
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a chip
White style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
White style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
White style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
Section - Cards (YES carousel)
# of columns (1, 2, 3 or 4) can be adjusted
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a chip
White style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
White style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
White style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
White style card
Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
Section - Content block
This is a chip
Borderless content block with image
Image and text can be positioned either on the left or right side
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
This is a chip
Borderless content block with form
Form and text can be positioned either on the left or right side
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
Thanks to SafetyCulture Certified, I understand how to take our program to the next level. It would’ve saved me a lot of time if we had this from the start.
This is a chip
Light gray content block with image
Image and text can be positioned either on the left or right side
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a chip
Light gray content block with image
Image and text can be positioned either on the left or right side
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a chip
Blue content block with image
Image and text can be positioned either on the left or right side
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a chip
Yellow content block with image
Image and text can be positioned either on the left or right side
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a chip
White content block with image
Image and text can be positioned either on the left or right side
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a chip
Dark gray content block with image
Image and text can be positioned either on the left or right side
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
Section - CTA
Container, NO picture
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
Container, WITH picture
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
Full width, NO picture
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
Full width, WITH picture
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a list
This is a list
This is a list
Section - Customer logos
Uploading 8 or more logos will trigger a moving carousel. Logos can be in grayscale or colour.
Uploading less than 8 logos will keep the logos static. Logos can be in grayscale or colour.
Section - External Form
You can also adjust the background colour to light or dark gray.
Section - Media
1 image
1 video
Multiple photos
Multiple videos
Video 1
Video 2
Video 3
Section - Hero
Standard image, background colour can be white, light gray or dark gray.
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
Section - Hero
Background image
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
Section - Hero
Pill image
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
Section - Hero
Background image + Embedded image
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
Section - Hero
Text only, background colour can be white, light gray or dark gray.
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
This is a chip
Section - Home Page Hero
Body copy goes here. Body copy goes here. Body copy goes here. Body copy goes here.
Section - List
You can adjust the # of columns (1 - 4)
This is a list
This is a list
This is a list
This is a list
This is a list
This is a list
This is a list
This is a list
This is a list
This is a list
This is a list
This is a list
Section - Stats
You can add up to 4 columns of stats and you can adjust the colours of the stats (blue, yellow, purple, gray).
1x
Gray statistic
2x
Purple statistic
3x
Blue statistic
4x
Yellow statistic
Section - Text editor
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body copy text. Italicised. Bolded. Underlined. Hyperlink.
Table header cell | Table header cell | Table header cell |
|---|---|---|
Table cell with supporting text | Table cell with supporting text | Table cell with supporting text |
Table cell with supporting text | Table cell with supporting text | Table cell with supporting text |
Table cell with supporting text | Table cell with supporting text | Table cell with supporting text |