Clever Component Library

Card: No Media 

<article class="card" 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">Lorem ipsum dolor sit amet</h3>
                    <h2 id="card-0-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>
</article>
 
{% set cardHeadingId = cardId|default('card') ~ '-heading' %}
{% set cardSubheadingId = cardId|default('card') ~ '-sub-heading' %}
<{{ tagName|default('article') }} class="card{% if cardModifiers is defined and cardModifiers|length %} card--{{ cardModifiers|join(' card--') }}{% endif %}" aria-labelledby="{{ cardHeading ? cardHeadingId : cardSubheadingId}}">
	<div class="card-inner">
		{% if cardMedia %}
			<div class="card-media">
				{% include ('@' ~ cardMedia.type) with cardMedia.content|merge(
					{ attributes: {
						'data-object-fit': 'cover',
						'data-object-position': 'center center',
					} }
				) only %}
			</div>
		{% endif %}

		{% if cardComponents %}
			<div class="card-components">
				{% for component in cardComponents %}
					{% include '@' ~ component.type with component.content only %}
				{% endfor %}
			</div>
		{% endif %}

		<div class="card-content">
			<div class="card-content-inner">
				{% if cardHeading or cardSubheading %}
				<header class="card-header">
					{% if cardSubheading %}
					<{{ subHeadingLevel|default('h3') }} id="{{cardSubheadingId}}" class="heading heading--category card-subheading">{{ cardSubheading }}</{{ subHeadingLevel|default('h3') }}>
					{% endif %}
					{% if cardHeading %}
					<{{ headingLevel|default('h2') }} id="{{cardHeadingId}}" class="heading heading--secondary card-heading">{{ cardHeading }}</{{ headingLevel|default('h2') }}>
					{% endif %}
				</header>
				{% endif %}

				{% if cardBody %}
					<div class="card-body">
						{{ cardBody }}
					</div>
				{% endif %}

				{% set childComponentBlock = block('childComponents') %}
				{% if childComponents or childComponentBlock|trim is not empty %}
					<div class="child-components">
						{% if childComponentBlock %}
							{{ childComponentBlock|raw }}
						{% endif %}

						{% for component in childComponents %}
							{% include '@' ~ component.type with component.content only %}
						{% endfor %}
					</div>
				{% endif %}
			</div>
		</div>

		{% if cardGallery %}
			<aside class="card-aside">
				{% for col in cardGallery %}
					<div class="card-aside-column">
						{% for block in col %}
							{% include ('@' ~ block.type) with block.content|merge({
								classes: [
									'small-' ~ min(block.columnSize + 4, 12),
									'medium-' ~ min(block.columnSize + 2, 12),
									'large-' ~ min(block.columnSize, 12),
								],
							}) only %}
						{% endfor %}
					</div>
				{% endfor %}
			</aside>
		{% endif %}
	</div>
</{{ tagName|default('article') }}>
 
{
  "cardId": "card-0",
  "cardMedia": null,
  "cardHeading": "Lorem ipsum dolor sit amet",
  "cardSubheading": "Lorem ipsum dolor sit amet",
  "cardBody": "<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>"
}

Card: Default

Element: Card subheading

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

Element: Card header

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

Element: Card body

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

Element: Image

Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1

Card: Reversed

Element: Card subheading

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

Element: Card header

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

Element: Card body

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

Element: Image

Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1

Card: Centered

Element: Card subheading

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

Element: Card header

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

Element: Card body

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

Element: Image

Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1

Card: No Media

Element: Card subheading

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

Element: Card header

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

Element: Card body

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

Card: With Child Components

Element: Card subheading

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

Element: Card header

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: Card body

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

Element: Image

Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1

Element: Car selector

Purpose: Lets the user specify a specific car model and direct the user to the appropriate page in the webshop. Option sets in the dropdowns should be defined by the available car data.
Required: Yes

Card: With Image Caption

Element: Card subheading

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

Element: Card header

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

Element: Card body

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

Element: Image

Purpose: Used to illustrate the content. Can also be a video.
Required: Yes
Recommendations: Image or video aspect ratio should be close to 1x1

Element: Image caption

Purpose: Used to describe the image/video.
Required: Yes
Recommendations: Keep max to about 120 characters (including spaces)

Card: Full Bleed Media

Element: Card subheading

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

Element: Card header

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

Element: Card body

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

Element: Image

Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1,25

Card: Mega Header

Element: Card subheading

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

Element: Card header

Purpose: Used as the main headline to set context for the content below. In this case it illustrates relevant data.
Required: Yes

Element: Card body

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

Element: Image

Purpose: Used to illustrate the content. Can also be a video.
Required: No
Recommendations: Image or video aspect ratio should be close to 1x1

Card: Media Gallery

Element: Card subheading

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

Element: Card header

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

Element: Card body

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

Element: Images

Purpose: Used to illustrate the content. Can also be a videos.
Required: Yes
Recommendations: Big image or video aspect ration should be close to 1x1,1. Tall image or video aspect ratio should be close to 1x1,5. Horizontal image or video aspect ratio should be close to 1,5:1

Card: Media Gallery Reversed

Element: Card subheading

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

Element: Card header

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

Element: Card body

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

Element: Images

Purpose: Used to illustrate the content. Can also be a videos.
Required: Yes
Recommendations: Big image or video aspect ration should be close to 1x1,1. Tall image or video aspect ratio should be close to 1x1,5. Horizontal image or video aspect ratio should be close to 1,5:1

Card: Pull Quote

Version 2

  • Example of pull quote used in rich text
  • Heading should be made optional
  • Example with heading: Pages / Subscriptions

Card: Components

Version 2

  • Card-component used, in this example, with product teasers-components
  • Could e.g. also be 2 car teasers
  • Only use this component with 2 teasers (it’s not designed to contain less or more than 2 teasers)