NPO Logo EO Logo Icon--youtube Icon--facebook Icon--twitter Icon--instagram Icon--snapchat Icon--pinterest Icon--whatsapp Icon--spotify Icon--mail play video image audio close menu search next checkmark cross

Styleguide > "Text & Media"-blokje

Hoe en wanneer gebruik je het?

Als je een artikel aanmaakt, kun je deze vormgeven met behulp van het "Text & Media"-blokje. Dit is een blokje dat veel verschillende uiterlijken heeft en waar je combinaties van tekst, foto's en video's in kunt zetten.

Hieronder zie je hoe je het blokje kunt gebruiken en hoe het er vervolgens uitziet op de website.

Headers

Kop 1

Kop 2

Kop 3

Kop 4

Kop 5

Kop 6

Alinea (inclusief link in titel)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra id nisl eu ultrices. Suspendisse a turpis nec nunc accumsan ornare. Cras interdum dui ac euismod consectetur. Nulla id interdum ex. Phasellus volutpat orci felis, non tempor nisi rhoncus quis. Aliquam erat volutpat. Proin ornare fermentum placerat. Pellentesque dapibus tortor justo, dictum dictum mi gravida vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra id nisl eu ultrices. Suspendisse a turpis nec nunc accumsan ornare. Cras interdum dui ac euismod consectetur. Nulla id interdum ex. Phasellus volutpat orci felis, non tempor nisi rhoncus quis. Aliquam erat volutpat. Proin ornare fermentum placerat. Pellentesque dapibus tortor justo, dictum dictum mi gravida vel. 

Lorem ipsum dolor sit amet, superscript consectetur adipiscing elit subscript. Curabitur viverra id nisl eu ultrices. Suspendisse a turpis nec nunc accumsan ornare. Cras interdum dui ac euismod consectetur. Nulla id interdum ex. Phasellus volutpat orci felis, non tempor nisi rhoncus quis. Aliquam erat volutpat. Proin ornare fermentum placerat. Pellentesque dapibus tortor justo, dictum dictum mi gravida vel. 

Opsommingen

Genummerde lijst:

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Curabitur viverra id nisl eu ultrices.
  3. Suspendisse a turpis nec nunc accumsan ornare.

Lijst met bullets:

  • Cras interdum dui ac euismod consectetur.
  • Nulla id interdum ex.
  • Phasellus volutpat orci felis, non tempor nisi rhoncus quis.
  • Aliquam erat volutpat. Proin ornare fermentum placerat.
  • Pellentesque dapibus tortor justo, dictum dictum mi gravida vel. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.

Naast tekst, rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Naast tekst, links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.

In tekst, links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.

Middenonder, meerdere afbeeldingen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.

Rechtsboven

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.

Middenboven

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.

Linksonder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.

Linksboven

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.

Middenonder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.

Rechtsonder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit neque ut quam tempus, id tincidunt dolor tempor. Sed nec sagittis purus, quis tincidunt quam. Phasellus fermentum varius mauris, ac suscipit nunc aliquet ac. Nam fermentum volutpat diam, id tempor dolor malesuada pretium. Sed eleifend est et metus consequat accumsan. Morbi vitae ante id nisi fermentum vestibulum. Donec commodo, magna nec rhoncus semper, dolor magna interdum est, quis congue nunc sapien at orci. Nulla vestibulum est sit amet arcu accumsan sollicitudin.