Baseline definitions of global style classes to build components. Changing any of these settings changes them across the website. String global classes together to form combo classes. Any combo classes with bespoke styles applied will not receive changes made to the global style changes here and thus should be avoided.
Defined and flexible core structure we can use on all or most pages.
HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.
Text classes when typography style doesn't match the default HTML tag.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present on your website.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
Manage recurring text and background colors.
For adding space within an element of a section or container. Combine direction and scale for full control.
For adding space around elements within a section or container. Combine direction and scale for full control.
For adding space within components or sections.
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Leverage these global classes to change the base body classes and responsiveness capabilities.
Example of a form component using Folders
Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
1 body {
2 font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
3 background-color: #f4f5f7;
4 display: flex;
5 justify-content: center;
6 align-items: center;
7 min-height: 100vh;
8 margin: 0;
9 padding: 20px;
10 box-sizing: border-box;
11 }
12
13 .main-container {
14 display: flex;
15 background-color: #ffffff;
16 border-radius: 12px;
17 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
18 width: 100%;
19 max-width: 1200px;
20 overflow: hidden;
21 }
Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
1 body {
2 font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
3 background-color: #f4f5f7;
4 display: flex;
5 justify-content: center;
6 align-items: center;
7 min-height: 100vh;
8 margin: 0;
9 padding: 20px;
10 box-sizing: border-box;
11 }
12
13 .main-container {
14 display: flex;
15 background-color: #ffffff;
16 border-radius: 12px;
17 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
18 width: 100%;
19 max-width: 1200px;
20 overflow: hidden;
21 }
Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
1 body {
2 font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
3 background-color: #f4f5f7;
4 display: flex;
5 justify-content: center;
6 align-items: center;
7 min-height: 100vh;
8 margin: 0;
9 padding: 20px;
10 box-sizing: border-box;
11 }
12
13 .main-container {
14 display: flex;
15 background-color: #ffffff;
16 border-radius: 12px;
17 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
18 width: 100%;
19 max-width: 1200px;
20 overflow: hidden;
21 }