Jade/Pug not repeat the same code

Question

I would like to know how to do not need to repeat codes, I do not know if using the for, for example I have this code below that corresponds to a card with data from an educator I will have several of those where I will only change the data but the code structure is the same, I will need to create a slide with these cards, on the screen will be able to appear 4 by 4, would like to learn some jade/Pug resource where I leave the code cleaner without having to repeat it.

		//- CARD 4
		div.card-educator.item
			ul.educator
				li.educator-photo
					figure
						img(src="img/eunice.png", alt="Eunice Magalhães Fonseca")
						figcaption Eunice Magalhães Fonseca
				li.hr
					hr
				li.icons.icon-boy-girl
					svg
						use(xlink:href='svg/myicons.svg#boy-girl')
					span 252 alunos
				li.icons.icon-gamepad
					svg
						use(xlink:href='svg/myicons.svg#gamepad')
					span 252 alunos
				li.icons.icon-question-list
					svg
						use(xlink:href='svg/myicons.svg#question-list')
					span 252 alunos
				li.button
					button(type='button') Selecionar

Answer 1

Use the mixin feature.

mixin loop-lista(photourl,nome,svg-bg-url,totalbg,svg-gamepad-url,totalgp,svg-ql,totalql)
    li.educator-photo
       figure
           img(src=photourl, alt=nome)
            figcaption 
                =nome
            li.hr hr
            li.icons.icon-boy-girl
                svg
                    use(xlink:href=svg-bg-url)
                span =totalbg
            li.icons.icon-gamepad
                svg
                    use(xlink:href=svg-gamepad-url)
                span totalgp
            li.icons.icon-question-list
                svg
                    use(xlink:href=svg-ql)
                span totalql
            li.button
                button(type='button') Selecionar 

To call on the main page

+loop-lista("img/eunice.png","Eunice Magalhães Fonseca","svg/myicons.svg#boy-girl","250 Alunos","svg/myicons.svg#gamepad","210 Alunos","svg/myicons.svg#question-list","200 Alunos")
+loop-lista("img/maria.png","Maria José Fonseca","svg/myicons.svg#boy-girl","250 Alunos","svg/myicons.svg#gamepad","210 Alunos","svg/myicons.svg#question-list","200 Alunos")

If svg/x.svg are fixed resources, you can leave them inside the mixin and remove the parameters, thus:

mixin loop-lista(photourl,nome,totalbg,totalgp,totalql)
    li.educator-photo
       figure
           img(src=photourl, alt=nome)
            figcaption 
                =nome
            li.hr hr
            li.icons.icon-boy-girl
                svg
                    use(xlink:href='svg/myicons.svg#boy-girl')
                span =totalbg
            li.icons.icon-gamepad
                svg
                    use(xlink:href='svg/myicons.svg#gamepad')
                span totalgp
            li.icons.icon-question-list
                svg
                    use(xlink:href='svg/myicons.svg#question-list')
                span totalql
            li.button
                button(type='button') Selecionar 

+loop-lista("img/eunice.png","Eunice Magalhães Fonseca","250 Alunos","210 Alunos","200 Alunos")
+loop-lista("img/maria.png","Maria José Fonseca","250 Alunos","210 Alunos","200 Alunos")