Webstyle guide

Headings and paragraphs

Heading	Example
<h1 class="title-big"></h1>	Op weg naar herstel
<h1></h1>	Op weg naar herstel
<h2></h2>	Op weg naar herstel
<h3></h3>	Op weg naar herstel
<h4></h4>	Op weg naar herstel
<h5></h5>	Op weg naar herstel
<h6></h6>	Woensdag 14/08/2024

Text

<label></label>	Op weg naar herstel
<p class="intro"></p>	Als jouw systeem aangesloten is op een alarmcentrale, moet je dit niet zelf doen: de alarmcentrale zorgt voor de registratie.
<p></p>	Als jouw systeem aangesloten is op een alarmcentrale, moet je dit niet zelf doen: de alarmcentrale zorgt voor de registratie.
<p class="small"></p>	Dit initiatief is een samenwerking tussen Gezinsbond Nazareth-Eke, Rebelle vzw, Solidaris en Huis van het Kind Nazareth.
<a> href="#">...</a>	Neem contact met ons op
<a class="arrows" href="#"></a>	Lees meer
<a class="w-border" href="#"></a>	Neem contact met ons op

Text colors

.text-primary	Duis amet velit anim magna.
.text-secondary	Duis amet velit anim magna.
.text-success	Duis amet velit anim magna.
.text-info	Duis amet velit anim magna.
.text-warning	Duis amet velit anim magna.
.text-white	Duis amet velit anim magna.
.text-danger	Duis amet velit anim magna.
.text-orange	Duis amet velit anim magna.
.text-mediumorange	Duis amet velit anim magna.
.text-lightorange	Duis amet velit anim magna.
.text-yellow	Duis amet velit anim magna.
.text-green	Duis amet velit anim magna.
.text-lightgreen	Duis amet velit anim magna.
.text-lightestgreen	Duis amet velit anim magna.
.text-grassgreen	Duis amet velit anim magna.
.text-blue	Duis amet velit anim magna.
.text-lightblue	Duis amet velit anim magna.
.text-red	Duis amet velit anim magna.
.text-purple	Duis amet velit anim magna.

Background colors

.bg-primary	Duis amet velit anim magna.
.bg-secondary	Duis amet velit anim magna.
.bg-success	Duis amet velit anim magna.
.bg-info	Duis amet velit anim magna.
.bg-warning	Duis amet velit anim magna.
.bg-danger	Duis amet velit anim magna.
.bg-orange	Duis amet velit anim magna.
.bg-mediumorange	Duis amet velit anim magna.
.bg-lightorange	Duis amet velit anim magna.
.bg-yellow	Duis amet velit anim magna.
.bg-green	Duis amet velit anim magna.
.bg-lightgreen	Duis amet velit anim magna.
.bg-lightestgreen	Duis amet velit anim magna.
.bg-grassgreen	Duis amet velit anim magna.
.bg-blue	Duis amet velit anim magna.
.bg-lightblue	Duis amet velit anim magna.
.bg-red	Duis amet velit anim magna.
.bg-purple	Duis amet velit anim magna.

Lists

Unordered list

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis vel neque vitae varius. Curabitur tincidunt arcu a turpis ullamcorper facilisis ultrices sit amet nisl. Cras vitae ex efficitur, tempus tortor in, aliquet arcu. Maecenas suscipit, lectus vel facilisis condimentum, nulla leo viverra lacus, a consequat nisi sapien id sapien.
• Niveau 1
• Niveau 1
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis vel neque vitae varius. Curabitur tincidunt arcu a turpis ullamcorper facilisis ultrices sit amet nisl. Cras vitae ex efficitur, tempus tortor in, aliquet arcu. Maecenas suscipit, lectus vel facilisis condimentum, nulla leo viverra lacus, a consequat nisi sapien id sapien.
  • Niveau 2
  • Niveau 2
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis vel neque vitae varius. Curabitur tincidunt arcu a turpis ullamcorper facilisis ultrices sit amet nisl. Cras vitae ex efficitur, tempus tortor in, aliquet arcu. Maecenas suscipit, lectus vel facilisis condimentum, nulla leo viverra lacus, a consequat nisi sapien id sapien.
    • Niveau 3
    • Niveau 3

