Deze styleguide bevat de verschillende componenten waarmee pagina’s opgebouwd kunnen worden. Pagina’s met de Blocks-template kunnen gevuld worden met 1 of meer content-blocks. Dit type content-block is ‘Content’, voor broodtekst. Verderop zie je nog meer soorten content-blocks. De titel hierboven is een Paginatitel-content-block.
Deze paragraaf is een lead-paragraaf, te gebruiken voor een korte inleiding onder de paginatitel of om een paragraaf meer aandacht of waarde te geven. Een lead-paragraaf is ook meer links uitgelijnd op grote schermen.
Titel
Voor de titel hierboven gebruiken we een H3, de H1 en H2 zijn gereserveerd voor de pagina-titel. Een link in de bodytekst ziet er zo uit. Pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Nog een titel
Nulla euismod varius tellus, sed ullamcorper justo pulvinar quis. Sed consectetur tincidunt massa, non vestibulum nulla viverra vitae. Ut est augue, accumsan et ultricies a, molestie sed ex. Suspendisse eget gravida tellus. Quisque libero nunc, condimentum eget elementum laoreet, maximus vitae est. Maecenas ultricies suscipit massa, vitae interdum dolor posuere elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non arcu sed eros placerat accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ullamcorper massa vitae consectetur posuere. Phasellus in mollis sapien.
Dit is een ondersteunende paragraph, die heeft dezelfde stijl als een lead-paragraph, alleen de lead-paragraph springt lijnt meer uit naar links op grote schermen. Pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Nulla euismod varius tellus, sed ullamcorper justo pulvinar quis. Sed consectetur tincidunt massa, non vestibulum nulla viverra vitae. Ut est augue, accumsan et ultricies a, molestie sed ex. Suspendisse eget gravida tellus. Quisque libero nunc, condimentum eget elementum laoreet, maximus vitae est. Maecenas ultricies suscipit massa, vitae interdum dolor posuere elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non arcu sed eros placerat accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ullamcorper massa vitae consectetur posuere. Phasellus in mollis sapien.
De H3 titel
Nulla euismod varius tellus, sed ullamcorper justo pulvinar quis. Sed consectetur tincidunt massa, non vestibulum nulla viverra vitae. Ut est augue, accumsan et ultricies a, molestie sed ex. Suspendisse eget gravida tellus. Quisque libero nunc, condimentum eget elementum laoreet, maximus vitae est. Maecenas ultricies suscipit massa, vitae interdum dolor posuere elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non arcu sed eros placerat accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ullamcorper massa vitae consectetur posuere. Phasellus in mollis sapien.
Uitlijning
Via de “Formats”-dropdown is uitlijning in te stellen voor verschillende devices. Dit stukje bijv. wordt gecentreerd op tablets en grotere schermen. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non arcu sed eros placerat accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ullamcorper massa vitae consectetur posuere. Phasellus in mollis sapien.
- Dit is een opsommingslijst
- Kan korte zinnen bevatten
- Of langere zinnen. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non arcu sed eros placerat accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ullamcorper massa vitae consectetur posuere. Phasellus in mollis sapien.
- Nunc non arcu sed eros placerat accumsan
- Dit is een genummerde lijst
- Kan korte zinnen bevatten
- Of langere zinnen. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non arcu sed eros placerat accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ullamcorper massa vitae consectetur posuere. Phasellus in mollis sapien.
- Nunc non arcu sed eros placerat accumsan
Pellentesque ut urna id h1
Pellentesque ut urna id tellus faucibus sagittis h2
Pellentesque ut urna id tellus faucibus sagittis h3
Pellentesque ut urna id tellus faucibus sagittis h4
Pellentesque ut urna id tellus faucibus sagittis h5
Pellentesque ut urna id tellus faucibus sagittis h6
Paragraph boven header ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Pellentesque ut urna id h1
Paragraph onder header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Paragraph boven header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Pellentesque ut urna id tellus faucibus sagittis h2
Paragraph onder header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Paragraph boven header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Pellentesque ut urna id tellus faucibus sagittis h3
Paragraph onder header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Paragraph boven header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Pellentesque ut urna id tellus faucibus sagittis h4
Paragraph onder header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Paragraph boven header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Pellentesque ut urna id tellus faucibus sagittis h5
Paragraph onder header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Paragraph boven header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.
Pellentesque ut urna id tellus faucibus sagittis h6
Paragraph onder header pellentesque ut urna id tellus faucibus sagittis. Vestibulum auctor viverra metus ac sagittis. Etiam venenatis elit eleifend enim lacinia mollis. Mauris rutrum nulla nunc, non fermentum justo laoreet ac. Integer ultrices congue enim eget mattis. Mauris consectetur sapien vel felis consectetur ultrices. Morbi dapibus nec dui nec dapibus. Sed eget nisi quis lacus bibendum vehicula. Proin auctor eget felis at rhoncus. Maecenas magna velit, cursus ut faucibus vel, iaculis vel felis. Phasellus iaculis justo mauris.