<h1>Style Guide</h1>An overview of Jumpstart's styling and interface elements.<br /><a href="/documentation/index.html" target="_blank" rel="noopener noreferrer">Click here</a> to see full documentation.		
		<h4>Colors</h4>
<p>Primaries and grays - please note these are for demonstration purposes only</p>
                Primary
                Primary 2
                Primary 3
                Success
                Warning
                Danger
                Info
                Dark
                Body Color
                Secondary
                Light
                White
		<h4>Typography</h4><p>Headings, body and other common text elements</p>Display 1
                Display 2
                Display 3
                Display 4
                <h1>Heading one</h1>
                <h2>Heading two</h2>
                <h3>Heading three</h3>
                <h4>Heading four</h4>
                <h5>Heading five</h5>
                <h6>Heading six</h6>
                <blockquote>
            “Here’s an insightful quote from the article that is worth isolating for emphasis.”
        </blockquote>
                <p>Lead Text <a href="#">Lead Link</a>
                </p>
                <p>Body Text <a href="#">Body Link</a>
                </p>
                <p>Small Text <a href="#">Small Link</a>
                </p>
                <small>Tiny Text <a href="#">Tiny Link</a>
                </small><h4>Accordions</h4><p>Toggle element based on the Card for displaying discrete portions of information</p>		
					<a href="#can-i-upgrade-later-on" data-toggle="collapse" role="button" aria-expanded="false"  aria-controls="can-i-upgrade-later-on">
							<h6>Can I upgrade later on?</h6>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-caret-right.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<path d="M14.376 11.584C14.6728 11.7819 14.6728 12.2181 14.376 12.416L9.77735 15.4818C9.44507 15.7033 9 15.4651 9 15.0657L9 8.93426C9 8.53491 9.44507 8.29671 9.77735 8.51823L14.376 11.584Z" fill="#2C3038"></path>
							</svg>
					</a>
							Integer ut Oberyn massa. Sed feugiat vitae turpis a porta. Aliquam sagittis interdum Melisandre. Vivamus ornare pharetra diam sit amet tincidunt. Eunuch sit amet pharetra odio. Vivamus in tempor ipsum, sit amet elementum neque. Sed faucibus posuere pharetra. In imperdiet eleifend dui a aliquet. Aliquam imperdiet Tyrion purus vitae rutrum. Donec eu commodo nunc. Mauris dignissim lectus massa, eget cursus quam mollis id. Eddard sit amet ex Jon nibh maximus cursus at vitae mi. Duis tincidunt aliquam mi sed sagittis.
					<a href="#can-i-port-my-data-from-another-provider" data-toggle="collapse" role="button" aria-expanded="false"  aria-controls="can-i-port-my-data-from-another-provider">
							<h6>Can I port my data from another provider?</h6>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-caret-right.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<path d="M14.376 11.584C14.6728 11.7819 14.6728 12.2181 14.376 12.416L9.77735 15.4818C9.44507 15.7033 9 15.4651 9 15.0657L9 8.93426C9 8.53491 9.44507 8.29671 9.77735 8.51823L14.376 11.584Z" fill="#2C3038"></path>
							</svg>
					</a>
							Eunuch nec dapibus ex. Aenean placerat, ex imp convallis dictum, ex nulla rutrum justo, Jon lobortis nisi ex at leo. Sed Tyrion aliquet sem vel pharetra. Vestibulum ante ipsum primis in faucibus Hodor luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis a sapien quis quam auctor feugiat. Donec volutpat condimentum risus, eu iaculis nibh dapibus eu.
					<a href="#are-my-food-photos-stored-forever-in-the-cloud" data-toggle="collapse" role="button" aria-expanded="false"  aria-controls="are-my-food-photos-stored-forever-in-the-cloud">
							<h6>Are my food photos stored forever in the cloud?</h6>
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-caret-right.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<path d="M14.376 11.584C14.6728 11.7819 14.6728 12.2181 14.376 12.416L9.77735 15.4818C9.44507 15.7033 9 15.4651 9 15.0657L9 8.93426C9 8.53491 9.44507 8.29671 9.77735 8.51823L14.376 11.584Z" fill="#2C3038"></path>
							</svg>
					</a>