Checklist (ul.checklist)

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis vel neque vitae varius. Curabitur tincidunt arcu a turpis ullamcorper facilisis ultrices sit amet nisl. Cras vitae ex efficitur, tempus tortor in, aliquet arcu. Maecenas suscipit, lectus vel facilisis condimentum, nulla leo viverra lacus, a consequat nisi sapien id sapien.
• Niveau 1
• Niveau 1
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis vel neque vitae varius. Curabitur tincidunt arcu a turpis ullamcorper facilisis ultrices sit amet nisl. Cras vitae ex efficitur, tempus tortor in, aliquet arcu. Maecenas suscipit, lectus vel facilisis condimentum, nulla leo viverra lacus, a consequat nisi sapien id sapien.
  • Niveau 2
  • Niveau 2
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis vel neque vitae varius. Curabitur tincidunt arcu a turpis ullamcorper facilisis ultrices sit amet nisl. Cras vitae ex efficitur, tempus tortor in, aliquet arcu. Maecenas suscipit, lectus vel facilisis condimentum, nulla leo viverra lacus, a consequat nisi sapien id sapien.
    • Niveau 3
    • Niveau 3

Ordered list (ol.primary-number)

1. Reprehenderit deserunt id id officia laborum mollit tempor sint veniam amet labore.
2. Qui incididunt nostrud pariatur esse amet commodo tempor velit aliqua non nisi.
3. Aliqua occaecat sit deserunt aliquip tempor occaecat aliqua ad nulla laboris.
4. Fugiat tempor incididunt minim incididunt excepteur adipisicing qui sint ex culpa.

Buttons

Button Button Button Button

Forms

Regular form

Gebruikersnaam

Wachtwoord

Username (disabled)

Password (disabled)

Select Option 1Option 2Option 3Option 4

Select (disabled) Option 1Option 2Option 3Option 4

Date

Date (disabled)

Textarea

Textarea (disabled)

Radio

Radio group

Option 1

Option 2

Option 3

Radio group (disabled)

Option 1

Option 2

Option 3

Gender

Man

Vrouw

X

Checkbox

Inline checkboxes

Option 1

Option 2

Option 3

Checkbox group

Option 1

Option 2

Option 3

Checkbox group (disabled)

Option 1

Option 2

Option 3

Tagify

Checkbox switch

Checkbox switch (disabled)

A range input with min=1, max=10 and step=1

1 2 3 4 5 6 7 8 9 10

Verzenden

form.table-layout

Some heading

Kies een gebruikersnaam

Minimum 6 tekens
Kies geen naam waarmee je herkenbaar bent (want de gebruikersnaam is zichtbaar op het deelnemersforum). De gebruikersnaam mag alleen bestaan uit letters, cijfers, punten (.), koppeltekens (-) of onderstrepingstekens (_).

Kies een wachtwoord

Minstens 10 karakters lang en moet minstens 1 kleine letter, hoofdletter, cijfer en leesteken bevatten.
De gevraagde combinatie is streng maar garandeert een zeer veilig wachtwoord. Op die manier dragen we zorg voor je privacy, we vragen je immers om persoonlijke info in te vullen bij de oefeningen.
Tip: gebruik een makkelijk te onthouden zin als wachtwoord.
Bvb.: Ik ben de 1ste winnaar!

Wachtwoord bevestigen

Wat is je leeftijd?

< 16 jaar16 - 17 jaar18 - 24 jaar25 - 34 jaar35 - 44 jaar45 - 54 jaar55 - 64 jaar65 - 70 jaar> 70 jaar

Geslacht

Man

Vrouw

Anders

Postcode

Ik woon in het buitenland

Postcode

• Vul enkel een Belgische postcode in wanneer je in België woont.
• Woon je niet in België, zet dan enkel een vinkje in het vak ernaast.

form.table-layout.horizontal-layout

Wat is je leeftijd?

< 16 jaar16 - 17 jaar18 - 24 jaar25 - 34 jaar35 - 44 jaar45 - 54 jaar55 - 64 jaar65 - 70 jaar> 70 jaar

Geslacht

Man

Vrouw

Anders

Postcode

Ik woon in het buitenland

Postcode

