{# ========================================================================== #}
{# :: Highlight #}
{# ========================================================================== #}
{% import "general/components/highlight/highlight-macros.njk" as highlight %}

{# ========================================================================== #}
{# :: Partial #}
{# ========================================================================== #}
<div class="l-section">

	{{highlight.default("l-section--background-pink", {
		title: "Lot berekent je rente",
		text: "Laat lot jouw maximale hypotheek berekenen voor 2019. <br> <br>
		Lorem ipsum dolor sit amet, est illud commodo repudiare at, cu sonet
		imperdiet theophrastus sea. At qui eros soleat, te per maiorum
		consequuntur, et quidam conclusionemque usu. At qui eros soleat, te per
		maiorum consequuntur, et quidam conclusionemque usu. At qui eros soleat,
		te per maiorum consequuntur, et quidam conclusionemque usu.",
		items: [
			{
				label: { text: "Jouw bruto jaarinkomen:" },
				id: "component-rente-1",
				name: "component-rente-1",
				class: "c-input--inverted",
				input:
					{
						type: "text",
						placeholder: "€ 45.000"
					}
			},
			{
				label: { text: "Bruto jaarinkomen partner:" },
				id: "component-rente-2",
				name: "component-rente-2",
				class: "c-input--inverted",
				input:
					{
						type: "text",
						placeholder: "€ 45.000"
					}
			}
		],
		buttons: [
			{
				calculate:
					{
						text: "bereken eenvoudig",
						class: "c-button--inverted"
					}
			},
			{
				discover:
					{
						text: "ontdek onze rentes",
						class: "c-button--inverted"
					}
			}
		]
	})}}

</div>