Volantisi fringilla, unuch eu sagittis sagittis, urna Loras luctus odio, vitae hendrerit massa dui ac est. Donec leo tortor, Tyrion et aliquet at, convallis imp mi. Vivamus turpis diam, ultrices et tempus quis, sollicitudin et risus. Pellentesque nec sapien imp dolor condimentum condimentum ut sed neque. Integer efficitur accumsan risus, vitae posuere massa aliquam at.
		<h4>Alerts</h4><p>Used for adding notices around the interface</p>		
							<p>A simple Primary alert. Here is <a href="https://jumpstart.mediumra.re/style-guide.html#">an example link</a>.</p>
							<p>A simple Primary 2 alert. Here is <a href="https://jumpstart.mediumra.re/style-guide.html#">an example link</a>.</p>
							<p>A simple Primary 3 alert. Here is <a href="https://jumpstart.mediumra.re/style-guide.html#">an example link</a>.</p>
							<p>A simple Success alert. Here is <a href="https://jumpstart.mediumra.re/style-guide.html#">an example link</a>.</p>
							<p>A simple Warning alert. Here is <a href="https://jumpstart.mediumra.re/style-guide.html#">an example link</a>.</p>
							<p>A simple Danger alert. Here is <a href="https://jumpstart.mediumra.re/style-guide.html#">an example link</a>.</p>
							<p>A simple Info alert. Here is <a href="https://jumpstart.mediumra.re/style-guide.html#">an example link</a>.</p>
							<p>A simple Light alert. Here is <a href="https://jumpstart.mediumra.re/style-guide.html#">an example link</a>.</p>
							<p>A simple Secondary alert. Here is <a href="https://jumpstart.mediumra.re/style-guide.html#">an example link</a>.</p>
		<h4>Avatars</h4><p>Represent users or customers around the interface - please note this is for demonstration purposes only.</p>		
                <h6>Sizes</h6>
                    avatar-xs
                    <img src="https://hiwaad.com/wp-content/uploads/2019/08/female-3.jpg" alt="Avatar">
                    avatar-sm
                    <img src="https://hiwaad.com/wp-content/uploads/2019/08/female-3.jpg" alt="Avatar">
                    avatar
                    <img src="https://hiwaad.com/wp-content/uploads/2019/08/female-3.jpg" alt="Avatar">
                    avatar-lg
                    <img src="https://hiwaad.com/wp-content/uploads/2019/08/female-3.jpg" alt="Avatar">
                    avatar-xl
                    <img src="https://hiwaad.com/wp-content/uploads/2019/08/female-3.jpg" alt="Avatar">
                <h6>Group</h6>
                <ul>
                  <li>
                    <img src="https://hiwaad.com/wp-content/uploads/2019/08/male-2.jpg" alt="Avatar">
                  </li>
                  <li>
                    <img src="https://hiwaad.com/wp-content/uploads/2019/08/male-3.jpg" alt="Avatar">
                  </li>
                  <li>
                    <img src="https://hiwaad.com/wp-content/uploads/2019/08/male-4.jpg" alt="Avatar">
                  </li>
                  <li>
                    <img src="https://hiwaad.com/wp-content/uploads/2019/08/male-5.jpg" alt="Avatar">
                  </li>
                </ul>
                <h6>Badges</h6>
                      <img src="https://hiwaad.com/wp-content/uploads/2019/08/female-1.jpg" alt="Avatar">
                      <img src="https://hiwaad.com/wp-content/uploads/2019/08/female-3.jpg" alt="Avatar">
                      <img src="https://hiwaad.com/wp-content/uploads/2019/08/male-3.jpg" alt="Avatar">
                      <img src="https://hiwaad.com/wp-content/uploads/2019/08/male-2.jpg" alt="Avatar">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-check.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M20 6L9 17L4 12" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
		<h4>Background Images</h4><p>A simple utility to transform an image into a background for an element.</p>		
                  <img alt="Background Image" src="https://hiwaad.com/wp-content/uploads/2019/08/thumb-7.jpg">
                    That's a background image behind me.
		<h4 style="font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">Badges</h4><p>Combine with other components to display metadata. Please note these are created with HTML and are for developers only.</p> 		
                <h6>Variations</h6>
                    Badge
                    Badge Pill
                    <a href="#">Link</a>
                <h6>Colors</h6>
                    Primary
                    Primary 2
                    Primary 3
                    Success
                    Warning
                    Danger
                    Info
                <h6>As links</h6>
                    <a href="#">Primary</a>
                    <a href="#">Primary 2</a>
                    <a href="#">Primary 3</a>
                    <a href="#">Success</a>
                    <a href="#">Warning</a>
                    <a href="#">Danger</a>
                    <a href="#">Info</a>
		<h4>Breadcrumbs</h4><p>Indicate the current page’s location within a navigational hierarchy</p>		
			<nav aria-label="breadcrumb">
                  <ol>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">Category</a>
                    </li>
                    <li aria-current="page">Current</li>
                  </ol>
                </nav>		
		<h4>Buttons</h4><p>Styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Please note these are created with HTML.</p>		
                <h6>Sizes</h6>
                    <a href="#">Small</a>
                    <a href="#">Standard</a>
                    <a href="#">Large</a>
                <h6>Variations</h6>
                    <a href="#">Filled</a>
                    <a href="#">Outline</a>
                    <a href="#">
                        Icon
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-arrow-right.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M12 5L19 12L12 19M5 12H18H5Z" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                    </a>
                    <a href="#">
                        Icon
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-arrow-right.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M12 5L19 12L12 19M5 12H18H5Z" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                    </a>
                <h6>Colors</h6>
                    <button type="button">Primary</button>
                    <button type="button">Primary 2</button>
                    <button type="button">Primary 3</button>
                    <button type="button">Success</button>
                    <button type="button">Warning</button>
                    <button type="button">Danger</button>
                    <button type="button">Info</button>
                <h6>Circle Buttons</h6>
                    <a href="#">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-search.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21 21L16.65 16.65" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                    </a>
                    <a href="#">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-search.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21 21L16.65 16.65" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                    </a>
                    <a href="#">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-search.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21 21L16.65 16.65" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                    </a>
                <h6>States</h6>
                    <a href="#">Idle</a>
                    <button disabled="disabled">Disabled</button>
		<h4>Cards</h4><p>Structural component for displaying boxed content</p>		
                    		<h4>Default Style</h4>
                    		<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p><p><a href="https://jumpstart.mediumra.re/style-guide.html#">Link Here</a></p>
                    		<h4>On Dark BG</h4>
                    		<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p><p><a href="https://jumpstart.mediumra.re/style-guide.html#">Link Here</a></p>
                    		<h4>Light BG</h4>
                    		<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p><p><a href="https://jumpstart.mediumra.re/style-guide.html#">Link Here</a></p>
		<h4>Dividers</h4><p>Decorative elements to give your site some dynamic appeal</p>		
                <h6>Horizontal Dividers</h6>
                <h6>Vertical Dividers</h6>
                  Divider on the left
                  Divider on the right
		<h4>Dropdowns</h4><p>Styles for navigation and context dropdowns. Please note these are created with HTML and are for developers only.</p>		
                <h6>Menu Alignment</h6>
                      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button">
                        Dropdown
                      </button>
                      <a href="style-guide.html" target="_blank" rel="noopener noreferrer">Style Guide</a><a href="plugins.html" target="_blank" rel="noopener noreferrer">Plugins</a><a href="navigation-bars.html" target="_blank" rel="noopener noreferrer">Navigation Bars</a>
                      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button">
                        Dropup
                      </button>
                      <a href="style-guide.html" target="_blank" rel="noopener noreferrer">Style Guide</a><a href="plugins.html" target="_blank" rel="noopener noreferrer">Plugins</a><a href="navigation-bars.html" target="_blank" rel="noopener noreferrer">Navigation Bars</a>
                      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button">
                        Dropright
                      </button>
                      <a href="style-guide.html" target="_blank" rel="noopener noreferrer">Style Guide</a><a href="plugins.html" target="_blank" rel="noopener noreferrer">Plugins</a><a href="navigation-bars.html" target="_blank" rel="noopener noreferrer">Navigation Bars</a>
                      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button">
                        Dropleft
                      </button>
                      <a href="style-guide.html" target="_blank" rel="noopener noreferrer">Style Guide</a><a href="plugins.html" target="_blank" rel="noopener noreferrer">Plugins</a><a href="navigation-bars.html" target="_blank" rel="noopener noreferrer">Navigation Bars</a>
                <h6>Dropdown Item Variations</h6>
                      <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button">
                        Dropdown
                      </button>
                        <h6>Heading</h6><a href="style-guide.html" target="_blank" rel="noopener noreferrer">Style Guide</a><a href="plugins.html" target="_blank" rel="noopener noreferrer">Plugins</a><a href="navigation-bars.html" target="_blank" rel="noopener noreferrer">Navigation Bars</a>
                        <a href="documentation/index.html" target="_blank" rel="noopener noreferrer">Documentation</a><a href="documentation/changelog.html" target="_blank" rel="noopener noreferrer">Changelog</a><a href="#">Disabled item</a>
              <h6>Multi-Level</h6>
                    <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown-grid" type="button">
                      Dropdown
                    </button>
                          <!-- start of dropdown level -->
                            <a data-toggle="dropdown-grid" href="#">Next Level</a>
                                  <!-- start of dropdown level -->
                                    <a data-toggle="dropdown-grid" href="#">Next Level</a>
                                          <!-- start of dropdown level -->
                                            <a data-toggle="dropdown-grid" href="#">Next Level</a>
                                                  Level 4!
                                          <!-- end of dropdown level -->
                                  <!-- end of dropdown level -->
                          <!-- end of dropdown level -->
              <h6>Multi-Level Hover</h6>
                    <button aria-expanded="false" aria-haspopup="true" data-hover="true" data-toggle="dropdown-grid" type="button">
                      Dropdown
                    </button>
                          <!-- start of dropdown level -->
                            <a data-hover="true" data-toggle="dropdown-grid" href="#">Next Level</a>
                                  <!-- start of dropdown level -->
                                    <a data-hover="true" data-toggle="dropdown-grid" href="#">Next Level</a>
                                          <!-- start of dropdown level -->
                                            <a data-hover="true" data-toggle="dropdown-grid" href="#">Next Level</a>
                                                  Level 4!
                                          <!-- end of dropdown level -->
                                  <!-- end of dropdown level -->
                          <!-- end of dropdown level -->
              <h6>Full Width</h6>
                    <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown-grid" type="button">
                      Dropdown
                    </button>
                        Hello, I am the fullscreen dropdown content.
              <h6>Rich Dropdown Content</h6>
                    <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown-grid" type="button">
                      Dropdown
                    </button>
                          <a href="#">
                            <h6>Style Guide</h6>
                            A guide to Jumpstart's many components
                          </a>
                          <a href="#">
                            <h6>Plugins</h6>
                            Extend the functionality of your site.
                          </a>
		<h4 style="font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">Forms - Text Inputs</h4><p>Size and state variations for text inputs. Please note these are created with HTML and are for developers only.</p> 		
                <h6>Input Sizes</h6>
                      <input placeholder="Small" type="text">
                      <input placeholder="Standard" type="text">
                      <input placeholder="Large" type="text">
                <h6>Textareas</h6>
                      <textarea placeholder="Small" rows="5"></textarea>
                      <textarea placeholder="Standard" rows="5"></textarea>
                      <textarea placeholder="Large" rows="5"></textarea>
                <h6>States</h6>
                      <input placeholder="Standard" type="text">
                    <form>
                      <input placeholder="Invalid input" type="text">
                    </form>
                      <input disabled="disabled" placeholder="Disabled" type="text">
                <h6>Labelled Input</h6>
                      <label for="labelled-input">Label</label>
                      <input id="labelled-input" placeholder="Placeholder" type="text">
                      <small>* Input hint text</small>
                <h6>Input Group</h6>
                          https://
                        <input placeholder="url" type="text">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-search.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M21 21L16.65 16.65" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                        <input placeholder="Search" type="search">
                        <input placeholder="Name" type="text">
                          @example.com
                          $
                        <input type="text">
                          .00
		<h4>Forms - Selectables</h4><p>Checkboxes, Radios and Select dropdowns. Please note these are created with HTML and are for developers only.</p>		
                <h6>Checkboxes</h6>
                    <input type="checkbox" id="check-1">
                    <label for="check-1">Unchecked</label>
                    <input type="checkbox" id="check-2" checked="">
                    <label for="check-2">Checked</label>
                <h6>Radios</h6>
                    <input type="radio" id="radio-1" name="radio">
                    <label for="radio-1">Unchecked</label>
                    <input type="radio" id="radio-2" name="radio" checked="">
                    <label for="radio-2">Checked</label>
                <h6>Switches</h6>
                    <input type="checkbox" id="switch-1">
                    <label for="switch-1">Unchecked</label>
                    <input type="checkbox" id="switch-2" checked="">
                    <label for="switch-2">Checked</label>
                <h6>Select</h6>
                      <select>
                        <option selected="">Select an option</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                      <img src="https://hiwaad.com/wp-content/uploads/2019/08/icon-caret-down.png" alt="Arrow Down">
                      <select>
                        <option selected="">Select an option</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                      <img src="https://hiwaad.com/wp-content/uploads/2019/08/icon-caret-down.png">
                      <select>
                        <option selected="">Select an option</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                      <img src="https://hiwaad.com/wp-content/uploads/2019/08/icon-caret-down.png" alt="Arrow Down">
		<h4>Icons - Interface</h4><p>Common interface iconography. For all icons, see the <a href="https://jumpstart.mediumra.re/documentation/graphics-icons.html" target="_blank" rel="noopener noreferrer" data-wplink-edit="true">Icons Reference</a></p>[jumpstart_icon icon_name="Interface Close"][jumpstart_icon icon_name="Interface Search"][jumpstart_icon icon_name="Interface Shopping Bag"][jumpstart_icon icon_name="Interface Cart"][jumpstart_icon icon_name="Interface Map Marker"][jumpstart_icon icon_name="Interface Menu"][jumpstart_icon icon_name="Interface Minus"][jumpstart_icon icon_name="Interface More"][jumpstart_icon icon_name="Interface More Vertical"][jumpstart_icon icon_name="Interface Heart"][jumpstart_icon icon_name="Interface Envelope"][jumpstart_icon icon_name="Interface Chevron Down"][jumpstart_icon icon_name="Interface Chevron Left"][jumpstart_icon icon_name="Interface Chevron Right"][jumpstart_icon icon_name="Interface Chevron Up"][jumpstart_icon icon_name="Interface Clock"][jumpstart_icon icon_name="Interface Caret Right"][jumpstart_icon icon_name="Interface Caret Up"][jumpstart_icon icon_name="Interface Check"][jumpstart_icon icon_name="Interface Caret Left"][jumpstart_icon icon_name="Interface Caret Down"][jumpstart_icon icon_name="Interface Arrow Right"][jumpstart_icon icon_name="Interface Calendar"][jumpstart_icon icon_name="Interface Arrow Left"][jumpstart_icon icon_name="Interface Arrow Down"]<h4>Icons - Social</h4><p>Common social network icons. For all icons, see the <a href="http://jumpstart.tommusdemos.wpengine.com/features/icons-reference/" target="_blank" rel="noopener noreferrer">Icons Reference</a></p> [jumpstart_icon icon_name="Dribbble Icon"][jumpstart_icon icon_name="Facebook Icon"][jumpstart_icon icon_name="GitHub Icon"][jumpstart_icon icon_name="Google Icon"][jumpstart_icon icon_name="Instagram Icon"][jumpstart_icon icon_name="KickStarter Icon"][jumpstart_icon icon_name="LinkedIn Icon"][jumpstart_icon icon_name="Pinterest Icon"][jumpstart_icon icon_name="Skype Icon"][jumpstart_icon icon_name="Slack Icon"][jumpstart_icon icon_name="Spotify Icon"][jumpstart_icon icon_name="Twitter Icon"][jumpstart_icon icon_name="Unsplash Icon"][jumpstart_icon icon_name="Vimeo Icon"][jumpstart_icon icon_name="YouTube Icon"]<h4 style="font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">Icons - Usage</h4><p>Handy utilities for displaying icons around the interface. For all icons, see the <a href="http://jumpstart.tommusdemos.wpengine.com/features/icons-reference/" target="_blank" rel="noopener noreferrer">Icons Reference</a></p>		
                <h6>Sizes</h6>
                    icon-xs
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    icon-sm
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    icon
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    icon-lg
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    icon-xl
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                <h6>Colors</h6>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                <h6>Variations</h6>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/attachment-2.svg ">
    <title>Icon For Attachment#2</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M11.7573593,15.2426407 L8.75735931,15.2426407 C8.20507456,15.2426407 7.75735931,15.6903559 7.75735931,16.2426407 C7.75735931,16.7949254 8.20507456,17.2426407 8.75735931,17.2426407 L11.7573593,17.2426407 L11.7573593,18.2426407 C11.7573593,19.3472102 10.8619288,20.2426407 9.75735931,20.2426407 L5.75735931,20.2426407 C4.65278981,20.2426407 3.75735931,19.3472102 3.75735931,18.2426407 L3.75735931,14.2426407 C3.75735931,13.1380712 4.65278981,12.2426407 5.75735931,12.2426407 L9.75735931,12.2426407 C10.8619288,12.2426407 11.7573593,13.1380712 11.7573593,14.2426407 L11.7573593,15.2426407 Z" fill="#000000" opacity="0.3" transform="translate(7.757359, 16.242641) rotate(-45.000000) translate(-7.757359, -16.242641) "></path>
        <path d="M12.2426407,8.75735931 L15.2426407,8.75735931 C15.7949254,8.75735931 16.2426407,8.30964406 16.2426407,7.75735931 C16.2426407,7.20507456 15.7949254,6.75735931 15.2426407,6.75735931 L12.2426407,6.75735931 L12.2426407,5.75735931 C12.2426407,4.65278981 13.1380712,3.75735931 14.2426407,3.75735931 L18.2426407,3.75735931 C19.3472102,3.75735931 20.2426407,4.65278981 20.2426407,5.75735931 L20.2426407,9.75735931 C20.2426407,10.8619288 19.3472102,11.7573593 18.2426407,11.7573593 L14.2426407,11.7573593 C13.1380712,11.7573593 12.2426407,10.8619288 12.2426407,9.75735931 L12.2426407,8.75735931 Z" fill="#000000" transform="translate(16.242641, 7.757359) rotate(-45.000000) translate(-16.242641, -7.757359) "></path>
        <path d="M5.89339828,3.42893219 C6.44568303,3.42893219 6.89339828,3.87664744 6.89339828,4.42893219 L6.89339828,6.42893219 C6.89339828,6.98121694 6.44568303,7.42893219 5.89339828,7.42893219 C5.34111353,7.42893219 4.89339828,6.98121694 4.89339828,6.42893219 L4.89339828,4.42893219 C4.89339828,3.87664744 5.34111353,3.42893219 5.89339828,3.42893219 Z M11.4289322,5.13603897 C11.8194565,5.52656326 11.8194565,6.15972824 11.4289322,6.55025253 L10.0147186,7.96446609 C9.62419433,8.35499039 8.99102936,8.35499039 8.60050506,7.96446609 C8.20998077,7.5739418 8.20998077,6.94077682 8.60050506,6.55025253 L10.0147186,5.13603897 C10.4052429,4.74551468 11.0384079,4.74551468 11.4289322,5.13603897 Z M0.600505063,5.13603897 C0.991029355,4.74551468 1.62419433,4.74551468 2.01471863,5.13603897 L3.42893219,6.55025253 C3.81945648,6.94077682 3.81945648,7.5739418 3.42893219,7.96446609 C3.0384079,8.35499039 2.40524292,8.35499039 2.01471863,7.96446609 L0.600505063,6.55025253 C0.209980772,6.15972824 0.209980772,5.52656326 0.600505063,5.13603897 Z" fill="#000000" opacity="0.3" transform="translate(6.014719, 5.843146) rotate(-45.000000) translate(-6.014719, -5.843146) "></path>
        <path d="M17.9142136,15.4497475 C18.4664983,15.4497475 18.9142136,15.8974627 18.9142136,16.4497475 L18.9142136,18.4497475 C18.9142136,19.0020322 18.4664983,19.4497475 17.9142136,19.4497475 C17.3619288,19.4497475 16.9142136,19.0020322 16.9142136,18.4497475 L16.9142136,16.4497475 C16.9142136,15.8974627 17.3619288,15.4497475 17.9142136,15.4497475 Z M23.4497475,17.1568542 C23.8402718,17.5473785 23.8402718,18.1805435 23.4497475,18.5710678 L22.0355339,19.9852814 C21.6450096,20.3758057 21.0118446,20.3758057 20.6213203,19.9852814 C20.2307961,19.5947571 20.2307961,18.9615921 20.6213203,18.5710678 L22.0355339,17.1568542 C22.4260582,16.76633 23.0592232,16.76633 23.4497475,17.1568542 Z M12.6213203,17.1568542 C13.0118446,16.76633 13.6450096,16.76633 14.0355339,17.1568542 L15.4497475,18.5710678 C15.8402718,18.9615921 15.8402718,19.5947571 15.4497475,19.9852814 C15.0592232,20.3758057 14.4260582,20.3758057 14.0355339,19.9852814 L12.6213203,18.5710678 C12.2307961,18.1805435 12.2307961,17.5473785 12.6213203,17.1568542 Z" fill="#000000" opacity="0.3" transform="translate(18.035534, 17.863961) scale(1, -1) rotate(45.000000) translate(-18.035534, -17.863961) "></path>
    </g>
