<div class="two-column-block row ">
<div class="col col--span-12 col--span-l-6 col--no-gutter col--gutter-right-l">
<section class="panel theme--grey panel--compact panel--image-background-m panel--image-overlay panel--no-padding-top-m-down h-full-height h-text-color-white-m" data-theme="grey" data-theme-scope="cascade">
<figure class="panel__figure">
<img src="/mocks/img/hero-carousel.jpg" srcset="" alt="" class="panel__image">
</figure>
<div class="panel__inner">
<div class="main-content">
<h2>Text on an image</h2>
<h6 class="two-column-block__subtitle">
Subheading follows the text color
</h6>
<p>Body text with <strong>bold text</strong>, <em>italic text</em> and an <a href="#">inline link</a>.</p>
<div class="arrow-button-wrapper arrow-color-white-m">
<a class="button button--arrow button--icon" href="#">
<span class="button__label">Text link with arrow</span>
<svg class="icon button__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
<blockquote class="quote">
<div>
<svg class="icon quote__icon" focusable="false">
<use xlink:href="#icon-quote"></use>
</svg>
</div>
<div>
<div class="quote__content">
The quote text and icon should follow the selected text color.
</div>
<div class="quote__reference">Quote reference</div>
</div>
</blockquote>
</div>
</div>
</section>
</div>
<div class="col col--span-12 col--span-l-6 col--no-gutter col--gutter-left-l">
<section class="panel theme--grey panel--compact h-full-height" data-theme="grey" data-theme-scope="cascade">
<div class="panel__inner">
<div class="main-content">
<h2>Ordinary text for comparison</h2>
<h6 class="two-column-block__subtitle">
Subheading follows the text color
</h6>
<p>Body text with <strong>bold text</strong>, <em>italic text</em> and an <a href="#">inline link</a>.</p>
<div class="arrow-button-wrapper ">
<a class="button button--arrow button--icon" href="#">
<span class="button__label">Text link with arrow</span>
<svg class="icon button__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
<blockquote class="quote">
<div>
<svg class="icon quote__icon" focusable="false">
<use xlink:href="#icon-quote"></use>
</svg>
</div>
<div>
<div class="quote__content">
The quote text and icon should follow the selected text color.
</div>
<div class="quote__reference">Quote reference</div>
</div>
</blockquote>
</div>
</div>
</section>
</div>
</div>
<div class="two-column-block row {{#if reverse}}row--direction-row-reverse{{/if}}">
<div class="col col--span-12 col--span-l-6 col--no-gutter col--gutter-{{#if reverse}}left{{else}}right{{/if}}-l">
{{#> @panel firstColumn}}
<div class="main-content">
{{#if title}}
<h2>{{{title}}}</h2>
{{/if}}
{{#if subtitle}}
<h6 class="two-column-block__subtitle{{#if subTitleColor}} h-text-color-{{subTitleColor}}{{/if}}">
{{{subtitle}}}
</h6>
{{/if}}
{{#if paragraph}}
{{{paragraph}}}
{{/if}}
{{#if cta}}
<a href="#" class="button {{#if buttonModifier}}{{buttonModifier}}{{/if}}">
{{cta}}
</a>
{{/if}}
{{#if textLink}}
<div class="arrow-button-wrapper {{arrowClasses}}">
{{render '@button' textLink}}
</div>
{{/if}}
{{#if quote}}
{{render '@quote' quote}}
{{/if}}
{{#> @partial-block}}
{{/@partial-block}}
</div>
{{/@panel}}
</div>
<div class="col col--span-12 col--span-l-6 col--no-gutter col--gutter-{{#if reverse}}right{{else}}left{{/if}}-l">
{{#> @panel secondColumn }}
<div class="main-content">
{{#if title}}
<h2>{{{title}}}</h2>
{{/if}}
{{#if subtitle}}
<h6 class="two-column-block__subtitle{{#if subTitleColor}} h-text-color-{{subTitleColor}}{{/if}}">
{{{subtitle}}}
</h6>
{{/if}}
{{#if paragraph}}
{{{paragraph}}}
{{/if}}
{{#if cta}}
<a href="#" class="button {{#if buttonModifier}}{{buttonModifier}}{{/if}}">
{{cta}}
</a>
{{/if}}
{{#if textLink}}
<div class="arrow-button-wrapper {{arrowClasses}}">
{{render '@button' textLink}}
</div>
{{/if}}
{{#if quote}}
{{render '@quote' quote}}
{{/if}}
{{#> @partial-block}}
{{/@partial-block}}
</div>
{{/@panel}}
</div>
</div>
{
"firstColumn": {
"title": "Text on an image",
"subtitle": "Subheading follows the text color",
"paragraph": "<p>Body text with <strong>bold text</strong>, <em>italic text</em> and an <a href=\"#\">inline link</a>.</p>",
"textLink": {
"href": "#",
"label": "Text link with arrow",
"icon": "chevron-right",
"modifiers": [
"arrow"
]
},
"quote": {
"quote": "The quote text and icon should follow the selected text color.",
"reference": "Quote reference"
},
"additionalClasses": "h-full-height h-text-color-white-m",
"modifiers": [
"compact",
"image-background-m",
"image-overlay",
"no-padding-top-m-down"
],
"theme": "grey",
"arrowClasses": "arrow-color-white-m",
"image": {
"src": "/mocks/img/hero-carousel.jpg",
"alt": ""
}
},
"secondColumn": {
"title": "Ordinary text for comparison",
"subtitle": "Subheading follows the text color",
"paragraph": "<p>Body text with <strong>bold text</strong>, <em>italic text</em> and an <a href=\"#\">inline link</a>.</p>",
"textLink": {
"href": "#",
"label": "Text link with arrow",
"icon": "chevron-right",
"modifiers": [
"arrow"
]
},
"quote": {
"quote": "The quote text and icon should follow the selected text color.",
"reference": "Quote reference"
},
"additionalClasses": "h-full-height",
"modifiers": [
"compact"
],
"theme": "grey"
}
}
.two-column-block__subtitle {
color: $color-green-dark;
@include color-theme {
color: $arg-theme-color;
color: var(--surface-subtitle, var(--theme-accent, #{$arg-theme-color}));
}
@include dark-theme {
color: $color-white;
color: var(--surface-subtitle, #{$color-white});
}
color: var(--surface-subtitle, var(--theme-accent, #{$color-green-dark}));
}
.two-column-block {
@include breakpoint($l) {
> .col {
display: flex;
}
}
}
No notes defined.