STYLE
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,skeleton
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
Spacing
Under refactoring
This component is being refactored by a team or has potential to be refactored. Please check with frontend team before using it.
Fluid:
$space: 5px
$space-1: 10px
$space-2: 15px
$space-3: 20px
$space-4: 30px
$space-5: 40px
$space-6: 70px
$space-7: 100px
$space-8: 120px
Responsive:
This is the spacing scale which should be used for building individual components. The base is 5px and the scale provides small increments to create appropriate spatial relationships for all kinds of designs. For spacing greater than 120px, the design tokens can be combined.