Invite Users - Step 3 - Done
Dependencies
Module | Global Depenedency |
|---|---|
webflow.css | Yes |
wizard.css | Up to dev, could be used only when wizards are used it Wizards are made into a reusable module. Files are in Global Dependencies. |
wizard.js | Up to dev, could be used only when wizards are used it Wizards are made into a reusable module. Files are in Global Dependencies. |
HTML
<div class="modal-background">
<div class="modal-container _48">
<div class="wizard-steps-container">
<div class="wizard-steps">
<div class="wizard-step completed">
<div class="wizard-step-content-wrapper">
<div class="wizard-progress-icon current-step w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path><polygon id="inner-path" fill="#ffffff" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591"></polygon></svg>
</div>
<div>
<div class="wizard-step-heading">Step 1</div>
<div>Enter Email Addresses</div>
</div>
</div>
<div class="wizard-divider-arrow w-embed">
<svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"><polygon id="caretPolygon" points="0,0 0,24 12,12" fill="none"><line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line><line x1="0" y1="24" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line></polygon></svg>
</div>
<div class="wizard-bottom-border current-step"></div>
</div>
<div class="wizard-step completed">
<div class="wizard-step-content-wrapper">
<div class="wizard-progress-icon current-step w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path><polygon id="inner-path" fill="#ffffff" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591"></polygon></svg>
</div>
<div>
<div class="wizard-step-heading">Step 2</div>
<div>Review and Send Invites</div>
</div>
</div>
<div class="wizard-divider-arrow w-embed">
<svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg"><polygon id="caretPolygon" points="0,0 0,24 12,12" fill="none"><line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line><line x1="0" y1="24" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line></polygon></svg>
</div>
<div class="wizard-bottom-border current-step"></div>
</div>
<div class="wizard-step">
<div class="wizard-step-content-wrapper">
<div class="wizard-progress-icon current-step w-embed">
<svg fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"></path></svg>
</div>
<div>
<div class="wizard-step-heading">Step 3</div>
<div>Confirmation</div>
</div>
</div>
<div class="wizard-bottom-border current-step"></div>
</div>
</div>
</div>
<div class="modal-heading-container">
<h1 class="modal-h1">Invite Users to Your Workspace</h1>
<div>Your invitations have been sent. Users will receive them shortly.</div>
<div class="text-block-29"><span class="success-text"><strong>45</strong></span> Invitations Sent</div>
<div class="code-embed-16 w-embed">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" width="512" height="512" fill="currentColor"><path d="M495.245 148.162C488.78 139.735 478.712 135 466.9 135H209.31c-21.827 0-43.488 15.811-51.656 36.746a7.172 7.172 0 0 0-1.031 2.915 45.172 45.172 0 0 0-.7 2.385l-46.178 153.945c-.02.066-.039.138-.057.205-2.75 10.266-1.727 20.394 2.736 28.512a6.92 6.92 0 0 0 1.892 3.028c.239.338.471.774.724 1.1 6.465 8.429 16.533 13.164 28.348 13.164h257.587c12.393 0 24.731-5.165 34.58-13.375a7.437 7.437 0 0 0 .937-.762 7.327 7.327 0 0 0 .552-.594 56.987 56.987 0 0 0 17.323-27.328L500.54 181l.056-.2c.229-.856.425-1.711.6-2.563a7.222 7.222 0 0 0 .555-3.374c1.294-9.952-.963-19.478-6.506-26.701zM209.31 149H466.9c7.364 0 13.487 2.79 17.242 7.684 3.05 3.974 4.378 9.158 3.914 14.868L313.921 291.913c-12.109 8.368-26.587 8.833-33.678 1.067l-108.38-118.791C178.729 160.052 194.485 149 209.31 149zm231.618 182a8.115 8.115 0 0 0-.056.2 41.024 41.024 0 0 1-8.963 16.229L376.647 287a7 7 0 0 0-10.332 9.447l54.921 60.153c-6.3 3.944-13.381 6.4-20.261 6.4H143.388a22.976 22.976 0 0 1-13.289-3.92l97.734-61.38a7.015 7.015 0 0 0-7.442-11.893l-97.814 61.38a27.272 27.272 0 0 1 .609-12.26L166.8 189.511l103.1 112.921c6.161 6.748 14.932 10.14 24.467 10.14a48.923 48.923 0 0 0 27.509-9.118l160.6-110.989zM16.858 223h100.855a7 7 0 0 0 0-14H16.858a7 7 0 0 0 0 14zm0 40h80.855a7 7 0 0 0 0-14H16.858a7 7 0 0 0 0 14zm57.856 33a7 7 0 0 0-7-7H16.858a7 7 0 0 0 0 14h50.856a7 7 0 0 0 7-7z"></path></svg>
</div>
</div>
<div class="form-button-container">
<button type="button" class="button full w-button">Close</button>
</div>
</div>
</div>