Components
Introduction
About
Getting started
Changelog
Roadmap
Avatar
Avatar Group
Badge
Badge Activity
Badge Notification
Bottom Navigation
Bottom Sheet
Button
Button Dock
Button Icon
Button Loading
Button Timed
Card
Checkbox
Checklist
Chip
Coach Mark
Collapse
File Uploader
Input Field
Line Item
Line Item Message
Loading Brand
Loading Dots
Message
Message Loading
Message Dock
Notification
Pagination
Pin Input
Pin Keyboard
Pop Over
Pop Over Filter
Progress Bar
Progress Circle
Radio Button
Rating
Search Field
Segmented Control
Snackbar
Tab Control
Teaser
Textarea
Toggle
Tooltip
Top Navigation
Top Navigation Message
Splash Screen
Sign up
Log in
Forgot password
Onboarding
Verification
Messages
Grid
Iconography
Layouts
Screen Sizes
Toolkit
App Icon
Colors
Illustrations
Logo Versions
Typography
Background Color
Border Color
Radius
Border Width
Font Size
Font Weight
Font Family
Line Height
Letter Spacing
Breakpoints
Spacing
Shadow
Dark mode
Grid
PRO
You can edit 8 Components for free. Get premium for unlimited access.
To create a harmonious overall image of an app, use a grid. You place your elements there and align them accordingly. This way you can ensure that the distances are always correct and maintained.
Spacing
You can use different spacing for your grid.
Column
Padding
Space between
1
16 px
-
2
16 px
16 px
3
16 px
16 px
Image 1.1 : 16px grid
Column
Padding
Space between
1
24 px
-
2
24 px
24 px
3
24 px
24 px
Image 1.2 : 24px grid
Discover more content
You have questions or need help?
You want to try?
Save time and money?