</svg>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/devices/lte-2.svg ">
    <title>Icon For LTE#2</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.4508979,17.4029496 L15.1784978,15.8599014 C16.324501,14.9149052 17,13.5137472 17,12 C17,10.4912085 16.3289582,9.09418404 15.1893841,8.14910121 L16.466112,6.60963188 C18.0590936,7.93073905 19,9.88958759 19,12 C19,14.1173586 18.0528606,16.0819686 16.4508979,17.4029496 Z M19.0211112,20.4681628 L17.7438102,18.929169 C19.7927036,17.2286725 21,14.7140097 21,12 C21,9.28974232 19.7960666,6.77820732 17.7520315,5.07766256 L19.031149,3.54017812 C21.5271817,5.61676443 23,8.68922234 23,12 C23,15.3153667 21.523074,18.3916375 19.0211112,20.4681628 Z M7.54910207,17.4029496 C5.94713944,16.0819686 5,14.1173586 5,12 C5,9.88958759 5.94090645,7.93073905 7.53388797,6.60963188 L8.81061588,8.14910121 C7.67104182,9.09418404 7,10.4912085 7,12 C7,13.5137472 7.67549895,14.9149052 8.82150222,15.8599014 L7.54910207,17.4029496 Z M4.9788888,20.4681628 C2.47692603,18.3916375 1,15.3153667 1,12 C1,8.68922234 2.47281829,5.61676443 4.96885102,3.54017812 L6.24796852,5.07766256 C4.20393339,6.77820732 3,9.28974232 3,12 C3,14.7140097 4.20729644,17.2286725 6.25618985,18.929169 L4.9788888,20.4681628 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
        <path d="M11,14.2919782 C10.1170476,13.9061998 9.5,13.0251595 9.5,12 C9.5,10.6192881 10.6192881,9.5 12,9.5 C13.3807119,9.5 14.5,10.6192881 14.5,12 C14.5,13.0251595 13.8829524,13.9061998 13,14.2919782 L13,20 C13,20.5522847 12.5522847,21 12,21 C11.4477153,21 11,20.5522847 11,20 L11,14.2919782 Z" fill="#000000"></path>
    </g>
