STYLE
- Colors
- Design tokens
- Downloads
Shadows
GRID
ATOMS
MOLECULES
- Badges
- Form
- Data tables
- Alerts
- Progress bar
- Quantity widget
- Title header
- Search bar
- Search flyout
- Banners
- Product image
- Collapsible
- Coupon info
- Menu item
- Pictures menu
- Infospace
- Product rating
- Brushed text
- Product list item
- Product list empty
- Pills
ORGANISMS
- Header
- Footer
- Pagination
- Product widget
- Product recommendations
- Product tech data
- Product info
- Product comparison
- Product relations
- Product buy box
- Product gallery
- Product usp
- Product history
- Menu
- Mobile header
- Category tree
- Featured product
- Eye catcher
- Product list
- Newsletter signup
- Main navigation
- Campaign card
- Full picture block
- Product highlight
- Voucher-code
- Header slider
- Primary campaign
- Campaign slider
- Featured categories
TEMPLATES
PAGES
DEVELOPER
Shadows
The shadows documented underneath represent all the css shadows that are currently being used in our shops. They are mostly defined as SCSS variables and used in various components (Components using these shadows may or may not have been refactored into ABEM CSS yet)
Sketch name:
Colors
Shadows
unrefactoredThis component is only documented here but is not in a state to be used. Please feel free to refactor it first and document refactored version here before using it.
Fluid:
Shadow 1
Shadow 2
Shadow 3
Shadow 4
Shadow 6
Shadow 7
Shadow 8
Navigation mobile
Navigation mobile filters
Button nav left
Button nav right
Button nav left inactive
Button nav right inactive
Panel shadow
Bottom only
Top only