Styleguide
Based on Squid Style Guide
Weights
AaThin 100
AaLight 300
AaRegular 400
AaMedium 500
AaBold 700
AaBlack 900
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 - = + < > ? / . , : “
Sizes
H1 24px Bold
H2 22px Bold
H3 20px Bold
H4 18px Bold
H5 16px Bold
H6 14px Bold
Text 14px Regular
Text Small 12px (85%) Regular
Text Big 16px (115%) Regular
Colors
Spacing
0.25rem - 3.5px default
0.5rem - 7px default
1rem - 14px default
1.5rem - 21px default
2rem - 28px default
2.5rem - 35px default
3rem - 42px default
Sizes
Breakpoints
Extra Small< 576px
Small - SM>= 576px ~ 767px
Medium - MD>= 768px ~ 991px
Large - LG>= 992px ~ 1199px
X-Large - XL>= 1200px ~ 1399px
XX-Large - XXL>= 1400px
Container Fluid
Padding: 1rem - 14px Default
Size100% in all breakepoints
Container Sizes
Padding: 1rem - 14px Default
Extra Small100%
Small - SM540px
Medium - MD720px
Large - LG960px
X-Large - XL1140px
XX-Large - XXL1320px
Grid
24 columns
Padding Between: 0.5rem - 7px Default
Use all Breakpoints
Custom Scrollbar
Example
Buttons
Inputs
Default
Readonly
Disabled
Validation
Textarea
Default
Readonly
Disabled
Validation
Select
Default
Disabled
Validation
Selectors
Checkbox
Radio
Toggle
Range
Default
Disabled
Tag
Support all colors - like buttons
Default
Readonly
Disabled
Badges
Support all colors - like buttons
Default
10
100
100
Over Element
10
100
100
Progress Bar
Support all colors - like buttons
Example
Loader
Support all colors - like buttons
Default
Bar
Toast
JS Required
Support all colors - like buttons
Layout
Exemple
Tooltip
JS Required
Dark/Default
Light
Box
Example
Alert
Support all colors - like buttons
Example
Card
Support all colors - like buttons
Example
Title
Some text
Title
Some text
Title
Some text
Title
Some text
Dropdown
JS Required
Layout
- Link
- Sample Text
I`m a plain dropdown
This is a paragraph
Accordion
JS Required
Example
Title 1
Title 2
Title 3
Open more than one
Title 1
Title 2
Title 3
Modal
JS Required
Layout
Example
Tabs
JS Required
Line Style Support all colors - like buttons
Default
- Home
- Profile
- Messages
- Settings
Line Style
- Home
- Profile
- Messages
- Settings
Breadcrumb
Example
Steps
Support all colors - like buttons
Example
Table
Table Head Line Support all colors - like buttons
Example - Mobile Overflow
Campaign | Social Network | Customer | Responsable | Status | Actions |
---|---|---|---|---|---|
Campaign 128/01/2021 - 29/10/2021 | Customer 1 | Responsable 1 | Status 1 | ||
Campaign 228/01/2021 - 29/10/2021 | Customer 2 | Responsable 2 | Status 2 | ||
Campaign 328/01/2021 - 29/10/2021 | Customer 3 | Responsable 3 | Status 3 | ||
Some text to footer |
Example - Mobile Column as Row
Campaign | Social Network | Customer | Responsable | Status | Actions |
---|---|---|---|---|---|
Campaign 128/01/2021 - 29/10/2021 | Customer 1 | Responsable 1 | Status 1 | ||
Campaign 228/01/2021 - 29/10/2021 | Customer 2 | Responsable 2 | Status 2 | ||
Campaign 328/01/2021 - 29/10/2021 | Customer 3 | Responsable 3 | Status 3 | ||
Some text to footer |