</svg>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/settings-1.svg ">
    <title>Icon For Settings-1</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M7,3 L17,3 C19.209139,3 21,4.790861 21,7 C21,9.209139 19.209139,11 17,11 L7,11 C4.790861,11 3,9.209139 3,7 C3,4.790861 4.790861,3 7,3 Z M7,9 C8.1045695,9 9,8.1045695 9,7 C9,5.8954305 8.1045695,5 7,5 C5.8954305,5 5,5.8954305 5,7 C5,8.1045695 5.8954305,9 7,9 Z" fill="#000000"></path>
        <path d="M7,13 L17,13 C19.209139,13 21,14.790861 21,17 C21,19.209139 19.209139,21 17,21 L7,21 C4.790861,21 3,19.209139 3,17 C3,14.790861 4.790861,13 7,13 Z M17,19 C18.1045695,19 19,18.1045695 19,17 C19,15.8954305 18.1045695,15 17,15 C15.8954305,15 15,15.8954305 15,17 C15,18.1045695 15.8954305,19 17,19 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-check.svg " xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M20 6L9 17L4 12" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
		<h4 style="font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">Icon Arrangements</h4><p>Preset arrangements for icons with associated content. Please note these are created with HTML and are for developers only.</p> 		
                <ul>
                  <li>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/layout/layout-left-panel-2.svg">
    <title>Icon For Layout-left-panel-2</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M10,4 L21,4 C21.5522847,4 22,4.44771525 22,5 L22,7 C22,7.55228475 21.5522847,8 21,8 L10,8 C9.44771525,8 9,7.55228475 9,7 L9,5 C9,4.44771525 9.44771525,4 10,4 Z M10,10 L21,10 C21.5522847,10 22,10.4477153 22,11 L22,13 C22,13.5522847 21.5522847,14 21,14 L10,14 C9.44771525,14 9,13.5522847 9,13 L9,11 C9,10.4477153 9.44771525,10 10,10 Z M10,16 L21,16 C21.5522847,16 22,16.4477153 22,17 L22,19 C22,19.5522847 21.5522847,20 21,20 L10,20 C9.44771525,20 9,19.5522847 9,19 L9,17 C9,16.4477153 9.44771525,16 10,16 Z" fill="#000000"></path>
        <rect fill="#000000" opacity="0.3" x="2" y="4" width="5" height="16" rx="1"></rect>
    </g>
