Clever Component Library

Hero: Blue Gradient 

<section class="hero hero--content-light" data-gradient-color="blue">
    <div class="hero-content">
        <div class="card" aria-labelledby="card-heading">
            <div class="card-inner">

                <div class="card-content">
                    <div class="card-content-inner">
                        <header class="card-header">
                            <h3 id="card-sub-heading" class="heading heading--category card-subheading">Lorem ipsum dolor sit amet</h3>
                            <h2 id="card-heading" class="heading heading--secondary card-heading">Lorem ipsum dolor sit amet</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>
                            <p>Ut enim ad minim veniam.</p>
                            <p>Quis nostrud exercitation ullamco laboris nisi ut.</p>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="hero-media" data-media-type="image">

        <div class="image">
            <div class="image-inner">
                <span style="padding-bottom: NaN%;" class="image-placeholder"></span>
                <img src="" alt="" srcset="/temp/hero-example-2.jpg 1x,/temp/hero-example-2@2x.jpg 2x" data-object-fit="cover" data-object-position="center center">
            </div>
        </div>
    </div>
</section>
 
<{{ tagName|default('section') }} class="hero{% if heroModifiers is defined and heroModifiers|length %} hero--{{ heroModifiers|join(' hero--') }}{% endif %}"{% if heroGradientColor is defined and heroGradientColor %} data-gradient-color="{{ heroGradientColor }}"{% endif %}>
	<div class="hero-content">
		{% if 'campaign-headline' in heroModifiers %}
			{% include '@campaign-headline' with {
				campaignHeadlineHeading: heroHeading,
			} %}
		{% else %}
			{% include '@card' with {
				tagName: 'div',
				cardSubheading: heroSubheading,
				cardHeading: heroHeading,
				cardBody: heroBody,
				childComponents: heroComponents,
			} only %}
		{% endif %}
	</div>
	{% if heroMedia is defined and heroMedia %}
		<div class="hero-media" data-media-type="{{ heroMedia['type']|default('image') }}">
			{% include heroMedia['type'] is defined and heroMedia['type'] == 'video' ? '@video' : '@image' with heroMedia|merge({
				attributes: {
					'data-object-fit': 'cover',
					'data-object-position': heroMedia['focalPoint']|default('center center')|replace('-', ' ')
				}|merge(heroMedia['attributes'] is defined and heroMedia['attributes']|length ? heroMedia['attributes'] : {})
			}) %}
		</div>
	{% endif %}
</{{ tagName|default('section') }}>
 
{
  "heroGradientColor": "blue",
  "heroModifiers": [
    "content-light"
  ],
  "heroMedia": {
    "retina": true,
    "sizes": [
      {
        "url": "/temp/hero-example-2.jpg",
        "width": 1440,
        "height": 700
      },
      {
        "url": "/temp/hero-example-2@2x.jpg",
        "width": 2880,
        "height": 1400
      }
    ]
  },
  "heroSubheading": "Lorem ipsum dolor sit amet",
  "heroHeading": "Lorem ipsum dolor sit amet",
  "heroBody": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n\t\t<p>Ut enim ad minim veniam.</p>\n\t\t<p>Quis nostrud exercitation ullamco laboris nisi ut.</p>"
}

Hero: Default

Purpose: Used to introduce and set the mood for the page.

Element: Card subheading

Purpose: Acts as a supporting headline above, in this case specifies the name of the page the hero is placed in.
Required: Yes
Recommendations: Scenario where a particular page the hero is placed on can be accessed from the Primary Navigation: should correlate with the core headline (link) in the Primary Navigation and be kept max to about 20 characters (including spaces). Other scenarios: keep max to about 30 characters (including spaces)

Element: Card heading

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

Element: Body copy

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

Element: Image

Purpose: Image should be a Multiple Sources Image, so an editor could upload different ones for Desktop and Mobile.
Required: No
Recommendations: Desktop image aspect ratio should be close to 1,5x1; Mobile image aspect ratio should be close to 1x1,5

Hero: Video

Purpose: Used to introduce and set the mood for the page.

