Color palette
Color Gradients
Voeg class 'gradient-'+'kleur'-'nummer' toe aan element
<div> class='gradient-nebula-100'>
<span> Dit is een div</span>
</div>
Of gebruik Sass functie 'gradient(alpha: 1, end-color)'
Output style: background-image: radial-gradient(circle at 0% 0%, rgba(252, 252, 252, 0.6) 0%, #b2cac4 100%);
Voeg class 'gradient-'+'kleur'-'nummer' toe aan element
<div> class='gradient-fuscous-100'>
<span> Dit is een div</span>
</div>
Of gebruik Sass functie 'gradient(alpha: 1, end-color)'
Output style: radial-gradient(circle at 0% 0%, rgba(252, 252, 252, 0.6) 0%, #232221 100%);
Voeg class 'gradient-'+'kleur'-'nummer' toe aan element
<div> class='gradient-alabaster-100'>
<span> Dit is een div</span>
</div>
Of gebruik Sass functie 'gradient(alpha: 1, end-color)'
Output style: radial-gradient(circle at 0% 0%, rgba(252, 252, 252, 0.6) 0%, #f2f2f2 100%);
Voeg class 'gradient-'+'kleur'-'nummer' toe aan element
<div> class='gradient-jaffa-100'>
<span> Dit is een div</span>
</div>
Of gebruik Sass functie 'gradient(alpha: 1, end-color)'
Output style: radial-gradient(circle at 0% 0%, rgba(252, 252, 252, 0.6) 0%, #f68a3f 100%);
Typography
Aa
Aa
Aa
font-family: 'Prata', sans-serif;
font-weight: 400;
font-size: clamp(28px, 0.91vw + 24.6px, 42px);
}Heading 1
font-family: 'Prata', sans-serif;
font-weight: 400;
font-size: clamp(22px, 0.65vw + 19.57px, 32px);
}Heading 2
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: clamp(18px, 0.26vw + 17.02px, 22px);
}Heading 3
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: clamp(16px, 0.13vw + 15.51px, 18px);
}Heading 4
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: clamp(14px, 0.13vw + 13.51px, 16px);
}Heading 5
Body L (Default)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
Body L Light (Default)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
Body M
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
Ordered list item
- List item
- List item
- List item
- List item
Unordered list item
- List item
- List item
- List item
- List item
Inputs
Alerts
Veilig betalen met