</svg>
                      <h6>Multiple Layouts</h6>
                  </li>
                  <li>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/shopping/box-2.svg">
    <title>Icon For Box#2</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M4,9.67471899 L10.880262,13.6470401 C10.9543486,13.689814 11.0320333,13.7207107 11.1111111,13.740321 L11.1111111,21.4444444 L4.49070127,17.526473 C4.18655139,17.3464765 4,17.0193034 4,16.6658832 L4,9.67471899 Z M20,9.56911707 L20,16.6658832 C20,17.0193034 19.8134486,17.3464765 19.5092987,17.526473 L12.8888889,21.4444444 L12.8888889,13.6728275 C12.9050191,13.6647696 12.9210067,13.6561758 12.9368301,13.6470401 L20,9.56911707 Z" fill="#000000"></path>
        <path d="M4.21611835,7.74669402 C4.30015839,7.64056877 4.40623188,7.55087574 4.5299008,7.48500698 L11.5299008,3.75665466 C11.8237589,3.60013944 12.1762411,3.60013944 12.4700992,3.75665466 L19.4700992,7.48500698 C19.5654307,7.53578262 19.6503066,7.60071528 19.7226939,7.67641889 L12.0479413,12.1074394 C11.9974761,12.1365754 11.9509488,12.1699127 11.9085461,12.2067543 C11.8661433,12.1699127 11.819616,12.1365754 11.7691509,12.1074394 L4.21611835,7.74669402 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                      <h6>Modular Components</h6>
                  </li>
                  <li>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                      <h6>Suits Your Style</h6>
                  </li>
                </ul>
                <ul>
                  <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-check.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M20 6L9 17L4 12" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                      <h6>Unlimited Data</h6>
                  </li>
                  <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-check.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M20 6L9 17L4 12" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                      <h6>Premium Support</h6>
                  </li>
                  <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-x.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M18 6L6 18" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M6 6L18 18" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                      <h6>Unsupported Feature</h6>
                  </li>
                </ul>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/layout/layout-left-panel-2.svg">
    <title>Icon For Layout-left-panel-2</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M10,4 L21,4 C21.5522847,4 22,4.44771525 22,5 L22,7 C22,7.55228475 21.5522847,8 21,8 L10,8 C9.44771525,8 9,7.55228475 9,7 L9,5 C9,4.44771525 9.44771525,4 10,4 Z M10,10 L21,10 C21.5522847,10 22,10.4477153 22,11 L22,13 C22,13.5522847 21.5522847,14 21,14 L10,14 C9.44771525,14 9,13.5522847 9,13 L9,11 C9,10.4477153 9.44771525,10 10,10 Z M10,16 L21,16 C21.5522847,16 22,16.4477153 22,17 L22,19 C22,19.5522847 21.5522847,20 21,20 L10,20 C9.44771525,20 9,19.5522847 9,19 L9,17 C9,16.4477153 9.44771525,16 10,16 Z" fill="#000000"></path>
        <rect fill="#000000" opacity="0.3" x="2" y="4" width="5" height="16" rx="1"></rect>
    </g>
