Header
Default
Over Header Image
This collection has a product that has variant colour images.
Find Your E-Bike Find Your E-Bike
Title Text Goes In Here
Lorem ipsum dolor sit amet consectetuer adipiscing elit sed do eiusmod temporlorem ipsum.
Title Text Goes Here
Lorem ipsum dolor sit amet consectetuer adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetuer adipiscing elit sed do eiusmod tempor.
This block doesn't have a title, but it still has some content. Lorem ipsum dolor sit amet consectetuer adipiscing elit sed do eiusmod tempor.
Title goes here
Lorem ipsum dolor sit amet consectetuer adipiscing elit sed do eiusmod tempor
Title text goes here
Colours
#C4FF35
brand-electric
#DBFF85
brand-electric-light
#F3FFD6
brand-electric-lighter
#2F3440
brand-slate
#82858C
brand-slate-light
#D5D6D9
brand-slate-lighter
#C6D4A5
brand-green
#DDE5C9
brand-green-light
#F4F7ED
brand-green-lighter
#00C4FC
brand-blue
#66DBFD
brand-blue-light
#CCF3FE
brand-blue-lighter
#2E5368
brand-gray
#8197A4
brand-gray-light
#D5DCE1
brand-gray-lighter
Typography
All Fonts Used
Countach Bold Italic
Countach Regular
Weissenhof Grotesk Bold
Weissenhof Grotesk Bold Italic
Weissenhof Grotesk Medium
Weissenhof Grotesk Medium Italic
Weissenhof Grotesk Regular
Weissenhof Grotesk Regular Italic
Mobile Desktop
H1 65px 41px
Countach
- Bold Italic
H2 44px 34px
Countach
- Bold Italic
H3 32px 28px
Countach
- Bold Italic
H4 41px 26px
Countach
- Regular
B1 30px 28px
Weisenhoff
Grotesk
B2 20px 18px
Weisenhoff
Grotesk
B3 18px 17px
Weisenhoff
Grotesk
B4 17px 16px
Weisenhoff
Grotesk
B5 16px 14px
Weisenhoff
Grotesk
B6 14px 13px
Weisenhoff
Grotesk
B7 12px 12px
Weisenhoff
Grotesk
B8 9px 9px
Weisenhoff
Grotesk
The variants below are deprecated
B9 14px 14px
Weisenhoff
Grotesk
B10 12px 10px
Weisenhoff
Grotesk
B11 12px 12px
Weisenhoff
Grotesk
B12 12px 14px
Weisenhoff
Grotesk
B13 11px 10px
Weisenhoff
Grotesk
B14 9px 9px
Weisenhoff
Grotesk
Forms
Search input
On dark background
🔍
On light background
🔍
Input Fields
Text
Password
Date
Misc
Checkbox
Checkbox (:checked)
Spacing
Horizontal spacing and vertical spacing are in 10px increments
Using tailwind, values such as margin, padding, height, width follow the pattern of 1-128. So for width w-1 would be the same as width: 10px;
w-1
w-2
w-3
w-4
w-5
10px
20px
30px
40px
50px
h-1
h-2
h-3
h-4
h-5
Accordion
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
Cards
2022 Cube
Electric Bikes
ePowered by Bosch
2022 Cube
Electric Bikes
ePowered by Bosch
Content & Media With Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam, consectetur deserunt dicta doloribus, expedita fuga, maiores minus nam obcaecati odio placeat.
Rerum tenetur vero voluptas.
Content & Media With Image 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam, consectetur deserunt dicta doloribus, expedita fuga, maiores minus nam obcaecati odio placeat.
Rerum tenetur vero voluptas.
Content With Video
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam, consectetur deserunt dicta doloribus, expedita fuga, maiores minus nam obcaecati odio placeat.
Scroll to me
...
Scroll-toable Twin Image Block
