A collection of project UI elements. Please note that this is only for reference during development and should never be pushed live. It may become outdated or incomplete depending on future revisions.
Colors
Typography
.large-title
Fusce facilisis accumsan lectus, eu ornare tellus venenatis id..h1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mauris felis, tristique non consectetur eu, aliquet id velit.
.h2
Praesent consectetur, nisi vitae auctor blandit, lorem leo cursus diam, eu faucibus eros eros et ligula.
.h3
Fusce facilisis accumsan lectus, eu ornare tellus venenatis id.
.h4
In arcu metus, interdum vel ultrices id, interdum at sem. Phasellus sodales egestas posuere. Fusce ac elit sagittis, dictum lacus viverra, commodo purus.
.h5
Pellentesque a ex gravida, condimentum ligula et, consectetur ex. Aliquam erat volutpat. Proin lacinia non nulla id porttitor.
.h6
Praesent consectetur, nisi vitae auctor blandit, lorem leo cursus diam, eu faucibus eros eros et ligula.
.sh1
Pellentesque a ex gravida, condimentum ligula et, consectetur ex. Aliquam erat volutpat. Proin lacinia non nulla id porttitor..sh2
In arcu metus, interdum vel ultrices id, interdum at sem. Phasellus sodales egestas posuere. Fusce ac elit sagittis, dictum lacus viverra, commodo purus..sh3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mauris felis, tristique non consectetur eu, aliquet id velit.Square Buttons
Medium Button: .btn--medium .btn--square .btn--primary--dark
Medium Button: .btn--medium .btn--square .btn--primary--light
Dark Background
Medium Button: .btn--medium .btn--square .btn--secondary--light
Medium Button: .btn--medium .btn--square .btn--secondary--dark
Dark Background
Large Button: .btn--large .btn--square .btn--primary--dark
Large Button: .btn--large .btn--square .btn--primary--light
Dark Background
Large Button: .btn--large .btn--square .btn--secondary--light
Large Button: .btn--large .btn--square .btn--secondary--dark
Dark Background
Active Button: .btn--medium .btn--square .active-hover-button
Active Button: .btn--medium .btn--square .active-hover-button
Dark Background
Active Button: .btn--medium .btn--square .active-secondary
Icon Button: .btn--medium .btn--square .btn--primary--dark .btn--with-icon
Icon Button based on grid: .btn--medium .btn--square .btn--primary--dark .btn--with-icon grid
Link Buttons
Link Button: a.btn--link
Shop NowLink Icon Small: a.btn--link .small
Shop NowRounded Buttons
X-Small Button Default: .btn--x-small .btn--rounded .btn--primary--dark
X-Small Button Default: .btn--x-small .btn--rounded .btn--secondary--dark
Dark Background
X-Small Button Active: .btn--x-small .btn--rounded .active-hover-button
X-Small Button Active: .btn--x-small .btn--rounded .active-white
Dark Background
Badge Default: .btn--x-small .btn--rounded .btn--badge .default
Badge Sale: .btn--x-small .btn--rounded .btn--badge .sale
Number: .btn--x-small .btn--rounded .btn--number
Label: .btn--x-small .btn--rounded .default-label
X-Small Filter Default: .btn--x-small .btn--rounded .btn--secondary--light
X-Small Filter Default: .btn--x-small .btn--rounded .btn--secondary--alternate
Dark Background
X-Small Filter Active: .btn--x-small .btn--rounded .active-sea
X-Small Filter Active: .btn--x-small .btn--rounded .active-white
Dark Background
X-Small Filter Disabled: .btn--x-small .btn--rounded disabled
X-Small Filter Beige: .btn--x-small .btn--secondary--beige
Small Button Default: .btn--small .btn--rounded .btn--secondary--light
Small Button Default: .btn--small .btn--rounded .btn--secondary--dark
Dark Background
Small Button Active: .btn--small .btn--rounded .active-sea
Small Button Active: .btn--small .btn--rounded .active-white
Dark Background
Filter Default: .btn--small .btn--rounded .btn--secondary--light > span.circle
Filter Active: .btn--small .btn--rounded .active-sea > span.circle
Filter Disabled: .btn--small .btn--rounded disabled > span.circle
Inputs
Custom float label inputs. TODO: Define library for validations. (Vuetify has a built-in validation)
Select
Libraries like Vuetify & Vue-multiselect could save us time building the forms, needs discussion with the team.