</svg>
                  <h5>Multiple Layouts</h5>
                    Non pulvinar neque laoreet suspendisse interdum Catelyn libero id. Olenna imp leo in vitae turpis massa. Sapien habitant Tyrion.
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/shopping/box-2.svg">
    <title>Icon For Box#2</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M4,9.67471899 L10.880262,13.6470401 C10.9543486,13.689814 11.0320333,13.7207107 11.1111111,13.740321 L11.1111111,21.4444444 L4.49070127,17.526473 C4.18655139,17.3464765 4,17.0193034 4,16.6658832 L4,9.67471899 Z M20,9.56911707 L20,16.6658832 C20,17.0193034 19.8134486,17.3464765 19.5092987,17.526473 L12.8888889,21.4444444 L12.8888889,13.6728275 C12.9050191,13.6647696 12.9210067,13.6561758 12.9368301,13.6470401 L20,9.56911707 Z" fill="#000000"></path>
        <path d="M4.21611835,7.74669402 C4.30015839,7.64056877 4.40623188,7.55087574 4.5299008,7.48500698 L11.5299008,3.75665466 C11.8237589,3.60013944 12.1762411,3.60013944 12.4700992,3.75665466 L19.4700992,7.48500698 C19.5654307,7.53578262 19.6503066,7.60071528 19.7226939,7.67641889 L12.0479413,12.1074394 C11.9974761,12.1365754 11.9509488,12.1699127 11.9085461,12.2067543 C11.8661433,12.1699127 11.819616,12.1365754 11.7691509,12.1074394 L4.21611835,7.74669402 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    <h5>Modular Components</h5>
                      Khaleesi vedit sodales ut eu. Melisandre pellentesque elit eget Gendry est sociis natoque penatibus. Eunuch pulvinar sapien et Loras.
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/thunder-move.svg">
    <title>Icon For Thunder-move</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M16.3740377,19.9389434 L22.2226499,11.1660251 C22.4524142,10.8213786 22.3592838,10.3557266 22.0146373,10.1259623 C21.8914367,10.0438285 21.7466809,10 21.5986122,10 L17,10 L17,4.47708173 C17,4.06286817 16.6642136,3.72708173 16.25,3.72708173 C15.9992351,3.72708173 15.7650616,3.85240758 15.6259623,4.06105658 L9.7773501,12.8339749 C9.54758575,13.1786214 9.64071616,13.6442734 9.98536267,13.8740377 C10.1085633,13.9561715 10.2533191,14 10.4013878,14 L15,14 L15,19.5229183 C15,19.9371318 15.3357864,20.2729183 15.75,20.2729183 C16.0007649,20.2729183 16.2349384,20.1475924 16.3740377,19.9389434 Z" fill="#000000"></path>
        <path d="M4.5,5 L9.5,5 C10.3284271,5 11,5.67157288 11,6.5 C11,7.32842712 10.3284271,8 9.5,8 L4.5,8 C3.67157288,8 3,7.32842712 3,6.5 C3,5.67157288 3.67157288,5 4.5,5 Z M4.5,17 L9.5,17 C10.3284271,17 11,17.6715729 11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L4.5,20 C3.67157288,20 3,19.3284271 3,18.5 C3,17.6715729 3.67157288,17 4.5,17 Z M2.5,11 L6.5,11 C7.32842712,11 8,11.6715729 8,12.5 C8,13.3284271 7.32842712,14 6.5,14 L2.5,14 C1.67157288,14 1,13.3284271 1,12.5 C1,11.6715729 1.67157288,11 2.5,11 Z" fill="#000000" opacity="0.3"></path>
    </g>
</svg>
                    <h5>Suits Your Style</h5>
                      Drogon sed ut perspiciatis unde omnis iste error sit voluptatem accusantium doloremque laudantium, totam aperiam, eaque Arya.
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/design/select.svg">
    <title>Icon For Select</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon opacity="0" points="0 0 24 0 24 24 0 24"></polygon>
        <path d="M18.5,8 C17.1192881,8 16,6.88071187 16,5.5 C16,4.11928813 17.1192881,3 18.5,3 C19.8807119,3 21,4.11928813 21,5.5 C21,6.88071187 19.8807119,8 18.5,8 Z M18.5,21 C17.1192881,21 16,19.8807119 16,18.5 C16,17.1192881 17.1192881,16 18.5,16 C19.8807119,16 21,17.1192881 21,18.5 C21,19.8807119 19.8807119,21 18.5,21 Z M5.5,21 C4.11928813,21 3,19.8807119 3,18.5 C3,17.1192881 4.11928813,16 5.5,16 C6.88071187,16 8,17.1192881 8,18.5 C8,19.8807119 6.88071187,21 5.5,21 Z" fill="#000000" opacity="0.3"></path>
        <path d="M5.5,8 C4.11928813,8 3,6.88071187 3,5.5 C3,4.11928813 4.11928813,3 5.5,3 C6.88071187,3 8,4.11928813 8,5.5 C8,6.88071187 6.88071187,8 5.5,8 Z M11,4 L13,4 C13.5522847,4 14,4.44771525 14,5 C14,5.55228475 13.5522847,6 13,6 L11,6 C10.4477153,6 10,5.55228475 10,5 C10,4.44771525 10.4477153,4 11,4 Z M11,18 L13,18 C13.5522847,18 14,18.4477153 14,19 C14,19.5522847 13.5522847,20 13,20 L11,20 C10.4477153,20 10,19.5522847 10,19 C10,18.4477153 10.4477153,18 11,18 Z M5,10 C5.55228475,10 6,10.4477153 6,11 L6,13 C6,13.5522847 5.55228475,14 5,14 C4.44771525,14 4,13.5522847 4,13 L4,11 C4,10.4477153 4.44771525,10 5,10 Z M19,10 C19.5522847,10 20,10.4477153 20,11 L20,13 C20,13.5522847 19.5522847,14 19,14 C18.4477153,14 18,13.5522847 18,13 L18,11 C18,10.4477153 18.4477153,10 19,10 Z" fill="#000000"></path>
    </g>
