<div class="banner banner--align-left banner--small-heading">
    <div class="banner-inner">
        <div class="heading heading--category banner-caption">Fast pris & fri strøm</div>
        <h2 class="heading heading--secondary banner-heading">Vælg dit perfekte abonnement</h2>
        <div class="banner-body">
            <p>Lad på Danmarks stærkeste netværk og få en personlige ladeboks installeret hvis du har din egen private parkeringsplads.</p>
        </div>
    </div>
</div>
<div class="banner{% if bannerModifiers is defined and bannerModifiers|length %} banner--{{ bannerModifiers|join(' banner--') }}{% endif %}">
	<div class="banner-inner">
		{% if bannerCaption %}
			<div class="heading heading--category banner-caption">{{ bannerCaption }}</div>
		{% endif %}
		{% if bannerHeading %}
			<{{ headingLevel|default('h2') }} class="heading heading--secondary banner-heading">{{ bannerHeading }}</{{ headingLevel|default('h2') }}>
		{% endif %}
		{% if bannerBody %}
			<div class="banner-body">
				{{ bannerBody }}
			</div>
		{% endif %}
		{% if childComponents %}
			<div class="child-components">
				{% for component in childComponents %}
					{% include ('@' ~ component.type) with component.content only %}
				{% endfor %}
			</div>
		{% endif %}
	</div>
</div>
{
  "bannerModifiers": [
    "align-left",
    "small-heading"
  ],
  "bannerCaption": "Fast pris & fri strøm",
  "bannerHeading": "Vælg dit perfekte abonnement",
  "childComponents": [],
  "bannerBody": "<p>Lad på Danmarks stærkeste netværk og få en personlige ladeboks installeret hvis du har din egen private parkeringsplads.</p>"
}

Banner

Purpose: Used to set the context for content below.

Element: Banner caption

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

Element: Banner heading

Purpose: Used as the main headline to set context for the content below.
Required: Yes
Recommendations: Keep max to about 45 characters (including spaces)