UI kit
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
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Buttons
Primary
Secondary
Link
Quick link
Default
Hovered
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
Disabled
focused
Error
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.
Badges
Small rounded
Small rounded inverted
Large rounded
Large rounded inverted
Small square
Small square inverted
Large square
Large square inverted
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
account
arrow
arrow-nav
caret
bookmark / save
filter
calendar
cart
cart-plus
chat
hamburger
threads
success
error
search
opening-quote
closing-quote
gift
checkout
minus
plus
dot
close
map
map-pin
plane
phone
zoom-in
zoom-out
question
info
warning
heart
star
star-full
share
delete
store
youtube-play
Messenger
snapchat
tiktok
x
youtube
3D
clock
globe
language
edit
redirect
check
return
truck
credit-card
link
Drawer
Dawer content
Dawer content
Content cards
Product card
An Introduction to Food Defense Coordinator
An Introduction to HACCP Workshop
Applied Baking Technology
Assign an Expert
BRCGS Certification for Agents & Brokers
BRCGS Certification for Ethical Trade & Responsible Sourcing
BRCGS Certification for Food Safety
BRCGS Certification for Packaging
Variant card(Calender view)
An Introduction to Food Defense Coordinator
An Introduction to HACCP Workshop
Applied Baking Technology
Applied Baking Technology