</svg>
                    <h5>Highly Customizable</h5>
                      Eunuch sed blandit libero volutpat sed cras. Cersei quis imperdiet tincidunt unuch pulvinar sapien. Habitasse platea Davos vestibulum.
		<h4>Media</h4><p>A small encapsulated element based on the card. Displays small media items that generally live in a group.</p>		
                <h6>Variations</h6>
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <title>Icon For Route</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon points="0 0 24 0 24 24 0 24" opacity="0"></polygon>
        <path d="M8,7 C7.44771525,7 7,6.55228475 7,6 C7,5.44771525 7.44771525,5 8,5 L16,5 C18.209139,5 20,6.790861 20,9 C20,11.209139 18.209139,13 16,13 L8,13 C6.8954305,13 6,13.8954305 6,15 C6,16.1045695 6.8954305,17 8,17 L17,17 C17.5522847,17 18,17.4477153 18,18 C18,18.5522847 17.5522847,19 17,19 L8,19 C5.790861,19 4,17.209139 4,15 C4,12.790861 5.790861,11 8,11 L16,11 C17.1045695,11 18,10.1045695 18,9 C18,7.8954305 17.1045695,7 16,7 L8,7 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
        <path d="M9.79289322,3.79289322 C10.1834175,3.40236893 10.8165825,3.40236893 11.2071068,3.79289322 C11.5976311,4.18341751 11.5976311,4.81658249 11.2071068,5.20710678 L8.20710678,8.20710678 C7.81658249,8.59763107 7.18341751,8.59763107 6.79289322,8.20710678 L3.79289322,5.20710678 C3.40236893,4.81658249 3.40236893,4.18341751 3.79289322,3.79289322 C4.18341751,3.40236893 4.81658249,3.40236893 5.20710678,3.79289322 L7.5,6.08578644 L9.79289322,3.79289322 Z" fill="#000000" fill-rule="nonzero" transform="translate(7.500000, 6.000000) rotate(-270.000000) translate(-7.500000, -6.000000) "></path>
        <path d="M18.7928932,15.7928932 C19.1834175,15.4023689 19.8165825,15.4023689 20.2071068,15.7928932 C20.5976311,16.1834175 20.5976311,16.8165825 20.2071068,17.2071068 L17.2071068,20.2071068 C16.8165825,20.5976311 16.1834175,20.5976311 15.7928932,20.2071068 L12.7928932,17.2071068 C12.4023689,16.8165825 12.4023689,16.1834175 12.7928932,15.7928932 C13.1834175,15.4023689 13.8165825,15.4023689 14.2071068,15.7928932 L16.5,18.0857864 L18.7928932,15.7928932 Z" fill="#000000" fill-rule="nonzero" transform="translate(16.500000, 18.000000) scale(1, -1) rotate(270.000000) translate(-16.500000, -18.000000) "></path>
    </g>
