Style guide
Style guide page contains styles and components used in Softkit template. You can change any style or color from this page and it will be applied for the whole template.
Fonts
Softkit uses the open-sourced Google Fonts typefaces: Red Hat Display and Space Mono. Red Hat Display was originally commissioned by Paula Scher, Pentagram and designed by Jeremy Mickel, MCKL. Space Mono is an original fixed-width type family designed by Colophon Foundry for Google Design.
Roboto - font-weight: 400 / Normal
Roboto - - font-weight: 500 / Medium
Roboto - - font-weight: 700 / Bold
Roboto -- font-weight: 900 / Black
Space Mono - font-weight: 400 / Normal
Space Mono - font-weight: 700 / Bold
Typography
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6
Text large - Lorem ipsum dolor sit amet
Text default - Lorem ipsum dolor sit amet
Text medium - Lorem ipsum dolor sit amet
Text small - Lorem ipsum dolor sit amet
Text extra small - Lorem ipsum dolor sit amet
Label
Label black
Label green
Label light
Label light opacity
Text Uppercase - Lorem ipsum dolor sit amet
Subtitle
Text Primary
Text Secondary
Text Primary Dark
Text White
Text Light Grey
Text Grey
Text Black
Rich Text
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.
Static and dynamic content editing
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.
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
Block Quote
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.
Static and dynamic content editing
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.
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
Colors
Tooltip
Forms
Dropdown
Code snippet
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Promise <Item>
const item = webflow.createItem({
collectionId: '580e63fc8c9a982ac9b8b745',
fields: {
'name': 'Exciting blog post title',
'slug': 'exciting-post',
'_archived': false,
'_draft': false,
'color': '#a98080',
'author': '580e640c8c9a982ac9b8b778',
'post-body': '<p>Blog post contents...</p>',
'post-summary': 'Summary of exciting blog post',
'main-image': '580e63fe8c9a982ac9b8b749',
},
});
