diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug
new file mode 100644
index 0000000..35fc8c1
--- /dev/null
+++ b/src/templates/mixins/components.pug
@@ -0,0 +1,52 @@
+
+// Header of landing pages. title or text can be skipped:
+// +jumbotron("{{ page_title }}", null, "{{ page_header_image }}")
+// Any extra attributes added (in a separate group) will be passed as is:
+// +jumbotron("{{ page_title }}", null, "{{ page_header_image }}")(data-node-id='{{ node._id }}')
+mixin jumbotron(title, text, image)
+	.jumbotron.jumbotron-overlay.text-white.mb-1(style='background-image: url(' + image + ');')&attributes(attributes)
+		.container
+			.row
+				.col-md-8
+					if title
+						.display-4.text-uppercase.font-weight-bold
+							=title
+					if text
+						.lead
+							=text
+
+// Secondary navigation.
+// e.g. Workshops, Courses.
+mixin nav-secondary(title)
+	ul.nav.nav-secondary.justify-content-center.mb-5
+		if title
+			li.nav-item.font-weight-bold
+				=title
+
+		if block
+			block
+		else
+			p No items defined.
+
+mixin nav-secondary-link()
+	li.nav-item
+		a.nav-link&attributes(attributes)
+			block
+
+// Takes as argument the number of columns to use in this deck. 1-6
+mixin card-deck(columns)
+	.card-deck.card-padless(class='card-' + columns + '-columns')
+		if block
+			block
+		else
+			p No cards defined.
+
+// Passes all attributes to the card.
+// You can do fun stuff in a loop even like:
+// +card(data-url="{{ url_for('projects.view', project_url=project.url) }}", tabindex='{{ loop.index }}')
+mixin card()
+	.card.card-fade.cursor-pointer.mb-4.js-project-go&attributes(attributes)
+		if block
+			block
+		else
+			p No card content defined.