UI Elements & Components

The UI Elements page hold the smaller components and their variants to help develop the website.

UI Elements

UI elements are standalone components made up of one or more classes and elements.

Buttons

Buttons share one base class, and you can combine style and size combo classes to create your different variations, as long as each of them exists as its own combo class.
For example: button cc-small cc-secondary

button
cc-secondary
button
cc-small
cta-wrapper
>
button

The CTA wrapper aligns the button and adds top margin.

Icons

These are useful wether you are adding icons as images or as SVGs inside embeds. When adding as HTML embed, change the SVG's height and width properties to 100%, and the fill/stroke to currentColor (if you needed)

icon
cc-sm

width: 1rem (16px)
height: same

icon

width: 1.5rem (24px)
height: same

icon
cc-lg

width: 2rem (32px)
height: same

Form

Form elements. For the label you can use text classes or create a new one.

form-wrapper
form
form_group
input-field
input_label
input
input
cc-select
input
cc-text-area
checkbox-field
checkbox
radio-field
radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Components

Commonly used components of this project.

[Content] Card Shell

Typical card shell

[Forms] Cotnact Form
*Tous les champs sont obligatoires
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

This is the main Contact Form component. Used in the footer CTA and Contact page.

[Forms] Naturopathy Form
*Tous les champs sont obligatoires
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

This is the main Contact Form component. Used in the footer CTA and Contact page.

[Forms] Coaching Form
*Tous les champs sont obligatoires
*Tous les champs sont obligatoires
Calendar icon
Choisir une date
*Tous les champs sont obligatoires
*Tous les champs sont obligatoires
Prev
Next
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

This is the Coaching Form component. Used to get specific data related to users asking for info on coaching appraoches.