Titles
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Forms
Field
A field is a form element containing a label and an input.
Field groups automatically receive responsive styling, swapping to one field per row on mobile devices.
Default, required
Disabled
focused
Error
Email input
Dropdown (selection)
A dropdown allows a user to select a value from a series of options.
Vanilla dropdown, caret and dropdown visuals will be different between browsers
Default
Disabled
focused
Error
Text Area
A textarea can be used to allow for extended user input.
Default
Disabled
focused
Error
Radio checkbox
A checkbox can be formatted as a radio element. This means it is an exclusive option.
Default
Disabled
Error
Checkbox
A checkbox allow user to select a value from a small set of options, often binary.
Default
Disabled
Error
Success
If a form is in a success state, it will automatically show any success message blocks.
Error
If a form is in a error state, it will automatically show any error message blocks.
Warning
If a form is in a warning state, it will automatically show any warning message blocks.
Badges
Large
Large new
Large sale
Large sold out
Large made in quebec
Regular
Regular new
Regular sale
Regular sold out
Regular made in quebec
Small
Small new
Small sale
Small sold out
Small made in quebec
Accordions
RICHTEXT
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
List:
- item 1
- item 2
- item 3
- item 1
- item 2
- item 3
Icons
Messenger
threads
tiktok
snapchat
youtube
x
bluesky
arrow
direction
caret
return
arrow-nav
opening-quote
closing-quote
share
gift
search
error
cart
cart-plus
hamburger
success
checkout
question
zoom-in
zoom-out
calendar
account
star
star-fill
star-half
delete
plane
map-pin
map-pin-fill
close
check
plus
minus
heart
cube
store
truck
phone
chat
warning
info
credit-card
save
filter
link
map
near-me
eye
play
pause
dot
youtube-play
hourglass
bookmark
quebec
list-view
grid-view
pool
message
swim
water-drop
water-drop-2
chemical
plant
bacteria
tag
chart-search
shop
tools
display
edit
sun
image
video
Swiper
Swiper navigation alt
Drawer
Dawer content
Dawer content