</svg>
                      <h5>Fully Responsive</h5>
                    Icon
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.7264 48.0001H15.2736C15.2686 43.9553 13.6595 40.0777 10.7994 37.2176C7.93932 34.3574 4.06164 32.7484 0.0168457 32.7433V15.2905C18.0528 15.2905 32.7264 29.9641 32.7264 48.0001Z" fill="url(#paint0_linear)"/>
<path d="M47.9833 15.2905V32.7433C43.9385 32.7484 40.0608 34.3574 37.2007 37.2176C34.3406 40.0777 32.7316 43.9553 32.7265 48.0001H15.2737C15.2737 29.9641 29.9473 15.2905 47.9833 15.2905Z" fill="url(#paint1_linear)"/>
<path d="M24 17.28C28.7717 17.28 32.64 13.4117 32.64 8.64C32.64 3.86826 28.7717 0 24 0C19.2282 0 15.36 3.86826 15.36 8.64C15.36 13.4117 19.2282 17.28 24 17.28Z" fill="url(#paint2_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="19.752" y1="36.9241" x2="3.23044" y2="21.7129" gradientUnits="userSpaceOnUse">
<stop stop-color="#B03B83"/>
<stop offset="1" stop-color="#E72E6C"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="30.1177" y1="43.5169" x2="35.9617" y2="22.6489" gradientUnits="userSpaceOnUse">
<stop stop-color="#B03B83"/>
<stop offset="1" stop-color="#6F4A9E"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="1241.55" y1="120.269" x2="2184.17" y2="1062.89" gradientUnits="userSpaceOnUse">
<stop stop-color="#B03B83"/>
<stop offset="1" stop-color="#6F4A9E"/>
</linearGradient>
</defs>
</svg>
                      <h5>Kyan Boards</h5>
                    Image
                      <img src="https://hiwaad.com/wp-content/uploads/2019/08/female-4.jpg" alt="Shelley McNabb avatar image">
                      “Long build times are a thing of the past!”
                    Quote
		<h4>Pagination</h4><p>Indicate a series of related content exists across multiple pages.</p>		
			<nav>
              <ul>
                <li>
                  <a href="#" aria-label="Previous">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-arrow-left.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M12 5L5 12L12 19M19 12H6H19Z" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                  </a>
                </li>
                <li><a href="#">1</a>
                </li>
                <li><a href="#">2</a>
                </li>
                <li><a href="#">3</a>
                </li>
                <li>
                  <a href="#" aria-label="Next">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" data-src="assets/img/icons/interface/icon-arrow-right.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M12 5L19 12L12 19M5 12H18H5Z" stroke="#2C3038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
                  </a>
                </li>
              </ul>
            </nav>		
		<h4 style="font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">Popovers</h4><p>Display supplemental information upon click. Please note these are created with HTML and are for developers only.</p> 		
                    <button type="button" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
                      Top
                    </button>
                    <button type="button" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
                      Bottom
                    </button>
                    <button type="button" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
                      Left
                    </button>
                    <button type="button" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
                      Right
                    </button>
		<h4 style="font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">Shadows</h4><p>Preset styles to imply depth on interface components</p>		
                Small
                Standard
                Large
		<h4 style="font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">Tabs</h4>
Navigational element responsible for toggling the display of content in a near-by container. Please note these are created with HTML and are for developers only.		
                <h6>Nav Tabs</h6>
                <ul id="myTab" role="tablist">
                  <li>
                    <a id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
                  </li>
                  <li>
                    <a id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                  </li>
                  <li>
                    <a id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                  </li>
                </ul>
                        Home Tab Content
                        Profile Tab Content
                        Contact Tab Content
                <h6>Nav Pills - Horizontal</h6>
                <ul id="myTab-2" role="tablist">
                  <li>
                    <a id="home-tab-2" data-toggle="tab" href="#home-2" role="tab" aria-controls="home" aria-selected="true">Home</a>
                  </li>
                  <li>
                    <a id="profile-tab-2" data-toggle="tab" href="#profile-2" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                  </li>
                  <li>
                    <a id="contact-tab-2" data-toggle="tab" href="#contact-2" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                  </li>
                </ul>
                        Home Tab Content
                        Profile Tab Content
                        Contact Tab Content
                <h6>Nav Pills - Horizontal Filled</h6>
                <ul id="myTab-4" role="tablist">
                  <li>
                    <a id="home-tab-4" data-toggle="tab" href="#home-4" role="tab" aria-controls="home" aria-selected="true">Home</a>
                  </li>
                  <li>
                    <a id="profile-tab-4" data-toggle="tab" href="#profile-4" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                  </li>
                  <li>
                    <a id="contact-tab-4" data-toggle="tab" href="#contact-4" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                  </li>
                </ul>
                        Home Tab Content
                        Profile Tab Content
                        Contact Tab Content
                <h6>Nav Pills - Vertical</h6>
                  <ul id="myTab-3" role="tablist">
                    <li>
                      <a id="home-tab-3" data-toggle="tab" href="#home-3" role="tab" aria-controls="home" aria-selected="true">Home</a>
                    </li>
                    <li>
                      <a id="profile-tab-3" data-toggle="tab" href="#profile-3" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                    </li>
                    <li>
                      <a id="contact-tab-3" data-toggle="tab" href="#contact-3" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                    </li>
                  </ul>
                          Home Tab Content
                          Profile Tab Content
                          Contact Tab Content
                <h6>Nav Pills - Buttons</h6>
                  <ul id="myTab-6" role="tablist">
                    <li>
                      <a id="home-tab-6" data-toggle="tab" href="#home-6" role="tab" aria-controls="home" aria-selected="true">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <title>Icon For Home</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M3.95709826,8.41510662 L11.47855,3.81866389 C11.7986624,3.62303967 12.2013376,3.62303967 12.52145,3.81866389 L20.0429,8.41510557 C20.6374094,8.77841684 21,9.42493654 21,10.1216692 L21,19.0000642 C21,20.1046337 20.1045695,21.0000642 19,21.0000642 L4.99998155,21.0000673 C3.89541205,21.0000673 2.99998155,20.1046368 2.99998155,19.0000673 L2.99999828,10.1216672 C2.99999935,9.42493561 3.36258984,8.77841732 3.95709826,8.41510662 Z M10,13 C9.44771525,13 9,13.4477153 9,14 L9,17 C9,17.5522847 9.44771525,18 10,18 L14,18 C14.5522847,18 15,17.5522847 15,17 L15,14 C15,13.4477153 14.5522847,13 14,13 L10,13 Z" fill="#000000"></path>
    </g>
</svg>
                          Home
                      </a>
                    </li>
                    <li>
                      <a id="profile-tab-6" data-toggle="tab" href="#profile-6" role="tab" aria-controls="profile" aria-selected="false">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/general/user.svg">
    <title>Icon For User</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon points="0 0 24 0 24 24 0 24" opacity="0"></polygon>
        <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
        <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero"></path>
    </g>
</svg>
                          Profile
                      </a>
                    </li>
                    <li>
                      <a id="contact-tab-6" data-toggle="tab" href="#contact-6" role="tab" aria-controls="contact" aria-selected="false">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" data-src="assets/img/icons/theme/communication/active-call.svg">
    <title>Icon For Active-call</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
        <path d="M13.0799676,14.7839934 L15.2839934,12.5799676 C15.8927139,11.9712471 16.0436229,11.0413042 15.6586342,10.2713269 L15.5337539,10.0215663 C15.1487653,9.25158901 15.2996742,8.3216461 15.9083948,7.71292558 L18.6411989,4.98012149 C18.836461,4.78485934 19.1530435,4.78485934 19.3483056,4.98012149 C19.3863063,5.01812215 19.4179321,5.06200062 19.4419658,5.11006808 L20.5459415,7.31801948 C21.3904962,9.0071287 21.0594452,11.0471565 19.7240871,12.3825146 L13.7252616,18.3813401 C12.2717221,19.8348796 10.1217008,20.3424308 8.17157288,19.6923882 L5.75709327,18.8875616 C5.49512161,18.8002377 5.35354162,18.5170777 5.4408655,18.2551061 C5.46541191,18.1814669 5.50676633,18.114554 5.56165376,18.0596666 L8.21292558,15.4083948 C8.8216461,14.7996742 9.75158901,14.6487653 10.5215663,15.0337539 L10.7713269,15.1586342 C11.5413042,15.5436229 12.4712471,15.3927139 13.0799676,14.7839934 Z" fill="#000000"></path>
        <path d="M14.1480759,6.00715131 L13.9566988,7.99797396 C12.4781389,7.8558405 11.0097207,8.36895892 9.93933983,9.43933983 C8.8724631,10.5062166 8.35911588,11.9685602 8.49664195,13.4426352 L6.50528978,13.6284215 C6.31304559,11.5678496 7.03283934,9.51741319 8.52512627,8.02512627 C10.0223249,6.52792766 12.0812426,5.80846733 14.1480759,6.00715131 Z M14.4980938,2.02230302 L14.313049,4.01372424 C11.6618299,3.76737046 9.03000738,4.69181803 7.1109127,6.6109127 C5.19447112,8.52735429 4.26985715,11.1545872 4.51274152,13.802405 L2.52110319,13.985098 C2.22450978,10.7517681 3.35562581,7.53777247 5.69669914,5.19669914 C8.04101739,2.85238089 11.2606138,1.72147333 14.4980938,2.02230302 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
    </g>
</svg>
                          Contact
                      </a>
                    </li>
                  </ul>
                          Home Tab Content
                          Profile Tab Content
                          Contact Tab Content
		<h4 style="font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">Tooltips</h4><p>Display supplemental information upon hover. Please note these are created with HTML and are for developers only.</p>		
                <h6>Default Display</h6>
                    <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Top</a>
                    <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</a>
                    <a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</a>
                    <a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</a>
                    <a href="#" data-toggle="tooltip" data-html="true" title="<img class='avatar avatar-xs' src='assets/img/avatars/male-3.jpg' />Robert Smith">Custom HTML</a>
                <h6>Tooltip Circle</h6>
                    ?