<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 class="child-components">
            <div class="accordion js-accordion">
                <h3 class="heading heading--small accordion-heading">Installation af ladeboksen</h3>
                <p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>
                <h3 class="heading heading--small accordion-heading">Lad op derhjemme</h3>
                <p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>
                <h3 class="heading heading--small accordion-heading">Få 24/7 support</h3>
                <p>There's two paragraphs here.</p>
                <p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>
            </div>
        </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": [
    {
      "type": "accordion",
      "content": {
        "accordionPanels": [
          {
            "heading": "Installation af ladeboksen",
            "body": "<p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>"
          },
          {
            "heading": "Lad op derhjemme",
            "body": "<p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>"
          },
          {
            "heading": "Få 24/7 support",
            "body": "<p>There's two paragraphs here.</p><p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>"
          }
        ]
      }
    }
  ],
  "bannerBody": "<p>Lad på Danmarks stærkeste netværk og få en personlige ladeboks installeret hvis du har din egen private parkeringsplads.</p>"
}
  • Handle: @banner--with-child-components
  • Preview:
  • Filesystem Path: resources/components/02-units/banner/banner.twig

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)