Clever Component Library

Banner: Small Heading 

<div class="banner banner--small-heading">
    <div class="banner-inner">
        <div class="heading heading--category banner-caption">Find us wherever you go</div>
        <h2 class="heading heading--secondary banner-heading">Enjoy the ride and leave<br>the charging to us</h2>
    </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": [
    "small-heading"
  ],
  "bannerCaption": "Find us wherever you go",
  "bannerHeading": "Enjoy the ride and leave<br>the charging to us",
  "childComponents": []
}

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)