<div class="leasing-options">
    <div class="leasing-options-inner">
        <div class="option">
            <h5 class="heading heading--context item-heading">Med opstart</h5>
            <span class="option-subheading small-text">Installation af ladeboks betales ved opstart</span>

            <div class="prices">
                <div class="price-item">
                    <dt class="price-item-header">
                        <h5 class="heading heading--context option-heading">Elbil</h5>
                    </dt>
                    <dd class="price-item-description">
                        <span class="price-item-price">639</span><span class="suffix">kr/md</span>
                    </dd>
                </div>
                <div class="price-item">
                    <dt class="price-item-header">
                        <h5 class="heading heading--context option-heading">Plugin-hybrid</h5>
                    </dt>
                    <dd class="price-item-description">
                        <span class="price-item-price">335</span><span class="suffix">kr/md</span>
                    </dd>
                </div>
            </div>

            <div class="additional-info">
                <span class="small-text">
                    <p>Installation af ladeboks: <strong>6.000 kr.</strong> ekskl. moms<br>Beskatning af installation: <strong>7.500 kr.</strong> inkl. moms</p>
                </span>
            </div>
        </div>
        <div class="option">
            <h5 class="heading heading--context item-heading">Uden opstart</h5>
            <span class="option-subheading small-text">Installation af ladeboks betales gennem den månedlige pris</span>

            <div class="prices">
                <div class="price-item">
                    <dt class="price-item-header">
                        <h5 class="heading heading--context option-heading">Elbil</h5>
                    </dt>
                    <dd class="price-item-description">
                        <span class="price-item-price">839</span><span class="suffix">kr/md</span>
                    </dd>
                </div>
                <div class="price-item">
                    <dt class="price-item-header">
                        <h5 class="heading heading--context option-heading">Plugin-hybrid</h5>
                    </dt>
                    <dd class="price-item-description">
                        <span class="price-item-price">535</span><span class="suffix">kr/md</span>
                    </dd>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="leasing-options">
	<div class="leasing-options-inner">
		{% for item in leasingOptions %}
			<div class="option">
				<{{ headingLevel|default('h5') }} class="heading heading--context item-heading">{{ item.leasingOptionsHeading }}</{{ headingLevel|default('h5') }}>
				<span class="option-subheading small-text">{{ item.leasingOptionsBody }}</span>

				<div class="prices">
					<div class="price-item">
						<dt class="price-item-header">
							<h5 class="heading heading--context option-heading">Elbil</h5>
						</dt>
						<dd class="price-item-description">
							<span class="price-item-price">{{ item.prices.electric }}</span><span class="suffix">kr/md</span>
						</dd>
					</div>
					<div class="price-item">
						<dt class="price-item-header">
							<h5 class="heading heading--context option-heading">Plugin-hybrid</h5>
						</dt>
						<dd class="price-item-description">
							<span class="price-item-price">{{ item.prices.hybrid }}</span><span class="suffix">kr/md</span>
						</dd>
					</div>
				</div>

				{% if item.additionalInformation %}
					<div class="additional-info">
						<span class="small-text">{{ item.additionalInformation }}</span>
					</div>
				{% endif %}
			</div>
		{% endfor %}
	</div>
</div>
{
  "leasingOptions": [
    {
      "leasingOptionsHeading": "Med opstart",
      "leasingOptionsBody": "Installation af ladeboks betales ved opstart",
      "prices": {
        "electric": 639,
        "hybrid": 335
      },
      "additionalInformation": "<p>Installation af ladeboks: <strong>6.000 kr.</strong> ekskl. moms<br>Beskatning af installation: <strong>7.500 kr.</strong> inkl. moms</p>"
    },
    {
      "leasingOptionsHeading": "Uden opstart",
      "leasingOptionsBody": "Installation af ladeboks betales gennem den månedlige pris",
      "prices": {
        "electric": 839,
        "hybrid": 535
      },
      "additionalInformation": ""
    }
  ]
}
  • Handle: @leasing-options
  • Preview:
  • Filesystem Path: resources/components/02-units/leasing-options/leasing-options.twig

Leasing options

Purpose: Used to outline prices for different leasing options.

Element: Leasing options

Purpose: Used to add different options
Required: Yes

Element: Leasing options heading

Purpose: Used to indicate the name of the product
Required: Yes
Recommendations: Keep max to about 70-80 characters (including spaces)

Element: Leasing options body

Purpose: Used to extend the above heading
Required: Yes

Element: Prices

Purpose: Used to add price for electric and hybrid subscription
Required: Yes

Element: Additional information

Purpose: Used for additional information
Required: No