typography

This is header 1

This is header 2

This is header 3

This is header 4

This is header 5
This is header 5

h1. Small segment header.

h2. Small segment header.

h3. Small segment header.

h4. Small segment header.

h5. Small segment header.
h6. Small segment header.

 

 

Pray for the Peace of Jerusalem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restatis igitur vos; Re mihi non aeque satisfacit, et quidem locis pluribus. Dici enim nihil potest verius. Quid ergo hoc loco intellegit honestum? TooltipQuod ea non occurrentia fingunt, vincunt Aristonem; Profectus in exilium Tubulus statim nec respondere ausus; Scio enim esse quosdam, qui quavis lingua philosophari possint; Duo Reges: constructio interrete.

Erit enim mecum, si tecum erit. Primum divisit ineleganter; Duo enim genera quae erant, fecit tria. Nulla erit controversia. Nemo igitur esse beatus potest. Utrum igitur tibi litteram videor an totas paginas commovere? Quid nunc honeste dicit? Nihilo beatiorem esse Metellum quam Regulum.

This is a blockquote, consectetur adipiscing elit. Restatis igitur vos; Re mihi non aeque satisfacit, et quidem locis pluribus.En dit een cite

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restatis igitur vos; Re mihi non aeque satisfacit, et quidem locis pluribus. Dici enim nihil potest verius. Quid ergo hoc loco intellegit honestum? Quod ea non occurrentia fingunt, vincunt Aristonem; Profectus in exilium Tubulus statim nec respondere ausus; Scio enim esse quosdam, qui quavis lingua philosophari possint; Duo Reges: constructio interrete.

Erit enim mecum, si tecum erit. Primum divisit ineleganter; Duo enim genera quae erant, fecit tria. Nulla erit controversia. Nemo igitur esse beatus potest. Utrum igitur tibi litteram videor an totas paginas commovere? Quid nunc honeste dicit? Nihilo beatiorem esse Metellum quam Regulum.

This text is in a grey div class=”panel”
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restatis igitur vos; Re mihi non aeque satisfacit, et quidem locis pluribus. Dici enim nihil potest verius. Quid ergo hoc loco intellegit honestum? Quod ea non occurrentia fingunt, vincunt Aristonem; Profectus in exilium Tubulus statim nec respondere ausus; Scio enim esse quosdam, qui quavis lingua philosophari possint; Duo Reges: constructio interrete.
This text is in a blue box div class=”panel callout”
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restatis igitur vos; Re mihi non aeque satisfacit, et quidem locis pluribus. Dici enim nihil potest verius. Quid ergo hoc loco intellegit honestum? Quod ea non occurrentia fingunt, vincunt Aristonem; Profectus in exilium Tubulus statim nec respondere ausus; Scio enim esse quosdam, qui quavis lingua philosophari possint; Duo Reges: constructio interrete.

Button
Button expand

By adding button-group class ’round even-[number of buttons (max. 8) the buttons will be stretched evenly across the page and you will only have rounded corners at the sides:

Fancy buttons for donations or others calls to action, can be made with a custom div and with the style element you determine the color of the button. The text is always in capitals and an icon from the  fontawesome-library can be added. See examples below.

These are the colors:

#f2717d (for projects, donation)
#ec8a2b (for travel)
#b5c507 (for activities)
#008cba (for prayer?)
#a96fe2 (?)
#4bb968 (for the shop)

Examples of the fancy buttons

 

 

 

 

 

 

Voor het uitverdelen van dergelijke knoppen als hierboven met div’s, gebruik je de ‘grid’mogelijkheden van Foundation.

  • Accordion 1
    Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  • Accordion 2
    Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  • Accordion 3
    Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing 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.