Design Express
Support Style Guide
Buttons
1<div class="margin-top margin-1">
2 <!-- If no top margin is needed, delete the "margin-1" class -->
3 <a href="#" class="button-black w-button">Button Text</a>
4</div>1<div class="margin-top margin-1">
2 <!-- If no top margin is needed, delete the "margin-1" class -->
3 <a href="#" class="button-sorbet w-button">Button Text</a>
4</div>1<div class="margin-top margin-1">
2 <!-- If no top margin is needed, delete the "margin-1" class -->
3 <a href="#" class="button-black-secondary w-button">Button Text</a>
4</div>1<div class="margin-top margin-1">
2 <!-- If no top margin is needed, delete the "margin-1" class -->
3 <a href="#" class="button-blue w-button">Button Text</a>
4</div>1<div class="margin-top margin-1">
2 <!-- If no top margin is needed, delete the "margin-1" class -->
3 <a href="#" class="button-blue-secondary w-button">Button Text</a>
4</div>1<div class="margin-top margin-1">
2 <!-- If no top margin is needed, delete the "margin-1" class -->
3 <div class="w-layout-grid support-style-guide_double-cta-component">
4 <div class="button-wrapper">
5 <a href="#" class="button-blue w-button">Button Text</a>
6 </div>
7 <div class="button-wrapper">
8 <a href="#" class="button-blue-secondary w-button">Button Text</a>
9 </div>
10 </div>
11</div>1<div class="margin-top margin-1">
2 <!-- If no top margin is needed, delete the "margin-1" class -->
3 <div class="w-layout-grid support-style-guide_triple-cta-component">
4 <div class="button-wrapper">
5 <a href="#" class="button-blue w-button">Button Text</a>
6 </div>
7 <div class="button-wrapper">
8 <a href="#" class="button-blue w-button">Button Text</a>
9 </div>
10 <div class="button-wrapper">
11 <a href="#" class="button-blue w-button">Button Text</a>
12 </div>
13 </div>
14</div>Tabs
1<div class="support-tabs_link-wrapper">
2 <button class="support-tabs_link" onclick="openTab(event, 'Tab 1')" id="activeTab">Tab 1</button><!--
3 --><button class="support-tabs_link" onclick="openTab(event, 'Tab 2')">Tab 2</button><!--
4 --><button class="support-tabs_link" onclick="openTab(event, 'Tab 3')">Tab 3</button><!--
5 --><button class="support-tabs_link" onclick="openTab(event, 'Tab 4')">Tab 4</button><!--
6 --><button class="support-tabs_link" onclick="openTab(event, 'Tab 5')">Tab 5</button><!--
7 --><button class="support-tabs_link" onclick="openTab(event, 'Tab 6')">Tab 6</button><!--
8 --><button class="support-tabs_link" onclick="openTab(event, 'Tab 7')">Tab 7</button>
9</div>
10
11<div id="Tab 1" class="support-tabs_content">
12 <h3>London</h3>
13 <p>London is the capital city of England.</p>
14</div>
15
16<div id="Tab 2" class="support-tabs_content">
17 <h3>Paris</h3>
18 <p>Paris is the capital of France.</p>
19</div>
20
21<div id="Tab 3" class="support-tabs_content">
22 <h3>Tokyo</h3>
23 <p>Tokyo is the capital of Japan.</p>
24</div>
25
26<div id="Tab 4" class="support-tabs_content">
27 <h3>Tokyo</h3>
28 <p>Tokyo is the capital of Japan.</p>
29</div>
30
31<div id="Tab 5" class="support-tabs_content">
32 <h3>Tokyo</h3>
33 <p>Tokyo is the capital of Japan.</p>
34</div>
35
36<div id="Tab 6" class="support-tabs_content">
37 <h3>Tokyo</h3>
38 <p>Tokyo is the capital of Japan.</p>
39</div>
40
41<div id="Tab 7" class="support-tabs_content">
42 <h3>Tokyo</h3>
43 <p>Tokyo is the capital of Japan.</p>
44</div>Table
| Header | Header | Header | Header | Header |
|---|---|---|---|---|
| Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell |
| Footer | Footer | Footer | Footer | Footer |
1<style>
2 table {
3 table-layout: fixed; /* Optional: for equal column widths */
4 }
5 tr:nth-child(even) {
6 background-color: #f5f5f5;
7 }
8</style>
9
10<div class="margin-bottom margin-2">
11 <!-- If no bottom margin is needed, delete the "margin-2" class -->
12 <div class="overflow-auto">
13 <table class="support-table_component">
14 <caption class="support-table_caption">Sample Caption</caption>
15 <thead class="support-table_head">
16 <tr class="support-table_row">
17 <th class="support-table_header">Header</th>
18 <th class="support-table_header">Header</th>
19 <th class="support-table_header">Header</th>
20 <th class="support-table_header">Header</th>
21 <th class="support-table_header">Header</th>
22 </tr>
23 </thead>
24 <tbody class="support-table_body">
25 <tr class="support-table_row">
26 <td class="support-table_cell">Cell</td>
27 <td class="support-table_cell">Cell</td>
28 <td class="support-table_cell">Cell</td>
29 <td class="support-table_cell">Cell</td>
30 <td class="support-table_cell">Cell</td>
31 </tr>
32 <tr class="support-table_row">
33 <td class="support-table_cell">Cell</td>
34 <td class="support-table_cell">Cell</td>
35 <td class="support-table_cell">Cell</td>
36 <td class="support-table_cell">Cell</td>
37 <td class="support-table_cell">Cell</td>
38 </tr>
39 <tr class="support-table_row">
40 <td class="support-table_cell">Cell</td>
41 <td class="support-table_cell">Cell</td>
42 <td class="support-table_cell">Cell</td>
43 <td class="support-table_cell">Cell</td>
44 <td class="support-table_cell">Cell</td>
45 </tr>
46 <tr class="support-table_row">
47 <td class="support-table_cell">Cell</td>
48 <td class="support-table_cell">Cell</td>
49 <td class="support-table_cell">Cell</td>
50 <td class="support-table_cell">Cell</td>
51 <td class="support-table_cell">Cell</td>
52 </tr>
53 </tbody>
54 <tfoot class="support-table_footer">
55 <tr class="support-table_row">
56 <td class="support-table_cell">Footer</td>
57 <td class="support-table_cell">Footer</td>
58 <td class="support-table_cell">Footer</td>
59 <td class="support-table_cell">Footer</td>
60 <td class="support-table_cell">Footer</td>
61 </tr>
62 </tfoot>
63 </table>
64 </div>
65</div>Notes
Alert: This is some text inside of a div block.
1<div class="margin-bottom margin-2">
2 <!-- If no bottom margin is needed, delete the "margin-2" class -->
3 <div class="support-note red">
4 <strong>Alert:</strong> This is some text inside of a div block.
5 </div>
6</div>Success: This is some text inside of a div block.
1<div class="margin-bottom margin-2">
2 <!-- If no bottom margin is needed, delete the "margin-2" class -->
3 <div class="support-note green">
4 <strong>Success:</strong> This is some text inside of a div block.
5 </div>
6</div>Warning: This is some text inside of a div block.
1<div class="margin-bottom margin-2">
2 <!-- If no bottom margin is needed, delete the "margin-2" class -->
3 <div class="support-note orange">
4 <strong>Warning:</strong> This is some text inside of a div block.
5 </div>
6</div>Danger: This is some text inside of a div block.
1<div class="margin-bottom margin-2">
2 <!-- If no bottom margin is needed, delete the "margin-2" class -->
3 <div class="support-note yellow">
4 <strong>Danger:</strong> This is some text inside of a div block.
5 </div>
6</div>Info: This is some text inside of a div block.
1<div class="margin-bottom margin-2">
2 <!-- If no bottom margin is needed, delete the "margin-2" class -->
3 <div class="support-note">
4 <strong>Info:</strong> This is some text inside of a div block.
5 </div>
6</div>Info: This is some text inside of a div block.
1<div class="margin-bottom margin-2">
2 <!-- If no bottom margin is needed, delete the "margin-2" class -->
3 <div class="support-note pink">
4 <strong>Info:</strong> This is some text inside of a div block.
5 </div>
6</div>Rich Text Template Vectorworks
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
- The rich text element allows you to create and format headings
- The rich text element allows you to create and format headings
- The rich text element allows you to create and format headings
- The rich text element allows you to create and format headings
- The rich text element allows you to create and format headings
- The rich text element allows you to create and format headings
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.
Rich Text Template Enscape
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
- The rich text element allows you to create and format headings
- The rich text element allows you to create and format headings
- The rich text element allows you to create and format headings
- The rich text element allows you to create and format headings
- The rich text element allows you to create and format headings
- The rich text element allows you to create and format headings
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.
Divider
1<div class="padding-vertical padding-2-5">
2 <!-- If no vertical padding is needed, delete the "padding-2-5" class -->
3 <div class="divider-black"></div>
4</div>