<div class="thematic-callout" data-module="thematicCallout">
    <div class="grid-container">
        <div class="thematic-callout__grid grid-x grid-padding-x">
            <div class="cell medium-4">
                <div class="thematic-callout__intro js-thematic-callout-intro">
                    <h2 class="thematic-callout__title"></h2>
                    <p class="thematic-callout__subtitle"></p>
                </div>
            </div>
            <div class="cell medium-8 large-7 thematic-callout__card-grid-cell">
                <div class="thematic-callout__card-grid js-card-grid grid-x grid-margin-x">
                </div>
            </div>
        </div>
    </div>
</div>
{{{customeditframe.editframeStart}}}
<div class="thematic-callout{{#if isRightAligned}} thematic-callout--right-aligned{{/if}}"
     data-module="thematicCallout">
    {{#if nextThematicCallout}}
        {{> @cp-callout-sidebar nextThematicCallout}}
    {{/if}}
    {{#if topSimpleImage}}
        <div class="thematic-callout__layered-image thematic-callout__layered-image--top"
             style="background-image: url({{topSimpleImage.src}});"></div>
    {{/if}}
    {{#if bottomSimpleImage}}
        <div class="thematic-callout__layered-image thematic-callout__layered-image--bottom js-bottom-image"
             style="background-image: url({{bottomSimpleImage.src}});"></div>
    {{/if}}
    <div class="grid-container">
        <div class="thematic-callout__grid grid-x grid-padding-x">
            <div class="cell medium-4{{#if isRightAligned}} large-offset-1{{/if}}">
                 <div class="thematic-callout__intro js-thematic-callout-intro">
                    {{#if eyebrow}}
                        <span class="thematic-callout__eyebrow">{{{eyebrow}}}</span>
                    {{/if}}
                    <h2 class="thematic-callout__title">{{{title}}}</h2>
                    <p class="thematic-callout__subtitle{{#if topTags.nudgeResponsiveImage}} thematic-callout__subtitle--with-margin-bottom{{/if}}">{{{subtitle}}}</p>
                </div>
            </div>
            <div class="cell medium-8 large-7 thematic-callout__card-grid-cell">
                <div class="thematic-callout__card-grid js-card-grid grid-x grid-margin-x">
                    {{#each cards}}
                        <div class="thematic-callout__card cell small-7 medium-6">
                            {{> @cp-card-standard}}
                        </div>
                    {{/each}}
                </div>
                {{#if topTags }}
                    {{> @cp-hashtags topTags }}
                {{/if}}
            </div>
        </div>
    </div>
    {{#if backgroundResponsiveImage}}
        <div class="thematic-callout__background">
            {{> @cp-medium-image backgroundResponsiveImage}}
            {{#if tags }}
                <div class="thematic-callout__hashtags grid-container">
                    <div class="grid-x grid-padding-x thematic-callout__hashtags-grid">
                        <div class="cell medium-7">
                            {{> @cp-hashtags tags }}
                        </div>
                    </div>
                </div>
            {{/if}}
        </div>
    {{/if}}
</div>
{{{customeditframe.editframeStop}}}
/* No context defined for this component. */

There are no notes for this item.