<div class="charging-stations-teaser js-charging-stations-teaser">
    <div class="charging-stations-teaser-media">
        <span class="icon icon-charge-dot">
            <span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                    <defs>
                        <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="-136.2382" y1="-118.9007" x2="-136.2382" y2="-119.9007" gradientTransform="matrix(32 0 0 32 4375.6216 3836.8674)">
                            <stop offset="0" style="stop-color:#006868" />
                            <stop offset="1" style="stop-color:#003737" />
                        </linearGradient>
                    </defs>
                    <circle fill="url(#gradient)" class="st0" cx="16" cy="16" r="16" />
                    <polyline fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round" class="st1" points="16.5,9 12,16 20,16 15.6,23" />
                </svg>
            </span>
        </span>
        <span class="icon icon-charge-road">
            <span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2856.1 1142.3">
                    <path d="M0.7,1047.5l-0.7-0.8c0.2-0.2,19.5-17.1,54.8-44.1l0.6,0.8C20.1,1030.4,0.9,1047.3,0.7,1047.5z M81.1,984.1l-0.6-0.8
	c18.3-13.5,37.5-27.2,57.1-40.7l0.6,0.8C118.6,956.9,99.4,970.6,81.1,984.1z M164.6,925.4l-0.6-0.8c19.2-12.9,39-25.7,58.9-38.1
	l0.5,0.8C203.6,899.8,183.8,912.6,164.6,925.4z M250.7,870.5l-0.5-0.9c19.9-12.1,40.2-24,60.4-35.6l0.5,0.9
	C290.9,846.5,270.6,858.5,250.7,870.5z M339,819.3l-0.5-0.9c20.4-11.3,41.2-22.4,61.8-33l0.5,0.9C380.2,797,359.4,808.1,339,819.3z
	 M429.4,771.9L429,771c20.9-10.4,42.2-20.6,63.2-30.3l0.4,0.9C471.5,751.3,450.3,761.5,429.4,771.9z M521.7,728.4l-0.4-0.9
	c21.3-9.5,43-18.7,64.5-27.5l0.4,0.9C564.7,709.7,543,719,521.7,728.4z M615.9,689.1l-0.4-0.9c21.8-8.5,43.9-16.7,65.6-24.4l0.3,0.9
	C659.7,672.4,637.6,680.6,615.9,689.1z M711.7,654.3l-0.3-0.9c22.1-7.5,44.6-14.6,66.7-21.2l0.3,1
	C756.3,639.7,733.8,646.8,711.7,654.3z M809.1,624.1l-0.3-1c22.5-6.3,45.3-12.3,67.7-17.8l0.2,1
	C854.4,611.7,831.6,617.7,809.1,624.1z M908,598.9l-0.2-1c22.8-5.2,45.8-9.9,68.6-14.2l0.2,1C953.8,589,930.7,593.8,908,598.9z
	 M1008,579.1l-0.2-1c23-3.9,46.3-7.4,69.2-10.4l0.1,1C1054.3,571.7,1031,575.2,1008,579.1z M1109,564.9l-0.1-1
	c23.2-2.6,46.7-4.7,69.7-6.3l0.1,1C1155.6,560.2,1132.2,562.3,1109,564.9z M1425.7,557.2c-3.7,0-7.5,0-11.2,0v-1c3.7,0,7.5,0,11.2,0
	c19.4,0,39.1-0.4,58.7-1.1v1C1464.9,556.9,1445.1,557.2,1425.7,557.2z M1210.6,556.7l-0.1-1c23.3-1.2,46.8-1.9,70-2.1v1
	C1257.4,554.8,1233.9,555.5,1210.6,556.7z M1382.5,556.6c-6.2-0.2-12.5-0.4-18.7-0.7c-17-0.7-34.2-1.2-51.3-1.4v-1
	c17.1,0.2,34.3,0.6,51.3,1.4c6.2,0.3,12.4,0.5,18.6,0.7L1382.5,556.6z M1516.4,554.5l-0.1-1c23-1.4,46.5-3.3,69.7-5.7l0.1,1
	C1562.9,551.2,1539.5,553.2,1516.4,554.5z M1618,545.3l-0.1-1c22.9-2.8,46.2-6.1,69.3-9.9l0.2,1
	C1664.2,539.1,1640.9,542.4,1618,545.3z M1718.9,529.9l-0.2-1c22.7-4.1,45.7-8.8,68.6-13.8l0.2,1
	C1764.7,521.1,1741.6,525.7,1718.9,529.9z M1818.8,508.9l-0.2-1c22.4-5.3,45.2-11.2,67.8-17.4l0.3,1
	C1864,497.7,1841.2,503.5,1818.8,508.9z M1917.4,482.7l-0.3-1c22.1-6.4,44.6-13.4,66.9-20.7l0.3,1
	C1962,469.3,1939.5,476.3,1917.4,482.7z M2014.7,451.9l-0.3-0.9c21.8-7.5,44-15.4,65.9-23.7l0.4,0.9
	C2058.7,436.4,2036.5,444.4,2014.7,451.9z M2110.5,416.7l-0.4-0.9c21.5-8.4,43.3-17.3,64.9-26.4l0.4,0.9
	C2153.9,399.4,2132,408.3,2110.5,416.7z M2204.8,377.6l-0.4-0.9c21.1-9.3,42.6-19,63.8-29l0.4,0.9
	C2247.4,358.6,2226,368.3,2204.8,377.6z M2297.5,334.8l-0.4-0.9c20.8-10.1,41.9-20.6,62.7-31.3l0.5,0.9
	C2339.5,314.2,2318.4,324.8,2297.5,334.8z M2388.6,288.7l-0.5-0.9c20.5-10.8,41.2-22.1,61.5-33.5l0.5,0.9
	C2429.8,266.6,2409.1,277.9,2388.6,288.7z M2478.1,239.4l-0.5-0.9c20.1-11.6,40.4-23.5,60.4-35.6l0.5,0.9
	C2518.5,215.9,2498.2,227.8,2478.1,239.4z M2565.8,187.1l-0.5-0.9c19.8-12.3,39.7-24.9,59.2-37.6l0.5,0.8
	C2605.5,162.1,2585.6,174.8,2565.8,187.1z M2651.7,131.8l-0.6-0.8c19.6-13.1,39-26.4,57.8-39.6l0.6,0.8
	C2690.7,105.4,2671.3,118.7,2651.7,131.8z M2735.7,73.6l-0.6-0.8c19.7-14.2,38.7-28.3,56.3-41.8l0.6,0.8
	C2774.4,45.3,2755.4,59.3,2735.7,73.6z M2817.4,11.9l-0.6-0.8c9-7.2,13.7-11.1,13.7-11.1l0.7,0.1C2831.5,0.6,2831.5,0.6,2817.4,11.9
	z M25.7,1138.3l-0.7-0.8c1.5-1.3,152-132.5,394.3-258.1c142.3-73.7,287.9-131.1,432.9-170.6c181.2-49.3,361.7-70.5,536.7-63.1
	c174.8,7.4,360.7-17.1,552.5-73c153.4-44.7,311-109.4,468.2-192.3c267.7-141.2,444.1-288.2,445.9-289.7l0.6,0.8
	c-1.8,1.5-178.2,148.6-446,289.8c-157.3,82.9-314.9,147.7-468.4,192.4c-191.9,55.9-377.9,80.4-552.9,73
	c-174.8-7.4-355.3,13.8-536.4,63.1C707.6,749.2,562,806.6,419.8,880.3C177.6,1005.8,27.2,1137,25.7,1138.3z M25.7,1142.3l-0.7-0.8
	c1.5-1.3,152-132.5,394.3-258.1c142.3-73.7,287.9-131.1,432.9-170.6c181.2-49.3,361.7-70.5,536.7-63.1
	c174.8,7.4,360.7-17.1,552.5-73c153.4-44.7,311-109.4,468.2-192.3c267.7-141.2,444.1-288.2,445.9-289.7l0.6,0.8
	c-1.8,1.5-178.2,148.6-446,289.8c-157.3,82.9-314.9,147.7-468.4,192.4c-191.9,55.9-377.9,80.4-552.9,73
	c-174.8-7.4-355.3,13.8-536.4,63.1C707.6,753.2,562,810.6,419.8,884.3C177.6,1009.8,27.2,1141,25.7,1142.3z" />
                    <path class="motion-path" fill="none" d="M0,1110.1c1.5-1.3,153.3-136.1,397.6-265C541.1,769.3,688,710.4,834.2,669.9c182.8-50.6,364.9-72.4,541.3-64.8
	c176.5,7.6,364.2-17.7,557.9-75.1c154.9-46,313.9-112.5,472.6-197.7c270.3-145.2,448.3-296.3,450.1-297.8" />
                </svg>
            </span>
        </span>
        <span class="icon icon-charge-car">
            <span class="svg-container"><svg viewBox="0 0 120.7 56.2" xmlns="http://www.w3.org/2000/svg">
                    <path d="m117.5 42.7c1.1-2.2 1.7-4.3 2.2-5.8.8-2.9 1.1-6 1-9 .1-3.1-.3-6.1-1.2-9-.5-1.5-1.1-3.6-2.3-5.9-1.4-2.6-3.1-4.6-5.4-6.1-3.9-2.7-8.1-3-10.8-3-.4 0-.9 0-1.2-.1-4-.1-9.1.5-10 .7-.3.1-.7.1-1 .2l-9.5.1c-.3-.4-.9-1.1-1.6-1.9-1.8-2.1-2.5-2.5-2.9-2.6-1.2-.4-2.4-.2-2.5-.3l-1 .1 2.1 4.7-32.7-.4c-2.4-.1-4.7-.2-7.1-.1h-.4c-3.8-.1-13.8-.1-19.5 1.8-1.2.3-2.3.8-3.4 1.3-1.7.7-3 1.5-3.8 2.1-4.8 3.5-5.8 10.8-6.2 13.9-.2 1.6-.3 3.3-.3 5 0 1.6.2 3.3.4 5 .4 3.1 1.5 10.4 6.3 13.9.8.5 2.2 1.5 3.9 2.2 1.1.5 2.2.9 3.4 1.3 5.7 1.8 15.8 1.6 19.5 1.5h.4c2.3-.1 4.7-.1 7-.2l32.7-.7-2 4.7.9.1h.6c.5 0 1.1 0 1.9-.3.4-.2 1.1-.6 3-2.6.6-.8 1.3-1.5 1.6-1.9l9.5-.1c.4 0 .7.1 1 .2.9.2 5.9.7 10 .6.4 0 .8 0 1.2-.1 2.8-.2 7-.5 10.8-3.2 2.3-1.4 4.1-3.6 5.4-6.1zm-6.4-34.8c3.6 2.5 5.3 6.2 6.3 9.1-1.7-2.2-3.5-4.3-5.4-6.3-2.1-2.2-3.5-3.4-5.1-4.4-.5-.3-.9-.6-1.4-.8 1.9.5 3.8 1.1 5.6 2.4zm-100.2 1.1c-1.6 1.2-3 2.5-4.3 4-1.1 1.3-2.2 2.6-3.1 4.1l-.3.5c.8-2.5 2.2-5.2 4.3-6.8.6-.5 2-1.4 3.5-2.1.1-.1.1 0 .2-.1 0 .2-.1.3-.3.4zm.5 39.1c-1.6-.7-3-1.6-3.6-2.1-2.2-1.6-3.6-4.2-4.5-6.7l.3.6c.9 1.4 2 2.8 3.2 4 1.3 1.4 2.8 2.8 4.3 3.9.2.1.3.2.5.4-.1.1-.1 0-.2-.1zm95.2-.2c-2 1.2-4.2 2.2-6.6 2.7-3.8.2-8.7-.3-9.5-.6-.4-.1-.9-.2-1.4-.2l-10.1.1-.2.3c-1.5 1.9-3.5 4.1-4 4.3-.3 0-.5.1-.8.2l2.1-4.9-35 .8c-2.3.1-4.7.1-7 .2h-.4c-2.8.1-10.8.2-16.4-.8-1.8-.9-3.7-2-5.3-3.3-1.5-1.2-2.9-2.4-4.2-3.8-1.1-1.2-2.1-2.5-3-3.9-1.1-1.7-2-3.4-2.9-5.2 0-.3 0-.4-.1-.6-.3-1.6-.4-3.2-.4-4.8s.1-3.2.4-4.8c0-.2.1-.4.1-.7.8-1.8 1.7-3.6 2.7-5.2.9-1.3 1.9-2.7 3-3.9 1.2-1.4 2.6-2.7 4-3.8 1.6-1.3 3.4-2.4 5.2-3.4 5.6-1.2 13.6-1 16.4-1.1h.4c2.3 0 4.7 0 7.1.1l35 .3-2.2-4.9c.2 0 .4.1.7.2.5.1 2.6 2.4 4.1 4.2l.2.3 10.1-.1c.5 0 .9 0 1.4-.2.8-.2 5.6-.7 9.5-.7 2.4.5 4.5 1.4 6.6 2.6 1.5 1 2.7 2 4.8 4.1 2.6 2.8 5.2 5.9 7.5 9.2.5 2.1.6 4.2.6 6.4v.3c-.1.1 0 .1 0 .3.1 2.2-.1 4.4-.5 6.5-2.3 3.3-4.8 6.4-7.4 9.3-1.8 2.5-3 3.6-4.5 4.5zm4.8-.2c-1.8 1.3-3.8 2-5.6 2.4.5-.3.9-.5 1.5-.9 1.6-1 2.9-2.3 5-4.5 1.8-2 3.6-4.1 5.2-6.3-.8 3-2.4 6.7-6.1 9.3zm-53.1-27.2c17.2.4 31.9 1.5 32.1 1.4v-.4c-.1 0-14.9-1-32.1-1.4-10.1-.2-19.1-.3-26.8-.1-9.5.3-17 1-22 2l.1.3c11.5-2.2 32.8-2.2 48.7-1.8zm.2 3.3c-10.2-.3-19.3-.3-27 0-9.6.3-17.1.9-22.2 2l.1.3c11.6-2.3 33.2-2.4 49.2-2 17.4.4 32.2 1.4 32.4 1.4v-.4c-.2 0-15.1-1-32.5-1.3zm40.1-12.8c8.6 2 12.9 4.4 15.1 6l.2-.3c-4.1-2.9-10.6-5-15.3-6.1-5.1-1.2-9.4-1.7-9.4-1.7v.4c.1 0 4.3.5 9.4 1.7zm-71.2-.2c2.8 0 11-.1 19.8-.4 14.6-.6 23.9-1.4 27.6-2.7l.9-.3h-.9c-.5 0-1.1 0-2.1 0-9 0-36.4 0-46.4 3.2l-.9.3h.9c.1-.1.4-.1 1.1-.1zm39.1-3.1c2.6 0 4.6-.1 6.3 0 .4 0 .8 0 1.1-.1-9.4 2.5-40.3 2.8-46.4 2.8 8.7-2.2 27.6-2.7 39-2.7zm-8.4 11.4c17.1.5 31.6 1.4 31.8 1.5v-.4c-.1 0-14.7-1-31.8-1.5-10-.2-19-.3-26.6 0-9.5.3-16.8 1-21.8 2l.1.3c11.4-2.2 32.5-2.2 48.3-1.9zm35.3 8.8c0-.6 0-3.4-.7-6.9-1-5.2-2.8-9.3-5.3-11.9l-.2-.2h-.8c-5 0-10.6.4-16.7 1.2-9.6 1.2-23.4 1.7-23.4 1.7-15.1.7-28.3 1.7-32.8 2.4-.9.2-3 .4-4.4 2.1-.8.8-1.4 2.1-1.8 5.6-.2 2.2-.3 4.5-.2 6.7 0 2.3 0 4.5.3 6.7.4 3.5 1.1 4.8 1.9 5.5 1.5 1.6 3.6 1.9 4.5 2 4.5.6 17.7 1.5 32.8 2 .1 0 13.9.3 23.5 1.4 6.1.6 11.7 1 16.7.9h.8l.2-.2c2.5-2.7 4.2-6.8 5.1-12 .6-3.6.5-6.5.5-7zm-6.6 17.7c-5 0-10.5-.2-16.6-.9-9.6-1.1-23.2-1.3-23.6-1.4-17.4-.6-28.9-1.4-32.7-1.9-.8-.1-2.5-.3-3.6-1.6-.5-.5-1-1.4-1.5-4.7-.2-2.1-.4-4.3-.4-6.5l.1-.1.1-.1c-.1-2.2 0-4.3.2-6.4.4-3.2.9-4.2 1.4-4.8 1.1-1.3 2.8-1.5 3.6-1.6 3.7-.5 15.2-1.5 32.7-2.4.4 0 14-.5 23.6-1.7 6-.7 11.6-1.2 16.6-1.2h.1c2.8 3.1 4.1 7.6 4.7 11 .6 3.3.7 5.9.7 6.6v.1c-.2 1.5-.4 11.9-5.4 17.6zm12-.9c-5.1 1.3-9.3 2-9.4 1.9l.1.4s4.3-.6 9.4-1.9c8.6-2.2 13-4.7 15.2-6.4l-.2-.3c-3.8 3-10.3 5-15.1 6.3zm-51.4 1.3c-10.9-.3-20.7-.2-20.9-.1h-.9l.9.3c8.4 2.5 28.4 2.7 40.2 2.6 2.6 0 4.6 0 6.2-.1h2.1.9l-.8-.3c-3.8-1.3-13.1-2-27.7-2.4zm25.6 2.4c-8.8.1-34.6.5-45.3-2.2 6.1 0 37-.2 46.4 2.3-.4-.1-.7-.1-1.1-.1z" />
                </svg>
            </span>
        </span>
    </div>
    <article class="card card--centered card--mega-header" aria-labelledby="card-0-heading">
        <div class="card-inner">

            <div class="card-content">
                <div class="card-content-inner">
                    <header class="card-header">
                        <h3 id="card-0-sub-heading" class="heading heading--category card-subheading">Clever charging stations</h3>
                        <h2 id="card-0-heading" class="heading heading--secondary card-heading">748</h2>
                    </header>

                    <div class="card-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>

                    <div class="child-components">

                        <a href="#" class="cta">
                            <span class="text">Find a charger</span>
                            <span class="icon icon-cta-arrow-right">
                                <span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.5 15.1">
                                        <path d="M49 0l-1.5 1.4 5.2 5.2H0v2h52.7l-5.2 5.1 1.5 1.4 7.5-7.5z" />
                                    </svg></span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </article>
