CodePen Embed - Canopy Components Demo

Live

Live

Live

This Pen is owned by Marc Little on CodePen.

See more by @Marc-Little on CodePen

External CSS

https://fonts.googleapis.com/css?family=Outfit:100,200,300,regular,500,600,700,800,900

External JavaScript

https://components.usecanopy.com/v1/cc-components.js

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"VwEGXzW\",\"auto_save\":true},\"hashid\":\"VwEGXzW\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://components.usecanopy.com/v1/cc-components.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://fonts.googleapis.com/css?family=Outfit:100,200,300,regular,500,600,700,800,900\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[],\"id\":68445214,\"user_id\":10239527,\"html\":\"<div>\\n  <h1 class=\\\"title\\\">Canopy Components Examples</h1>\\n  <section id=\\\"example1\\\" class=\\\"container fade\\\">\\n    <div class=\\\"example\\\">\\n      <form>\\n        <fieldset class=\\\"hidden\\\">\\n          <div id=\\\"username-parent\\\"></div>\\n        </fieldset>\\n        <fieldset class=\\\"hidden\\\">\\n          <div id=\\\"password-parent\\\"></div>\\n        </fieldset>\\n        <fieldset class=\\\"hidden\\\">\\n          <div id=\\\"thirdfield-parent\\\"></div>\\n        </fieldset>\\n\\n        <button id=\\\"ccsubmit\\\" class=\\\"hidden\\\"><span>Submit Form »</span></button>\\n        <div id=\\\"username-error\\\" class=\\\"error hidden\\\"></div>\\n        <div id=\\\"password-error\\\" class=\\\"error hidden\\\"></div>\\n        <div id=\\\"thirdfield-error\\\" class=\\\"error hidden\\\"></div>\\n      </form>\\n    </div>\\n  </section>\\n  <div id=\\\"result\\\"></div>\\n</div>\",\"css\":\"body,\\nbutton {\\n  font-family: Outfit, sans-serif;\\n}\\n\\n.hidden {\\n  display: none;\\n}\\n\\n.fade {\\n  opacity: 0;\\n  transition: opacity 0.3s cubic-bezier(0, 0.45, 0.55, 1);\\n}\\n\\n.fade.fade-in {\\n  opacity: 1 !important;\\n}\\n\\n.title {\\n  font-size: 50px;\\n  font-weight: 300;\\n  text-align: center;\\n}\\n\\n.container {\\n  display: -ms-flexbox;\\n  display: flex;\\n  -ms-flex-wrap: wrap;\\n  flex-wrap: wrap;\\n  position: relative;\\n  max-width: 750px;\\n  padding-top: 60px;\\n  padding-bottom: 60px;\\n  margin: 0 auto;\\n  width: 100%;\\n}\\n\\n.example {\\n  /*   background-color: #6772e5; */\\n  background-color: #0e0578;\\n  -ms-flex-align: center;\\n  align-items: center;\\n  border-radius: 4px;\\n  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);\\n  padding: 80px 0px;\\n  display: -ms-flexbox;\\n  display: flex;\\n  -ms-flex-direction: column;\\n  flex-direction: column;\\n  -ms-flex-pack: center;\\n  justify-content: center;\\n  position: relative;\\n  -ms-flex: auto;\\n  flex: auto;\\n  min-height: 500px;\\n  padding: 0 40px;\\n}\\n\\n.example form {\\n  position: relative;\\n  width: 100%;\\n  max-width: 500px;\\n  transition-property: opacity, transform;\\n  transition-duration: 0.35s;\\n  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\\n}\\n\\n.example button:hover {\\n  background-color: #e04f16;\\n}\\n\\n.example button {\\n  display: block;\\n  position: relative;\\n  width: calc(100% - 30px);\\n  height: 40px;\\n  margin: 40px 15px 0;\\n  background-color: #ff8540;\\n  border: solid 1px #3f3681;\\n  border-radius: 8px;\\n  color: #fff;\\n  font-size: 1rem;\\n  font-weight: 600;\\n  cursor: pointer;\\n  -webkit-appearance: none;\\n  -moz-appearance: none;\\n  appearance: none;\\n  outline: none;\\n  border-style: none;\\n  transition-property: background-color;\\n  transition-duration: 0.35s;\\n  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\\n}\\n\\n.example button.loading {\\n  cursor: default;\\n  background-color: #e1b8dc;\\n}\\n\\n.example button.loading::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  width: 16px;\\n  height: 16px;\\n  top: 0;\\n  left: 0;\\n  right: 0;\\n  bottom: 0;\\n  margin: auto;\\n  border: 4px solid transparent;\\n  border-top-color: #ffffff;\\n  border-radius: 50%;\\n  animation: button-loading-spinner 1s ease infinite;\\n}\\n\\n@keyframes button-loading-spinner {\\n  from {\\n    transform: rotate(0turn);\\n  }\\n\\n  to {\\n    transform: rotate(1turn);\\n  }\\n}\\n\\n.example button.loading span {\\n  visibility: hidden;\\n  opacity: 0;\\n}\\n\\nfieldset {\\n  margin: 0 15px 20px;\\n  padding: 0;\\n  border-style: none;\\n  background-color: #fff;\\n  box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),\\n    inset 0 1px 0 #829fff;\\n  border-radius: 4px;\\n  cursor: text;\\n}\\n\\n#username-parent,\\n#password-parent,\\n#thirdfield-parent {\\n  padding: 11px 15px;\\n}\\n\\n.error span {\\n  color: #fff;\\n}\\n\\n.error {\\n  display: flex !important;\\n  justify-content: center;\\n  width: 100%;\\n  margin-top: 20px;\\n  padding: 0 15px;\\n  font-size: 13px !important;\\n  transition-property: opacity, transform;\\n  transition-duration: 0.35s;\\n  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\\n  opacity: 1;\\n  transform: none;\\n}\\n\\n.error.hidden {\\n  opacity: 0;\\n  transform: translateY(10px);\\n}\\n\",\"js\":\"/**\\nCanopy Connect Components implementation below using custom a font and styles\\n**/\\n\\nwindow.addEventListener(\\\"load\\\", () => {\\n  const form = CanopyConnectComponents.form({\\n    carrierConfig: {\\n      name: \\\"AAA\\\",\\n      usernameFieldPlaceholder: \\\"Email\\\",\\n      thirdFieldPlaceholder: \\\"Zip Code\\\",\\n      thirdFieldValidatorError: \\\"Must be a valid zip code\\\",\\n      thirdFieldValidatorRgx: \\\"^\\\\\\\\d{5}$\\\",\\n      disablePasswordField: false\\n    },\\n\\n    fonts: [\\n      // Latin-ext\\n      {\\n        family: \\\"Outfit\\\",\\n        src:\\n          \\\"url(https://fonts.gstatic.com/s/outfit/v11/QGYyz_MVcBeNP4NjuGObqx1XmO1I4W61O4i0FQItq6fNIhnL.woff) format('woff')\\\",\\n        weight: \\\"300\\\",\\n        style: \\\"normal\\\",\\n        unicodeRange:\\n          \\\"U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF\\\"\\n      },\\n      // Latin\\n      {\\n        family: \\\"Outfit\\\",\\n        src:\\n          \\\"url(https://fonts.gstatic.com/s/outfit/v11/QGYyz_MVcBeNP4NjuGObqx1XmO1I4W61O4a0FQItq6fNIg.woff) format('woff')\\\",\\n        weight: \\\"300\\\",\\n        style: \\\"normal\\\",\\n        unicodeRange:\\n          \\\"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD\\\"\\n      }\\n    ],\\n\\n    styles: {\\n      base: {\\n        color: \\\"rgb(16, 24, 40)\\\",\\n        fontWeight: \\\"300\\\",\\n        fontFamily: \\\"Outfit, sans-serif\\\",\\n        fontSize: \\\"1rem\\\",\\n        fontSmoothing: \\\"antialiased\\\",\\n\\n        \\\":autofill\\\": {\\n          color: \\\"#fce883\\\"\\n        },\\n        \\\"::placeholder\\\": {\\n          color: \\\"rgb(71, 84, 103)\\\"\\n        }\\n      },\\n      invalid: {\\n        color: \\\"#ED637A\\\"\\n      }\\n    }\\n  });\\n  const submitButton = document.querySelector(\\\"#ccsubmit\\\");\\n  const submitForm = async (event) => {\\n    if (event) {\\n      event.preventDefault();\\n    }\\n    submitButton.disabled = true;\\n    submitButton.classList.add(\\\"loading\\\");\\n    try {\\n      const result = await form.submit();\\n      const resultElem = document.getElementById(\\\"result\\\");\\n      if (result.errors) {\\n        for (const type of Object.keys(result.errors)) {\\n          const errorElem = document.getElementById(`${type}-error`);\\n          errorElem.innerHTML = `<span>${result.errors[type].error}</span>`;\\n          errorElem.classList.remove(\\\"hidden\\\");\\n        }\\n      } else {\\n        console.log(\\\"Successfully submitted and got tokens\\\", result.tokens);\\n        const jsonStr = JSON.stringify(result.tokens, null, 2);\\n        resultElem.innerText = jsonStr;\\n        window.alert(jsonStr);\\n      }\\n    } catch (err) {\\n      console.error(err, err.inputType);\\n    } finally {\\n      submitButton.disabled = false;\\n      submitButton.classList.remove(\\\"loading\\\");\\n    }\\n  };\\n  submitButton.addEventListener(\\\"click\\\", submitForm);\\n  submitButton.classList.remove(\\\"hidden\\\");\\n  form.on(\\\"submit\\\", () => submitForm());\\n  form.on(\\\"ready\\\", () =>\\n    document.getElementById(\\\"example1\\\").classList.add(\\\"fade-in\\\")\\n  );\\n\\n  const { username, password, thirdfield } = form.components;\\n\\n  const types = [\\\"username\\\", \\\"password\\\", \\\"thirdfield\\\"].filter(\\n    (type) => type in form.components\\n  );\\n\\n  for (let i = 0; i < types.length; i += 1) {\\n    const type = types[i];\\n    if (!(type in form.components)) {\\n      continue;\\n    }\\n    const parentElem = document.getElementById(`${type}-parent`);\\n    const errorElem = document.getElementById(`${type}-error`);\\n    const fieldsetElem = parentElem.parentElement;\\n    const component = form.components[type];\\n    component.mount(parentElem);\\n    fieldsetElem.classList.remove(\\\"hidden\\\");\\n    component.on(\\\"change\\\", ({ error }) => {\\n      if (error) {\\n        errorElem.innerHTML = `<span>${error}</span>`;\\n        errorElem.classList.remove(\\\"hidden\\\");\\n      } else {\\n        errorElem.innerHTML = null;\\n        errorElem.classList.add(\\\"hidden\\\");\\n      }\\n    });\\n  }\\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2023-05-16T17:36:23.645Z\",\"updated_at\":\"2023-05-31T20:54:14.159Z\",\"title\":\"Canopy Components Demo\",\"description\":\"\",\"slug_hash\":\"VwEGXzW\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"018825a2-745d-7aba-b987-67f0a3b4aedf\",\"is_new_editor_pen\":false,\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-f0d5935eb4c2121dfc41.js"}