Enservio Design System

Footer

The site <footer> appears on every page and also includes the site navigation, copyright date, the link to Terms & Conditions, and the link to the Livechat feature (the image of which also indicates whether the service is "online" or "offline").
Design Sample
html
<footer>
  <span style="flex-wrap: wrap;">&copy;2018 Enservio, Inc. All rights reserved.&nbsp;<a href="#!">Terms&nbsp;&amp;&nbsp;Conditions</a></span>
  <div class="livechat">
    <div class="livechat offline">
      <a href="#!">
        <svg id="livechat-offline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257 56"><defs><style>.cls-1{fill:#2e84ed}</style></defs><path class="cls-1" d="M11 11h45.71v35.66h-22L23.86 55l-3.72 3.06v-11.4H11V11zm4.57 4.46V42.2h9.14v6.41l7.72-5.85.57-.56h19.14V15.46zm45.72 4.46H75v35.66h-9.14V67L51.29 55.58H30.14l5.72-4.46H53l8.29 6.41v-6.41h9.14V24.37h-9.14zM106 17.05h5.84V37h12.64v4.63H106zm21.66 2.17a2.89 2.89 0 0 1 0-4.34 3.57 3.57 0 0 1 2.52-.88 3.72 3.72 0 0 1 2.52.84 2.65 2.65 0 0 1 1 2.1 2.92 2.92 0 0 1-1 2.26 4 4 0 0 1-5 0zm-.29 3.51H133v18.85h-5.62zm30.09 0l-8.19 18.85h-5.8l-8.14-18.85h5.8l5.37 12.82 5.55-12.82zm20.64 11h-14.66a4.37 4.37 0 0 0 1.87 2.77 6.3 6.3 0 0 0 3.67 1 7.7 7.7 0 0 0 2.69-.44 6.47 6.47 0 0 0 2.18-1.38l3 3.15c-1.83 2-4.49 3-8 3a12.92 12.92 0 0 1-5.8-1.24 9.14 9.14 0 0 1-5.26-8.47 9.36 9.36 0 0 1 5.06-8.46 11.12 11.12 0 0 1 5.28-1.24 11 11 0 0 1 5.15 1.19 8.75 8.75 0 0 1 3.62 3.41 10 10 0 0 1 1.32 5.17c-.01.1-.05.59-.12 1.5zm-13.1-6.1a4.46 4.46 0 0 0-1.59 2.88h9.55a4.47 4.47 0 0 0-1.58-2.86 4.86 4.86 0 0 0-3.17-1.07 4.92 4.92 0 0 0-3.21 1.05zm22.5 12.74a12.36 12.36 0 0 1-4.9-4.52 12.2 12.2 0 0 1-1.78-6.54 12.16 12.16 0 0 1 6.68-11 14.85 14.85 0 0 1 7-1.63 15.07 15.07 0 0 1 5.93 1.12 11.92 11.92 0 0 1 4.41 3.2l-3.75 3.37a8.15 8.15 0 0 0-6.34-2.88 8.67 8.67 0 0 0-4.18 1 7.27 7.27 0 0 0-2.87 2.79 8.61 8.61 0 0 0 0 8.13 7.27 7.27 0 0 0 2.87 2.79 8.66 8.66 0 0 0 4.18 1 8.14 8.14 0 0 0 6.34-2.9l3.75 3.36a11.72 11.72 0 0 1-4.47 3.26 15.17 15.17 0 0 1-6 1.12 14.77 14.77 0 0 1-6.92-1.67zM226 24.55c1.48 1.4 2.21 3.48 2.21 6.24v10.79h-5.62v-9.95a4.79 4.79 0 0 0-1-3.35 3.72 3.72 0 0 0-2.91-1.1 4.52 4.52 0 0 0-3.39 1.28 5.2 5.2 0 0 0-1.26 3.8v9.32h-5.62v-26H214v9.11a7.43 7.43 0 0 1 2.7-1.67 10.17 10.17 0 0 1 3.46-.57 8.12 8.12 0 0 1 5.84 2.1zm22 0q2.42 2.09 2.42 6.29v10.74h-5.26v-2.35q-1.59 2.63-5.91 2.63a9.46 9.46 0 0 1-3.88-.74 5.72 5.72 0 0 1-2.5-2 5.14 5.14 0 0 1-.87-2.94 4.88 4.88 0 0 1 2-4.18c1.36-1 3.45-1.5 6.29-1.5h4.47a3.47 3.47 0 0 0-1.12-2.76 5 5 0 0 0-3.35-1 10.22 10.22 0 0 0-3.05.47 8.4 8.4 0 0 0-2.54 1.28l-2-3.82a12.56 12.56 0 0 1 3.83-1.67 17.26 17.26 0 0 1 4.55-.59c3.01.04 5.31.73 6.92 2.12zm-4.79 13a3.63 3.63 0 0 0 1.59-1.91v-1.95h-3.86c-2.31 0-3.46.74-3.46 2.21a2 2 0 0 0 .85 1.67 3.87 3.87 0 0 0 2.32.61 5 5 0 0 0 2.56-.65zM268 40.67a5.79 5.79 0 0 1-2 .89 10.46 10.46 0 0 1-2.54.3 7.66 7.66 0 0 1-5.35-1.72 6.45 6.45 0 0 1-1.89-5v-7.79h-3v-4.2h3v-4.59h5.62v4.59h4.83v4.2h-4.87V35a2.55 2.55 0 0 0 .63 1.84 2.39 2.39 0 0 0 1.79.64 3.69 3.69 0 0 0 2.27-.7z" transform="translate(-11 -11)"/><path d="M110.11 63a7.7 7.7 0 0 1-3-2.86 8.26 8.26 0 0 1 0-8.2 7.7 7.7 0 0 1 3-2.86 9.51 9.51 0 0 1 8.65 0 7.91 7.91 0 0 1 3 2.86 8.19 8.19 0 0 1 0 8.2 7.91 7.91 0 0 1-3 2.86 9.51 9.51 0 0 1-8.65 0zm6.8-2.64a4.57 4.57 0 0 0 1.73-1.76 5.6 5.6 0 0 0 0-5.12 4.57 4.57 0 0 0-1.73-1.76 5.16 5.16 0 0 0-4.94 0 4.57 4.57 0 0 0-1.73 1.76 5.52 5.52 0 0 0 0 5.12 4.57 4.57 0 0 0 1.76 1.72 5.16 5.16 0 0 0 4.94 0zm12.22-9.18v4.09h7.14v2.83h-7.14v5.63h-3.57V48.27h11.66v2.87zm14.08 0v4.09h7.14v2.83h-7.14v5.63h-3.57V48.27h11.66v2.87zm10.51-2.87h3.57v12.51H165v2.91h-11.3zm13.31 0h3.57v15.42H167zm21.37 0v15.42h-2.93l-7.69-9.39v9.39h-3.52V48.27h3l7.67 9.39v-9.39zM204 60.86v2.87h-11.94V48.27h11.65v2.87h-8.1v3.36h7.16v2.78h-7.16v3.58z" transform="translate(-11 -11)" fill="#444853"/></svg>
      </a>
    </div>
    <div class="livechat online">
      <a href="#!">
        <svg id="livechat-online" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257 56"><defs><style>.cls-1{fill:#2e84ed}</style></defs><path class="cls-1" d="M11 11h45.71v35.66h-22L23.86 55l-3.72 3.06v-11.4H11V11zm4.57 4.46V42.2h9.14v6.41l7.72-5.85.57-.56h19.14V15.46zm45.72 4.46H75v35.66h-9.14V67L51.29 55.58H30.14l5.72-4.46H53l8.29 6.41v-6.41h9.14V24.37h-9.14zM106 17.05h5.84V37h12.64v4.63H106zm21.66 2.17a2.89 2.89 0 0 1 0-4.34 3.57 3.57 0 0 1 2.52-.88 3.72 3.72 0 0 1 2.52.84 2.65 2.65 0 0 1 1 2.1 2.92 2.92 0 0 1-1 2.26 4 4 0 0 1-5 0zm-.29 3.51H133v18.85h-5.62zm30.09 0l-8.19 18.85h-5.8l-8.14-18.85h5.8l5.37 12.82 5.55-12.82zm20.64 11h-14.66a4.37 4.37 0 0 0 1.87 2.77 6.3 6.3 0 0 0 3.67 1 7.7 7.7 0 0 0 2.69-.44 6.47 6.47 0 0 0 2.18-1.38l3 3.15c-1.83 2-4.49 3-8 3a12.92 12.92 0 0 1-5.8-1.24 9.14 9.14 0 0 1-5.26-8.47 9.36 9.36 0 0 1 5.06-8.46 11.12 11.12 0 0 1 5.28-1.24 11 11 0 0 1 5.15 1.19 8.75 8.75 0 0 1 3.62 3.41 10 10 0 0 1 1.32 5.17c-.01.1-.05.59-.12 1.5zm-13.1-6.1a4.46 4.46 0 0 0-1.59 2.88h9.55a4.47 4.47 0 0 0-1.58-2.86 4.86 4.86 0 0 0-3.17-1.07 4.92 4.92 0 0 0-3.21 1.05zm22.5 12.74a12.36 12.36 0 0 1-4.9-4.52 12.2 12.2 0 0 1-1.78-6.54 12.16 12.16 0 0 1 6.68-11 14.85 14.85 0 0 1 7-1.63 15.07 15.07 0 0 1 5.93 1.12 11.92 11.92 0 0 1 4.41 3.2l-3.75 3.37a8.15 8.15 0 0 0-6.34-2.88 8.67 8.67 0 0 0-4.18 1 7.27 7.27 0 0 0-2.87 2.79 8.61 8.61 0 0 0 0 8.13 7.27 7.27 0 0 0 2.87 2.79 8.66 8.66 0 0 0 4.18 1 8.14 8.14 0 0 0 6.34-2.9l3.75 3.36a11.72 11.72 0 0 1-4.47 3.26 15.17 15.17 0 0 1-6 1.12 14.77 14.77 0 0 1-6.92-1.67zM226 24.55c1.48 1.4 2.21 3.48 2.21 6.24v10.79h-5.62v-9.95a4.79 4.79 0 0 0-1-3.35 3.72 3.72 0 0 0-2.91-1.1 4.52 4.52 0 0 0-3.39 1.28 5.2 5.2 0 0 0-1.26 3.8v9.32h-5.62v-26H214v9.11a7.43 7.43 0 0 1 2.7-1.67 10.17 10.17 0 0 1 3.46-.57 8.12 8.12 0 0 1 5.84 2.1zm22 0q2.42 2.09 2.42 6.29v10.74h-5.26v-2.35q-1.59 2.63-5.91 2.63a9.46 9.46 0 0 1-3.88-.74 5.72 5.72 0 0 1-2.5-2 5.14 5.14 0 0 1-.87-2.94 4.88 4.88 0 0 1 2-4.18c1.36-1 3.45-1.5 6.29-1.5h4.47a3.47 3.47 0 0 0-1.12-2.76 5 5 0 0 0-3.35-1 10.22 10.22 0 0 0-3.05.47 8.4 8.4 0 0 0-2.54 1.28l-2-3.82a12.56 12.56 0 0 1 3.83-1.67 17.26 17.26 0 0 1 4.55-.59c3.01.04 5.31.73 6.92 2.12zm-4.79 13a3.63 3.63 0 0 0 1.59-1.91v-1.95h-3.86c-2.31 0-3.46.74-3.46 2.21a2 2 0 0 0 .85 1.67 3.87 3.87 0 0 0 2.32.61 5 5 0 0 0 2.56-.65zM268 40.67a5.79 5.79 0 0 1-2 .89 10.46 10.46 0 0 1-2.54.3 7.66 7.66 0 0 1-5.35-1.72 6.45 6.45 0 0 1-1.89-5v-7.79h-3v-4.2h3v-4.59h5.62v4.59h4.83v4.2h-4.87V35a2.55 2.55 0 0 0 .63 1.84 2.39 2.39 0 0 0 1.79.64 3.69 3.69 0 0 0 2.27-.7z" transform="translate(-11 -11)"/><path d="M110.13 63a7.6 7.6 0 0 1-3-2.86 8.19 8.19 0 0 1 0-8.2 7.66 7.66 0 0 1 3-2.86 9.58 9.58 0 0 1 8.68 0 7.87 7.87 0 0 1 3 2.86 7.88 7.88 0 0 1-3 11.06 9.58 9.58 0 0 1-8.68 0zm6.87-2.68a4.53 4.53 0 0 0 1.74-1.76 5.52 5.52 0 0 0 0-5.12 4.53 4.53 0 0 0-1.74-1.76 5.2 5.2 0 0 0-5 0 4.57 4.57 0 0 0-1.73 1.76 5.52 5.52 0 0 0 0 5.12 4.57 4.57 0 0 0 1.73 1.76 5.2 5.2 0 0 0 5 0zm22.9-12v15.41h-3l-7.72-9.39v9.39h-3.54V48.27h3l7.7 9.39v-9.39zm3.67 0h3.58v12.5h7.77v2.91h-11.4zm13.36 0h3.58v15.41h-3.58zm21.46 0v15.41h-2.99l-7.73-9.39v9.39h-3.53V48.27h3l7.7 9.39v-9.39zM194 60.86v2.87h-12V48.27h11.7v2.87h-8.14v3.36h7.19v2.78h-7.19v3.58z" transform="translate(-11 -11)" fill="#0f4a92"/></svg>
      </a>
    </div>
  </div>
</footer>