Element: Card subheading

Purpose: Acts as a supporting headline above, in this case specifies the name of the page the hero is placed in.
Required: Yes
Recommendations: Scenario where a particular page the hero is placed on can be accessed from the Primary Navigation: should correlate with the core headline (link) in the Primary Navigation and be kept max to about 20 characters (including spaces). Other scenarios: keep max to about 30 characters (including spaces)

Element: Card heading

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

Element: Body copy

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

Element: Video

Purpose: Used to set the mood for the page. It should always be on autoplay.
Required: Yes
Recommendations: Video aspect ratio should be close to 1,5x1

Hero: Reversed Content

Purpose: Used to introduce and set the mood for the page.

Element: Card subheading

Purpose: Acts as a supporting headline above, in this case specifies the name of the page the hero is placed in.
Required: Yes
Recommendations: Scenario where a particular page the hero is placed on can be accessed from the Primary Navigation: should correlate with the core headline (link) in the Primary Navigation and be kept max to about 20 characters (including spaces). Other scenarios: keep max to about 30 characters (including spaces)

Element: Card heading

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

Element: Body copy

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

Element: Image

Purpose: Image should be a Multiple Sources Image, so an editor could upload different ones for Desktop and Mobile.
Required: No
Recommendations: Desktop image aspect ratio should be close to 1,5x1; Mobile image aspect ratio should be close to 1x1,5

Hero: No Media

Purpose: Used to introduce and set the mood for the page.

Element: Card subheading

Purpose: Acts as a supporting headline above, in this case specifies the name of the page the hero is placed in.
Required: Yes
Recommendations: Scenario where a particular page the hero is placed on can be accessed from the Primary Navigation: should correlate with the core headline (link) in the Primary Navigation and be kept max to about 20 characters (including spaces). Other scenarios: keep max to about 30 characters (including spaces)

Element: Card heading

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

Element: Body copy

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

Element: Image

Purpose: There is no image.
Required: No

Hero: With Child Components

Purpose: Used to introduce and set the mood for the page.

Element: Card subheading

Purpose: Acts as a supporting headline above, in this case specifies the name of the page the hero is placed in.
Required: Yes
Recommendations: Scenario where a particular page the hero is placed on can be accessed from the Primary Navigation: should correlate with the core headline (link) in the Primary Navigation and be kept max to about 20 characters (including spaces). Other scenarios: keep max to about 30 characters (including spaces)

Element: Card heading

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

Element: Body copy

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

Element: Image

Purpose: Image should be a Multiple Sources Image, so an editor could upload different ones for Desktop and Mobile.
Required: No
Recommendations: Desktop image aspect ratio should be close to 1,5x1; Mobile image aspect ratio should be close to 1x1,5

Hero: Campaign Headline

Purpose: Used to introduce and set the mood for the page.

Element: Image

Purpose: Image should be a Multiple Sources Image, so an editor could upload different ones for Desktop and Mobile.
Required: Yes
Recommendations: Desktop image aspect ratio should be close to 1,5x1; Mobile image aspect ratio should be close to 1x1,5

Element: Campaign Headline

Purpose: Used to display Clever brand statements.
Required: Yes

Hero: Content Light

Purpose: Used to introduce and set the mood for the page.

Element: Card subheading

Purpose: Acts as a supporting headline above, in this case specifies the name of the page the hero is placed in.
Required: Yes
Recommendations: Scenario where a particular page the hero is placed on can be accessed from the Primary Navigation: should correlate with the core headline (link) in the Primary Navigation and be kept max to about 20 characters (including spaces). Other scenarios: keep max to about 30 characters (including spaces)

Element: Card heading

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

Element: Body copy

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

Element: Image

Purpose: Image should be a Multiple Sources Image, so an editor could upload different ones for Desktop and Mobile.
Required: Yes
Recommendations: Desktop image aspect ratio should be close to 1,5x1; Mobile image aspect ratio should be close to 1x1,5

Hero: Content Dark; Blue Gradient; Earth Gradient; Yellow Gradient

Purpose: Not to be used.