</div>
<div class="charging-stations-teaser js-charging-stations-teaser">
	<div class="charging-stations-teaser-media">
		{% include '@icon' with { source: 'icon-charge-dot.svg' } %}
		{% include '@icon' with { source: 'icon-charge-road.svg' } %}
		{% include '@icon' with { source: 'icon-charge-car.svg' } %}
	</div>
	{% include '@card' with chargingStationsTeaser %}
</div>
{
  "chargingStationsTeaser": {
    "cardId": "card-0",
    "cardModifiers": [
      "centered",
      "mega-header"
    ],
    "cardHeading": "748",
    "cardSubheading": "Clever charging stations",
    "cardBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
    "childComponents": [
      {
        "type": "call-to-action",
        "content": {
          "url": "#",
          "text": "Find a charger"
        }
      }
    ]
  }
}
  • Handle: @charging-stations-teaser
  • Preview:
  • Filesystem Path: resources/components/02-units/charging-stations-teaser/charging-stations-teaser.twig
  • References (2): @icon, @card

Charging Stations Teaser

Purpose: Used to direct the user to the Clever Charging Network page.

Element: Card subheading

Purpose: Acts as a supporting headline above.
Required: Yes
Recommendations: Keep max to about 30 characters (including spaces)

Element: Card mega header

Purpose: Used as the main headline to set context for the content below. In this case illustrates data either from the backend, or put in by the editor - the total amount of Clever charging stations.
Required: Yes

Element: Card body

Purpose: Used to expand on the main headline.
Required: Yes