Framework

UI Style Guide

01. Color palette

In dit onderdeel van de style guide verwerken we de kleuren die we gaan toepassen op de website. Onder de kleur vind je de kleurencodes. Deze kleurencodes plaatsen we in het kleurenpalet van je website.

#FFFFFF

#000000

#00b2e2

#5b6771

#f59c26

#FFFFFF

#00b2e2

#00b2e2

#5b6771

02. Text styles

In het volgende onderdeel van deze style guide hebben we de tekst type gestijld. We hebben 3 verschillende styles gebruikt waar je een keuze uit kan maken.

Primary

Secondary

Heading 1

Heading 1

Heading 1

Heading 2

Heading 2

Heading 2

Heading 3

Heading 3

Heading 3

Heading 4

Heading 4

Heading 4

Body

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.

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.

List

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

All in one

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

03. Modules

In het laatste gedeelte van deze styleguide hebben we de meest gebruikte modules gestijld met de eerder gemaakte tekst stijlen. Ook hier laten we drie verschillende stijlen zien om je een goed beeld te geven van hoe de modules er op je website uit kunnen komen te zien.

Primary

Secondary

Tertiary

Blurb

]

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Email optin

Contact form

4 + 7 =

7 + 10 =

11 + 2 =

Image

Call to action

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Divider

Person

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Social Media Follow

Toggle

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Testimonial

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Video

Accordion

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Blog

Scrum en Kanban, het zijn allebei agile methoden

Scrum vs Kanban: dit zijn de overeenkomsten en de verschillen en in deze situaties kun je beter voor Kanban kiezen Om meteen met de overeenkomsten te beginnen tussen Scrum vs Kanban: het zijn allebei agile methoden. Agile is een manier van werken, denken en...

Dit is wat de Scrum Product Owner wel én niet doet

Dit is wat de Scrum Product Owner wel én niet doet    Binnen het Scrum-team zijn er 3 basisrollen: de Scrum Master, de Product Owner (PO) en de leden van het team, ook wel de Developers genoemd. Dit team werkt volledig zelfstandig aan de ontwikkeling van een product....

Wat is een Scrum master? En hieraan herken je een goeie!

Wat is een Scrum master? En hieraan herken je een goeie    Scrummen is het op flexibele en gestructureerde wijze ontwikkelen van een product dat volledig in lijn is met de wensen van de klant. Daarbij werk je in een dedicated, zelfsturend team. Binnen een Scrum-team...

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem    Lean werken gaat over het zo efficiënt mogelijk maken van processen. Het analyseren van een probleem is daarbij heel erg belangrijk. Er zijn verschillende methodes om de oorzaak van een probleem te...

Scrum en Kanban, het zijn allebei agile methoden

Scrum vs Kanban: dit zijn de overeenkomsten en de verschillen en in deze situaties kun je beter voor Kanban kiezen Om meteen met de overeenkomsten te beginnen tussen Scrum vs Kanban: het zijn allebei agile methoden. Agile is een manier van werken, denken en...

Dit is wat de Scrum Product Owner wel én niet doet

Dit is wat de Scrum Product Owner wel én niet doet    Binnen het Scrum-team zijn er 3 basisrollen: de Scrum Master, de Product Owner (PO) en de leden van het team, ook wel de Developers genoemd. Dit team werkt volledig zelfstandig aan de ontwikkeling van een product....

Wat is een Scrum master? En hieraan herken je een goeie!

Wat is een Scrum master? En hieraan herken je een goeie    Scrummen is het op flexibele en gestructureerde wijze ontwikkelen van een product dat volledig in lijn is met de wensen van de klant. Daarbij werk je in een dedicated, zelfsturend team. Binnen een Scrum-team...

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem    Lean werken gaat over het zo efficiënt mogelijk maken van processen. Het analyseren van een probleem is daarbij heel erg belangrijk. Er zijn verschillende methodes om de oorzaak van een probleem te...

Scrum en Kanban, het zijn allebei agile methoden

Scrum vs Kanban: dit zijn de overeenkomsten en de verschillen en in deze situaties kun je beter voor Kanban kiezen Om meteen met de overeenkomsten te beginnen tussen Scrum vs Kanban: het zijn allebei agile methoden. Agile is een manier van werken, denken en...

Dit is wat de Scrum Product Owner wel én niet doet

Dit is wat de Scrum Product Owner wel én niet doet    Binnen het Scrum-team zijn er 3 basisrollen: de Scrum Master, de Product Owner (PO) en de leden van het team, ook wel de Developers genoemd. Dit team werkt volledig zelfstandig aan de ontwikkeling van een product....

Wat is een Scrum master? En hieraan herken je een goeie!

Wat is een Scrum master? En hieraan herken je een goeie    Scrummen is het op flexibele en gestructureerde wijze ontwikkelen van een product dat volledig in lijn is met de wensen van de klant. Daarbij werk je in een dedicated, zelfsturend team. Binnen een Scrum-team...

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem

5x waarom methode: ontdek eenvoudig de oorzaak van het probleem    Lean werken gaat over het zo efficiënt mogelijk maken van processen. Het analyseren van een probleem is daarbij heel erg belangrijk. Er zijn verschillende methodes om de oorzaak van een probleem te...