Grid System
The table of grid system sizes
Device Width
≥ 992px
< 992px
< 767px
< 479px
Max Container Width
1200px
100%
100%
100%
Spacing System
Spacing - Desktop
130 px
50 px
130 px
- Paddings Tops and Bottom for blocks - 130 px
- Inside of Blocks (between headlines and inside a content block) - 60px
Spacing - Tablet
80 px
40 px
80 px
- Paddings Tops and Bottom for blocks - 80 px
- Inside of Blocks (between headlines and inside a content block) - 40px
Spacing - Mobile
60 px
40 px
60 px
- Paddings Tops and Bottom for blocks - 60 px
- Inside of Blocks (between headlines and inside a content block) - 40px
Color Palette
Primary
#ff2a0e
#f8f8f8
#717171
Secondary
#ffffff
#f9f9fa
#f2f1f1
#afafaf
#010524
Typography
Headers - Desktop
Heading 1
כותרת 1
Heading 2
כותרת 2
Heading 3
כותרת 3
Heading 4
כותרת 4
Heading 5
כותרת 5
Heading 6
כותרת 6
Headers - Tablet
Heading 1
כותרת 1
Heading 2
כותרת 2
Heading 3
כותרת 3
Heading 4
כותרת 4
Heading 5
כותרת 5
Heading 6
כותרת 6
Headers - Mobile
Heading 1
כותרת 1
Heading 2
כותרת 2
Heading 3
כותרת 3
Heading 4
כותרת 4
Heading 5
כותרת 5
Heading 6
כותרת 6
Body
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
לפסקה אין כותרת, אך היא מתחילה בשורה חדשה, ולכן מופרדת היטב, מבחינה ויזואלית, מהפסקה הקודמת. ההפרדה הוויזואלית בין פסקה לפסקה מודיעה לקורא על התחלתו של עניין חדש
Paragraph Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
לפסקה אין כותרת, אך היא מתחילה בשורה חדשה, ולכן מופרדת היטב, מבחינה ויזואלית, מהפסקה הקודמת. ההפרדה הוויזואלית בין פסקה לפסקה מודיעה לקורא על התחלתו של עניין חדש, ומספקת לו תמונה ראשונית של היקף הקטע שעליו לקרוא עד להשלמת קליטתו של הרעיון המובע בפסקה. גם לכותב מסייעת ההפרדה להבחין שמדובר ברעיון נפרד, שאותו עליו לפתח.
לפסקה אין כותרת, אך היא מתחילה בשורה חדשה, ולכן מופרדת היטב, מבחינה ויזואלית, מהפסקה הקודמת. ההפרדה הוויזואלית בין פסקה לפסקה מודיעה לקורא על התחלתו של עניין חדש, ומספקת לו תמונה ראשונית של היקף הקטע שעליו לקרוא עד להשלמת קליטתו של הרעיון המובע בפסקה. גם לכותב מסייעת ההפרדה להבחין שמדובר ברעיון נפרד, שאותו עליו לפתח.
Links
List
- List item
- List item
- List item
- List item
- רשימה
- רשימה
- רשימה
Buttons
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
