> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Stijl Mellowtel Elementen
Hier zie je hoe je het uiterlijk van Mellowtel Elementen kunt aanpassen met behulp van ingebouwde stylingopties en CSS-containerpositionering. Containerstyling geeft je volledige controle over lay-out en positionering, terwijl pakketstylingopties het uiterlijk van het element regelen.
## Pakketstylingopties
Het Mellowtel Elements-pakket biedt ingebouwde stylingopties waarmee je het uiterlijk van je elementen kunt aanpassen zonder aangepaste CSS te schrijven. Je kunt kleuren, afmetingen en visuele eigenschappen direct via het configuratieobject regelen.
```javascript theme={null}
const styles = {
textColor: '#FFFFFF', // Tekstkleur (hex-formaat)
backgroundColor: '#4CAF50', // Achtergrondkleur (hex-formaat)
radius: 8, // Randradius in pixels
width: 200, // Breedte in pixels (50-300 bereik)
height: 50 // Hoogte in pixels (20-200 bereik)
};
```
### Voorbeeld
```javascript theme={null}
// Maak een groene opt-in knop
await mellowtel.createElement('opt-in-container', {
type: 'opt-in',
styles: {
textColor: '#FFFFFF',
backgroundColor: '#10B981',
radius: 12,
width: 180,
height: 45
}
});
```
## Containerpositionering
Stijl de container-divs om elementen te positioneren:
```css theme={null}
/* Basispositionering */
.mellowtel-container {
display: flex;
gap: 10px;
margin: 20px 0;
}
/* Vaste positionering */
#opt-in-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
/* Responsieve lay-out */
.mellowtel-elements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
/* Mobiel responsief */
@media (max-width: 768px) {
.mellowtel-container {
flex-direction: column;
align-items: center;
}
}
```
### Compleet Styling Voorbeeld
```html theme={null}
```