• Vul enkel een Belgische postcode in wanneer je in België woont.
• Woon je niet in België, zet dan enkel een vinkje in het vak ernaast.

Likert

Hoe vaak heb je in de afgelopen 2 weken last gehad van één of meer van de volgende problemen?

Helemaal niet

Meerdere dagen

Meer dan de helft van de dagen

Bijna (elke) dag

Je neerslachtig, depressief of wanhopig voelen.

Helemaal niet

Meerdere dagen

Meer dan de helft van de dagen

Bijna (elke) dag

Moeilijk inslapen, moeilijk doorslapen of te veel slapen.

Helemaal niet

Meerdere dagen

Meer dan de helft van de dagen

Bijna (elke) dag

Je moe voelen of gebrek aan energie hebben.

Helemaal niet

Meerdere dagen

Meer dan de helft van de dagen

Bijna (elke) dag

Weinig eetlust of overmatig eten.

Helemaal niet

Meerdere dagen

Meer dan de helft van de dagen

Bijna (elke) dag

Een slecht gevoel hebben over jezelf. Het gevoel hebben dat je een mislukkeling bent. Het gevoel hebben dat je jezelf of je familie teleurgesteld hebt.

Helemaal niet

Meerdere dagen

Meer dan de helft van de dagen

Bijna (elke) dag

Problemen om je te concentreren. Bijvoorbeeld om de krant te lezen of om tv te kijken.

Helemaal niet

Meerdere dagen

Meer dan de helft van de dagen

Bijna (elke) dag

Zo traag bewegen of zo langzaam spreken dat andere mensen dit opgemerkt hebben. Of het tegenovergestelde: zo zenuwachtig en rusteloos zijn dat je veel meer bewoog dan normaal.

Helemaal niet

Meerdere dagen

Meer dan de helft van de dagen

Bijna (elke) dag

De gedachte hebben dat je beter dood kan zijn. Of de gedachte jezelf op een bepaalde manier pijn te moeten doen.

Helemaal niet

Meerdere dagen

Meer dan de helft van de dagen

Bijna (elke) dag

Helemaal niet

Meerdere dagen

Meer dan de helft van de dagen

Bijna (elke) dag

In de afgelopen 28 dagen:

Niet

Een beetje

Enigszins

Aanzienlijk

Is uw gewicht (het getal op de weegschaal) van invloed geweest op hoe u over uzelf als persoon denkt (oordeelt)?

Niet

Een beetje

Enigszins

Aanzienlijk

Is uw figuur van invloed geweest op hoe u over uzelf als persoon denkt (oordeelt)?

Niet

Een beetje

Enigszins

Aanzienlijk

Hoe erg zou het u van streek gemaakt hebben als u gevraagd was om uzelf eens per week (niet vaker en ook niet minder vaak) te wegen in de komende 4 weken?

Niet

Een beetje

Enigszins

Aanzienlijk

Hoe ontevreden was u met uw gewicht (getal op de weegschaal)?

Niet

Een beetje

Enigszins

Aanzienlijk

Hoe ontevreden was u met uw figuur?

Niet

Een beetje

Enigszins

Aanzienlijk

Hoe ongemakkelijk voelde u zich bij het zien van uw eigen lichaam (bijvoorbeeld, bij het zien van uw lichaam in de spiegel, in een winkelruit, tijdens het uitkleden of het nemen van een bad of douche)?

Niet

Een beetje

Enigszins

Aanzienlijk

Hoe ongemakkelijk voelde u zich als anderen uw lichaamzagen (bijvoorbeeld in een gemeenschappelijke omkleedruimte, tijdens het zwemmen, of bij het dragen van strakke kleding)?

Niet

Een beetje

Enigszins

Aanzienlijk

Verzenden

Modals

Popovers

Tooltips

Toast

Alerts

Badges

Accordion

Carousel using Tiny Slider 2

Visit on Github: https://ganlanyuan.github.io/tiny-slider/

Images

---

Detailed page

---

---

Buttons met ankerpunten

• Bodytekst
• Tekst & link
• Tekst & beeld
• Kadertekst
• 2 kaders naast elkaar
• Afsluitende links
• Link & beeld
• Links & CTA
• CTA
• CTA & beeld