ATOMS
ATOMS

Last updated: 06.04.2020

Version: 1.0

Icons

Currently the icon sizes only work with custom icons, there appears to be a conflict with font sizes and font-awesome icons.

Icon sizes

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

Medium: Medium Plus: Large:

Responsive:

Sketch Component:
Icons_Sizes

Icons-contorion

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

bpja
01000000
02000000
03000000
04000000
05000000
07000000
080000000000
09000000
10000000
11000000
13000000
14000000
15000000
16000000
19000000
20000000
21000000
22000000
23000000
230000000000
250000000000
280000000000
300000000000
500000000000
account
add-wishlist
addtocart-icon
addwishlist
burger
cart-icon
contorion-c
contorion-merch
customer-data
fifteen-euro-coupon-icon
fifteen-euro-coupon
hamburger
harry-hammer
heart
logistic-icon
neutral
new
offers
order-approval
orders
overview
pdf
private-label-inverted
private-label
profi-store
reoccurring
ten-euro-coupon
time
unlucky
usersettings
very-happy
warenstapler
wishlist-icon

Responsive:

All our custom fonts that have been generated from our SVG files via build process.

Icons-font awesome

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

angle-down
angle-left
angle-right
angle-up
arrow-down
arrow-right
ban
bars
bell-slash
bell
book
bullhorn
calculator
calendar-check-o
caret-down
caret-right
check-square-o
check
chevron-down
chevron-left
chevron-right
chevron-up
circle
clock-o
close
code
cog
cogs
comments-o
comments
credit-card-alt
cube
cubes
desktop
download
envelope
euro
exchange
exclamation-triangle
facebook
fax
file-text
flag
floppy-o
folder-open
google-plus
history
info-circle
info
instagram
laptop
linkedin-square
linkedin
list-alt
list-ol
list
lock
map-marker
map-signs
minus
mobile-phone
mobile
paint-brush
pencil
percent
phone
pie-chart
play-circle-o
plus
print
question-circle
quote-left
quote-right
refresh
rocket
search-plus
search
shopping-basket
shopping-cart
sign-out
spinner
star-half-o
star-o
star
table
tag
tags
th-list
th
times-circle
times
trash-o
truck
usd
user
warning
whatsapp
wrench
youtube-play

Responsive:

Fonts from Font Awesome package that are being used in our system.